Merge branch '247-accessibilite-annuaire-corrections-tickets-mantis' into 'dev'

fix(Accessibility) : registry

See merge request !819

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

 <div class="results" id="resultList">
   <div *ngIf="!isLogged && !isLoading" class="notConnected">
-    <img src="../../assets/ico/annuaire-unlogged.svg" alt="Illustration annuaire" />
-    <div class="count" [ngPlural]="totalUserResult">
+    <img src="../../assets/ico/annuaire-unlogged.svg" alt="" />
+    <div class="count" aria-live="polite" [ngPlural]="totalUserResult">
       <ng-template ngPluralCase="0">Aucun membre n'est présent dans l'annuaire Rés'in</ng-template>
       <ng-template ngPluralCase="1">1 membre est présent dans l'annuaire Rés'in</ng-template>
       <ng-template ngPluralCase="other">
@@ -46,10 +46,12 @@
           [showAppointment]="true"
           [showContactInfo]="false"
           [showEmployer]="true"
+          (keydown)="onMemberCardKeydown($event)"
         />
         <div *ngIf="showPagination && !isLoading" class="pagination">
           <p>{{ userList.length }} membres affichés sur {{ totalUserResult }}</p>
           <app-button
+            aria-live="polite"
             [label]="'Voir plus'"
             [variant]="'primaryBlack'"
             [size]="'medium'"
@@ -61,6 +63,6 @@
     </div>
   </ng-container>
   <div *ngIf="isLoading" class="loader" aria-busy="true">
-    <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+    <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt="Chargement en cours" />
   </div>
 </div>

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

-import { AfterViewInit, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
 import { Router } from '@angular/router';
 import { UserAnnuary } from '../../models/user.model';
 import { WindowScrollService } from '../../shared/service/windowScroll.service';
@@ -12,6 +21,7 @@ export class ResultListComponent implements OnChanges, AfterViewInit {
   constructor(
     private router: Router,
     private windowScrollService: WindowScrollService,
+    private elementRef: ElementRef,
   ) {}
   @Input() userList: UserAnnuary[];
   @Input() totalUserResult: number;
@@ -21,13 +31,13 @@ export class ResultListComponent implements OnChanges, AfterViewInit {
   @Output() showMoreEvent = new EventEmitter<void>();
   public maxPerPage = 20;
   public showPagination = false;
+  public keyboardEvent = false;
+  public nextChildIndex: number;
 
   ngAfterViewInit(): void {
-    // Delay required before all member-card components are displayed on the page
-    setTimeout(
-      () => document.getElementById('app-body')?.scrollTo({ top: this.windowScrollService.scrollYToPreserve.value }),
-      10,
-    );
+    requestAnimationFrame(() => {
+      document.getElementById('app-body')?.scrollTo({ top: this.windowScrollService.scrollYToPreserve.value });
+    });
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -35,6 +45,13 @@ export class ResultListComponent implements OnChanges, AfterViewInit {
       this.showPagination = true;
     }
     if (this.userList.length >= this.totalUserResult) this.showPagination = false;
+
+    // Accessibility: after click on "view more" button, send focus to the first newly displayed member card
+    if (this.keyboardEvent && this.nextChildIndex) {
+      requestAnimationFrame(() => {
+        this.setFocusOnFirstNewMemberCard();
+      });
+    }
   }
   public goToUser(userId: string): void {
     this.router.navigateByUrl(`/profile/${userId}`);
@@ -48,7 +65,29 @@ export class ResultListComponent implements OnChanges, AfterViewInit {
   public resetFilters(): void {
     this.resetEvent.emit();
   }
+
+  public onMemberCardKeydown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+      case 'Tab':
+        this.keyboardEvent = true;
+        break;
+    }
+  }
+
+  private setFocusOnFirstNewMemberCard(): void {
+    const lastFocusedMemberCard = this.elementRef.nativeElement.querySelector(
+      `.users app-member-card:nth-child(${this.nextChildIndex}) > div`,
+    );
+    if (lastFocusedMemberCard) {
+      const focusedElement = lastFocusedMemberCard as HTMLElement;
+      focusedElement.focus();
+    }
+  }
+
   public showMore(): void {
+    this.nextChildIndex = this.userList.length + 1;
     this.showMoreEvent.emit();
   }
 }

src/app/profile/profile-structure/profile-structure.component.html

@@ -80,15 +80,30 @@
       </div>
       <div class="sectionContent infoSection">
         <div class="row">
-          <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'address'" />
+          <app-svg-icon
+            [attr.aria-label]="'Adresse postale'"
+            [iconClass]="'icon-20'"
+            [folder]="'tags'"
+            [icon]="'address'"
+          />
           {{ getAddress() }}
         </div>
         <div *ngIf="structure.contactPhone" class="row">
-          <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'phone'" />
+          <app-svg-icon
+            [attr.aria-label]="'Numéro de téléphone'"
+            [iconClass]="'icon-20'"
+            [folder]="'tags'"
+            [icon]="'phone'"
+          />
           {{ structure.contactPhone | phone }}
         </div>
         <div *ngIf="structure.contactMail" class="row">
-          <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'mail'" />
+          <app-svg-icon
+            [attr.aria-label]="'Adresse e-mail'"
+            [iconClass]="'icon-20'"
+            [folder]="'tags'"
+            [icon]="'mail'"
+          />
           <a href="mailto:{{ structure.contactMail }}">{{ structure.contactMail }}</a>
         </div>
       </div>

src/app/profile/profile.component.html

@@ -44,11 +44,21 @@
         </div>
         <div class="block contact">
           <div class="row">
-            <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'phone'" />
+            <app-svg-icon
+              [attr.aria-label]="'Numéro de téléphone'"
+              [iconClass]="'icon-20'"
+              [folder]="'tags'"
+              [icon]="'phone'"
+            />
             <div>{{ userProfile.phone | phone }}</div>
           </div>
           <div class="row">
-            <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'mail'" />
+            <app-svg-icon
+              [attr.aria-label]="'Adresse e-mail'"
+              [iconClass]="'icon-20'"
+              [folder]="'tags'"
+              [icon]="'mail'"
+            />
             <a href="mailto:{{ userProfile.email }}">{{ userProfile.email }}</a>
           </div>
           <div *ngIf="isPublic && userProfile.withAppointment" class="row">

src/app/shared/components/collapsable-filter/collapsable-filter.component.html

 <button
   type="button"
+  [attr.aria-label]="'Déplier les filtres : ' + label"
   [ngClass]="{
     expanded: expanded,
     active: active

src/app/shared/components/member-card/member-card.component.html

@@ -13,7 +13,7 @@
     <p>{{ getJob() }}</p>
     <div *ngIf="showAppointment && member.withAppointment" class="appointment">
       <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'rdv'" />
-      <span>Rendez-vous</span>
+      <span aria-label="Prise de rendez-vous possible">Rendez-vous</span>
     </div>
   </div>
   <div *ngIf="showContactInfo" class="infoDetails">