feat(accessibility): improve accessibility

.eslintrc.json

 {
   "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
+  "ignorePatterns": ["projects/**/*"],
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
+      "files": ["*.ts"],
       "parserOptions": {
-        "project": [
-          "tsconfig.json"
-        ],
+        "project": ["tsconfig.json"],
         "createDefaultProgram": true
       },
-      "extends": [
-        "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
+      "extends": ["plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",
@@ -38,13 +29,22 @@
       }
     },
     {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
-      "rules": {}
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {
+        "@angular-eslint/template/no-positive-tabindex": "error",
+        "@angular-eslint/template/no-autofocus": "error",
+        "@angular-eslint/template/mouse-events-have-key-events": "error",
+        "@angular-eslint/template/click-events-have-key-events": "error",
+
+        "@angular-eslint/template/accessibility-valid-aria": "error",
+
+        "@angular-eslint/template/accessibility-alt-text": "error",
+        "@angular-eslint/template/accessibility-elements-content": "error",
+        "@angular-eslint/template/accessibility-label-has-associated-control": "error",
+        "@angular-eslint/template/accessibility-table-scope": "error",
+        "@angular-eslint/template/button-has-type": "error"
+      }
     }
   ]
 }

package.json

@@ -45,11 +45,11 @@
   "devDependencies": {
     "@angular-builders/jest": "^14.0.0",
     "@angular-devkit/build-angular": "^14.2.2",
-    "@angular-eslint/builder": "^14.0.0-alpha.4",
-    "@angular-eslint/eslint-plugin": "^14.0.0-alpha.4",
-    "@angular-eslint/eslint-plugin-template": "^14.0.0-alpha.4",
-    "@angular-eslint/schematics": "^14.0.0-alpha.4",
-    "@angular-eslint/template-parser": "^14.0.0-alpha.4",
+    "@angular-eslint/builder": "14.0.4",
+    "@angular-eslint/eslint-plugin": "14.0.4",
+    "@angular-eslint/eslint-plugin-template": "14.0.4",
+    "@angular-eslint/schematics": "14.0.4",
+    "@angular-eslint/template-parser": "14.0.4",
     "@angular/cli": "^14.2.2",
     "@angular/compiler-cli": "^14.2.1",
     "@angular/localize": "^14.2.1",
@@ -60,8 +60,8 @@
     "@types/leaflet.locatecontrol": "^0.74.0",
     "@types/luxon": "^1.25.0",
     "@types/node": "^16.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
+    "@typescript-eslint/eslint-plugin": "5.36.2",
+    "@typescript-eslint/parser": "5.36.2",
     "codelyzer": "^6.0.2",
     "eslint": "^8.23.0",
     "eslint-plugin-jest": "^27.0.0",
@@ -74,8 +74,8 @@
     "karma-browserify": "^8.0.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine-html-reporter": "^2.0.0",
     "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "^2.0.0",
     "ng-packagr": "^14.2.1",
     "prettier": "^2.1.2",
     "standard-version": "^9.3.2",
@@ -83,4 +83,4 @@
     "tslint": "~6.1.0",
     "typescript": "~4.8.3"
   }
-}
+}
\ No newline at end of file

src/app/admin/components/claim-structure/claim-structure.component.html

@@ -13,8 +13,8 @@
         <td>{{ structure.structureName }}</td>
         <td>{{ structure.createdAt | date: 'mediumDate' }}</td>
         <td>
-          <button (click)="acceptDemand(structure)">Valider</button
-          ><button (click)="refuseDemand(structure)">Refuser</button>
+          <button type="button" (click)="acceptDemand(structure)">Valider</button
+          ><button type="button" (click)="refuseDemand(structure)">Refuser</button>
         </td>
       </tr>
       <tr *ngIf="!demandsAttachment?.length">

src/app/admin/components/manage-jobs/attached-users/attached-users.component.html

 <div *ngIf="users.data.users && users.data.users.length !== 0">
   <p *ngFor="let user of users.data.users">
-    <span (click)="redirectTo(user)">{{ user.name }} {{ user.surname }} - {{ user.email }}</span>
+    <span tabindex="0" (click)="redirectTo(user)" (keyup.enter)="redirectTo(user)"
+      >{{ user.name }} {{ user.surname }} - {{ user.email }}</span
+    >
   </p>
 </div>

src/app/annuaire/filter-modal/filter-modal.component.html

@@ -4,7 +4,13 @@
       <div class="blockFiltre" *ngFor="let filter of filtersTypes">
         <li class="checkbox">
           <div class="checkboxItem categoryCheckBox">
-            <div fxLayout="row" fxLayoutAlign="start center" (click)="toggleCheckbox(filter)">
+            <div
+              fxLayout="row"
+              fxLayoutAlign="start center"
+              tabindex="0"
+              (click)="toggleCheckbox(filter)"
+              (keyup.space)="toggleCheckbox(filter)"
+            >
               <label>
                 <input
                   type="checkbox"
@@ -25,12 +31,7 @@
   </div>
   <div class="footer">
     <div class="half-width">
-      <app-button
-        [style]="buttonTypeEnum.modalSecondary"
-        [text]="'Effacer'"
-        (click)="clearFilters()"
-        tabindex="0"
-      ></app-button>
+      <app-button [style]="buttonTypeEnum.modalSecondary" [text]="'Effacer'" (click)="clearFilters()"></app-button>
     </div>
     <div class="half-width">
       <app-button [style]="buttonTypeEnum.modalPrimary" [text]="'Appliquer'" (click)="onSubmitFilters()"></app-button>

src/app/annuaire/result-list/result-list.component.html

@@ -2,7 +2,14 @@
   <div class="userNumber">
     {{ userList.length }} utilisateur(s)<span *ngIf="showPagination"> sur {{ totalUserResult }} </span>
   </div>
-  <div class="singleUser" *ngFor="let user of userList; let index = index" (click)="goToUser(user._id)">
+  <div
+    class="singleUser"
+    *ngFor="let user of userList; let index = index"
+    tabindex="0"
+    role="link"
+    (click)="goToUser(user._id)"
+    (keyup.enter)="goToUser(user._id)"
+  >
     <div class="avatar-container">
       <app-svg-icon class="avatar" [type]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-40'"></app-svg-icon>
     </div>
@@ -55,7 +62,6 @@
   </div>
   <div class="buttons">
     <app-button
-      [type]="'button'"
       (action)="goRegister()"
       [text]="'Se créer un compte'"
       [style]="buttonTypeEnum.Secondary"
@@ -63,7 +69,6 @@
     >
     </app-button>
     <app-button
-      [type]="'button'"
       (action)="goLogin()"
       [text]="'Se connecter'"
       [style]="buttonTypeEnum.Primary"

src/app/annuaire/search-bar/search-bar.component.scss

@@ -4,5 +4,10 @@
   .inputSearch {
     max-width: 400px;
     width: 100%;
+    border: 1px transparent;
+    transition: all 0.2s;
+    &:focus-within {
+      border: 1px solid $grey-3;
+    }
   }
 }

src/app/footer/footer.component.html

@@ -14,7 +14,7 @@
       target="_blank"
       rel="noopener noreferrer"
     >
-      <img class="logo-grand-lyon" src="/assets/logos/ic_metro.svg" alt />
+      <img class="logo-grand-lyon" src="/assets/logos/ic_metro.svg" alt role="img" />
       <p class="metro-title" i18n>Un site de la Métropole de Lyon</p>
     </a>
   </div>

src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.html

@@ -19,7 +19,13 @@
     </div>
     <div class="scroll">
       <div class="autocomplete-items" *ngIf="!isAlreadySearching">
-        <p *ngFor="let employer of employers" (click)="selectedResult(employer)" class="autocomplete-item">
+        <p
+          *ngFor="let employer of employers"
+          class="autocomplete-item"
+          tabindex="0"
+          (click)="selectedResult(employer)"
+          (keyup.enter)="selectedResult(employer)"
+        >
           {{ employer.name }}
         </p>
       </div>

src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.html

@@ -26,7 +26,13 @@
         </div>
 
         <div class="structure-list">
-          <div *ngFor="let structure of structures" (click)="selectedResult(structure)" class="filet">
+          <div
+            *ngFor="let structure of structures"
+            class="filet"
+            (click)="selectedResult(structure)"
+            (keyup.enter)="selectedResult(structure)"
+            tabindex="0"
+          >
             <div
               fxLayout="column"
               fxLayoutAlign="space-around"

src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html

 <form [formGroup]="structureForm" *ngIf="structureForm">
   <div class="title" [ngClass]="{ editTitle: isEditMode }">
     <app-svg-icon
-      (click)="goBack()"
       *ngIf="isEditMode"
       [iconClass]="'backArrow'"
       [type]="'ico'"
       [icon]="'arrowBack'"
+      tabindex="0"
+      (click)="goBack()"
+      (keyup.enter)="goBack()"
     ></app-svg-icon>
     <div class="titleContent">
       <h3>Quelles sont les modalités d'accueil de la structure&nbsp;?</h3>

src/app/form/form-view/structure-form/structure-consent/structure-consent.component.html

@@ -13,11 +13,13 @@
   <div class="section">
     <div class="title" [ngClass]="{ editTitle: isEditMode }">
       <app-svg-icon
-        (click)="goBack()"
         *ngIf="isEditMode"
         [iconClass]="'backArrow'"
         [type]="'ico'"
         [icon]="'arrowBack'"
+        tabindex="0"
+        (click)="goBack()"
+        (keyup.enter)="goBack()"
       ></app-svg-icon>
       <div class="titleContent">
         <h3>

src/app/form/form-view/structure-form/structure-contact-completion/structure-contact-completion.component.html

 <form [formGroup]="structureForm" *ngIf="structureForm" (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null">
   <div class="title" [ngClass]="{ editTitle: isEditMode }">
     <app-svg-icon
-      (click)="goBack()"
       *ngIf="isEditMode"
       [iconClass]="'backArrow'"
       [type]="'ico'"
       [icon]="'arrowBack'"
+      tabindex="0"
+      (click)="goBack()"
+      (keyup.enter)="goBack()"
     ></app-svg-icon>
     <div class="titleContent">
       <h3>Quelle personne pourrait connaître ces informations&nbsp;?</h3>

src/app/form/form-view/structure-form/structure-contact/structure-contact.component.html

 <form [formGroup]="structureForm" *ngIf="structureForm" (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null">
   <div class="title" [ngClass]="{ editTitle: isEditMode }">
     <app-svg-icon
-      (click)="goBack()"
       *ngIf="isEditMode"
       [iconClass]="'backArrow'"
       [type]="'ico'"
       [icon]="'arrowBack'"
+      tabindex="0"
+      (click)="goBack()"
+      (keyup.enter)="goBack()"
     ></app-svg-icon>
     <div class="titleContent">
       <h3>Comment joindre votre structure&nbsp;?</h3>
-      <label class="label-optional">Veuillez renseigner au moins un des 2 champs</label>
+      <span class="label-optional">Veuillez renseigner au moins un des 2 champs</span>
     </div>
   </div>
   <div class="form-group" fxLayout="column">

src/app/form/form-view/structure-form/structure-covid-info/structure-covid-info.component.html

 <form [formGroup]="structureForm" (keyup.enter)="(!isEditMode ? '' : null)">
   <div class="title" [ngClass]="{ editTitle: isEditMode }">
     <app-svg-icon
-      (click)="goBack()"
       *ngIf="isEditMode"
       [iconClass]="'backArrow'"
       [type]="'ico'"
       [icon]="'arrowBack'"
+      tabindex="0"
+      (click)="goBack()"
+      (keyup.enter)="goBack()"
     ></app-svg-icon>
     <div class="titleContent">
       <h3>Y a-t-il des informations spécifiques à la période COVID&nbsp;?</h3>

src/app/form/form-view/structure-form/structure-description/structure-description.component.html

 <form [formGroup]="structureForm" (keyup.enter)="(!isEditMode ? '' : null)">
   <div class="title" [ngClass]="{ editTitle: isEditMode }">
     <app-svg-icon
-      (click)="goBack()"
       *ngIf="isEditMode"
       [iconClass]="'backArrow'"
       [type]="'ico'"
       [icon]="'arrowBack'"
+      tabindex="0"
+      (click)="goBack()"
+      (keyup.enter)="goBack()"
     ></app-svg-icon>
     <div class="titleContent">
       <h3>Pouvez-vous présenter la structure en quelques mots&nbsp;?</h3>

src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html

@@ -5,11 +5,13 @@
 >
   <div class="title" [ngClass]="{ editTitle: isEditMode }">
     <app-svg-icon
-      (click)="goBack()"
       *ngIf="isEditMode"
       [iconClass]="'backArrow'"
       [type]="'ico'"
       [icon]="'arrowBack'"
+      tabindex="0"
+      (click)="goBack()"
+      (keyup.enter)="goBack()"
     ></app-svg-icon>
     <div class="titleContent">
       <h3>Quelles aides aux démarches en ligne votre structure propose-t-elle&nbsp;?</h3>

src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html

 <form [formGroup]="structureForm" (keyup.enter)="(!isEditMode ? '' : null)">
   <div class="title" [ngClass]="{ editTitle: isEditMode }">
     <app-svg-icon
-      (click)="goBack()"
       *ngIf="isEditMode"
       [iconClass]="'backArrow'"
       [type]="'ico'"
       [icon]="'arrowBack'"
+      tabindex="0"
+      (click)="goBack()"
+      (keyup.enter)="goBack()"
     ></app-svg-icon>
     <div class="titleContent">
       <h3>Quel matériel est mis à disposition par la structure&nbsp;?</h3>

src/app/form/form-view/structure-form/structure-hours/structure-hours.component.html

 <form [formGroup]="structureForm">
   <div class="title" [ngClass]="{ editTitle: isEditMode }">
     <app-svg-icon
-      (click)="goBack()"
       *ngIf="isEditMode"
       [iconClass]="'backArrow'"
       [type]="'ico'"
       [icon]="'arrowBack'"
+      tabindex="0"
+      (click)="goBack()"
+      (keyup.enter)="goBack()"
     ></app-svg-icon>
     <div class="titleContent">
       <h3>Quels sont les horaires d'ouverture de la structure&nbsp;?</h3>