fix(i18n): missing aria for search combobox

anct-cartographie-nationale · Nov 28, 2023 · 13f451d · 13f451d
1 parent d612a91
commit 13f451d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/features/adresse/components/search-field/search-field.component.html b/src/features/adresse/components/search-field/search-field.component.html
@@ -12,7 +12,11 @@
       autocomplete="off"
       aria-describedby="search"
       aria-haspopup="true"
+      aria-autocomplete="list"
+      aria-controls="search-result"
+      [attr.aria-activedescendant]="(dropdownPane.expanded$ | async) ? 'search-result-' + dropdownPane.activeIndex : null"
       formControlName="search"
+      role="combobox"
       [attr.aria-describedby]="isNotFound ? 'search-desc-error' : null"
       [attr.aria-expanded]="dropdownPane.expanded$ | async"
       (input)="search.next(searchInput.value); searchInput.value.length <= 2 ? dropdownPane.reduce() : dropdownPane.expand()"
@@ -29,24 +33,26 @@
     <ng-content></ng-content>
   </div>
   <ul
+    id="search-result"
     #dropdownPane="dropdownPane"
     appDropdownPane
     [class.show]="(dropdownPane.expanded$ | async) && suggestions.length > 0"
     (reduced)="onReduced()"
     class="dropdown-menu position-absolute mt-1"
     role="listbox"
-    aria-labelledby="search">
+    aria-labelledby="résultats de la recherche">
     <li
       #results
-      *ngFor="let suggestion of suggestions; index as suggestionIndex; trackBy: trackBySuggestionName; let isLast = last">
+      *ngFor="let suggestion of suggestions; index as suggestionIndex; trackBy: trackBySuggestionName; let isLast = last"
+      id="search-result-{{ suggestionIndex }}"
+      [attr.aria-selected]="dropdownPane.activeIndex === suggestionIndex ? true : null">
       <button
         type="button"
         tabindex="-1"
         role="option"
         class="dropdown-item"
         [class.border-bottom]="!isLast"
         [class.active]="dropdownPane.activeIndex === suggestionIndex"
-        [attr.aria-current]="dropdownPane.activeIndex === suggestionIndex ? true : null"
         (focusin)="dropdownPane.setIndex(suggestionIndex)"
         (focusout)="dropdownPane.setIndex(-1)"
         (mousedown)="setSuggestion(suggestion); dropdownPane.reduce()">

diff --git a/...list/lieu-mediation-numerique-list-item/lieu-mediation-numerique-list-item.component.html b/...list/lieu-mediation-numerique-list-item/lieu-mediation-numerique-list-item.component.html
@@ -32,7 +32,7 @@ <h2 class="h5 mb-0 text-first-letter-uppercase fw-bold pe-1">
       </div>
     </a>
     <div
-      class="col-auto text-end z-index-elevated"
+      class="col-auto text-end z-index-over"
       *ngIf="lieuMediationNumerique.courriel || lieuMediationNumerique.telephone || lieuMediationNumerique.prise_rdv">
       <a
         *ngIf="lieuMediationNumerique.courriel as courriel"
@@ -56,7 +56,7 @@ <h2 class="h5 mb-0 text-first-letter-uppercase fw-bold pe-1">
     </div>
   </div>
   <div class="row g-2 mt-1" *ngIf="lieuMediationNumerique.labels_nationaux as labelsNationaux">
-    <div class="col-auto z-index-elevated" *ngFor="let label of labelsNationaux">
+    <div class="col-auto z-index-over" *ngFor="let label of labelsNationaux">
       <button (click)="showLabel.emit(label); showLabelInvokingContext.emit($event)" class="btn btn-link p-0">
         <img [src]="assetsConfiguration.path + '/img/logo/labels/' + label + '.svg'" [alt]="'Label ' + label" />
       </button>