[Accessibilité] Module de recherche

[seinhorn]

ETQ visiteur du blog en situation de handicap
Je souhaite pouvoir accéder aux informations du formulaire de recherche avec les outils d'assistance

Contexte

Actuellement l'accès aux informations véhiculées par le module de recherche ne sont pas adaptées pour l'accessibilité.

Besoin

Il faudrait permettre aux visiteurs du blog en situation de handicap d'avoir accès optimisé au module de recherche

Solution

ajouter des id sur les éléments de résultats de recherche
spécifier un élément de la liste de résultat via son id pour aria-activedescendant
ajouter les roles adéquats
ajouter des id sur les éléments de résultats

Modifier le formulaire comme suit :

<form action="" role="search">
    <label for="downshift-:R6l:-input">Recherche</label>
    <input 
        aria-activedescendant="result-0"
        aria-autocomplete="list" 
        aria-controls="downshift-:R6l:-menu" 
        aria-labelledby="downshift-:R6l:-label" 
        aria-owns="search-list"
        autocomplete="off" 
        id="downshift-:R6l:-input" 
        role="combobox" 
        placeholder="Nom d’article, auteur..." 
        class="search-field__input" 
        value="">
    
    [...]

    <a hreflang="fr" href="/fr/search/" class="search-field__button-action">
        <span class="visually-hidden">Rechercher</span>
            <svg xmlns="http://www.w3.org/2000/svg" [...] role="img" aria-hidden="true">
                [...]
            </svg>
    </a>

    [...]

    <div class="autocomplete-result" aria-expanded="false" role="listbox" id="search-list">
        ...
    </div>
</form>

<div class="autocomplete-result" aria-expanded="false" role="listbox" id="search-list">
    <div class="[...] autocomplete-result__item autocomplete-result__item--is-highlighted" id="result-0">
        <a hreflang="fr" href="[...]" class="[...] autocomplete-result__link">
        <span class="color-black font-weight-regular">Résultat 1</span>
        </a>
        [...]
    </div>
    <div class="[...] autocomplete-result__item">
        <a hreflang="fr" href="[...]" class="[...] autocomplete-result__link" id="result-1">
        <span class="color-black font-weight-regular">Résultat 2</span>
        </a>
        [...]
    </div>
    [...]
</div>

Ajouter le style CSS suivant :

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

ou

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Documentation :

https://docs.google.com/spreadsheets/d/10vwRgRJj07PcW3w1iCc21QxfF6Gshn0s9-P8EGU8BKs/edit?gid=433583878#gid=433583878

https://docs.google.com/spreadsheets/d/10vwRgRJj07PcW3w1iCc21QxfF6Gshn0s9-P8EGU8BKs/edit?gid=1762007069#gid=1762007069