From 13f451d8a1c04ff69e0c7b83befd05ca85a49281 Mon Sep 17 00:00:00 2001
From: Marc Gavanier <marc.gavanier@gmail.com>
Date: Tue, 28 Nov 2023 12:28:53 +0100
Subject: [PATCH] fix(i18n): missing aria for search combobox

---
 .../search-field/search-field.component.html         | 12 +++++++++---
 ...lieu-mediation-numerique-list-item.component.html |  4 ++--
 2 files changed, 11 insertions(+), 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
index 3b8afd9a1..539ce4ffd 100644
--- 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,16 +33,19 @@
     <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"
@@ -46,7 +53,6 @@
         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/src/features/cartographie/components/lieux-mediation-numerique-list/lieu-mediation-numerique-list-item/lieu-mediation-numerique-list-item.component.html b/src/features/cartographie/components/lieux-mediation-numerique-list/lieu-mediation-numerique-list-item/lieu-mediation-numerique-list-item.component.html
index 785515520..cf7ed1add 100644
--- a/src/features/cartographie/components/lieux-mediation-numerique-list/lieu-mediation-numerique-list-item/lieu-mediation-numerique-list-item.component.html
+++ b/src/features/cartographie/components/lieux-mediation-numerique-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>