ReactJS

React 15.4.1 - React Autocomplete 1.4.0 - React Modal 1.6.2 - React Tabs 0.8.2

Autocomplete

Corrections

Plusieurs améliorations sont nécessaires pour rendre ce composant accessible :

  • Le composant doit posséder la propriété aria-haspopup="true" ;
  • Le champ de saisie doit posséder un role="textbox" ;
  • Pour chaque champ qui propose une liste de choix, le champ doit posséder la propriété aria-autocomplete="list" ;
  • Chaque champ qui possède la propriété aria-autocomplete="list", doit respecter ces conditions :
    • Le champ doit posséder la propriété aria-activedescendant="ID_option_selectionnée" ;
    • Le champ doit posséder la propriété aria-owns="ID_liste".
  • Depuis un champ dont la liste de choix est déployée, l'utilisation des [TOUCHES DE DIRECTION] doit respecter ces conditions :
    • L'utilisation de ↑ et ↓ doit déplacer le focus sur l'élément suivant dans la liste.
    • Depuis le dernier élément de la liste, l'utilisation de ↓ doit donner le focus au champ de saisie.
    • Depuis le premier élément de la liste, l'utilisation de ↑ doit donner le focus au champ de saisie.
    • Le champ doit être mis à jour avec le choix qui possède le focus.

Malheureusement, les corrections à apporter sont trop complexes pour être appliquées au composant original sans le réécrire. Il serait possible d'ajouter les attributs manquants en héritant du composant (mais pas par composition, ce qui est en soi un problème selon les bonnes pratiques React sur le sujet). Néanmoins, la gestion correcte du focus demande une réécriture en profondeur du code du composant.

Solution alternative

L'alternative à un composant d'autocomplétion peut-être très variable en fonction de la nature de l'autocomplétion. Selon les cas il peut s'agir :

  • D'une liste déroulante (balise HTML select) la recherche par autocomplétion est alors remplacée par la recherche par caractères dans une liste déroulante ;
  • D'une page regroupant tous les termes impactés par l'autocomplétion et traités sous la forme de lien de requête serveur. Là aussi le système d'autocomplétion est alors remplacé par la recherche plein texte dans la liste des liens ;
  • Utiliser un élément datalist HTML 5, qui permet de monter une autocomplétion "accessible", mais malheureusement son support est encore très limité par les navigateurs (voir le support de la balise datalist).

Avis du développeur

Les composants React sont très "fermés", ils ne permettent leur configuration que par des propriétés. Il peut devenir compliqué d'enrichir un composant sans le réécrire si son auteur ne prévoit pas de moyen de configurer certains comportements, ou trop peu d'événements auquels souscrire lors de changements d'état.

Il reste possible de modifier tout type de composant, mais cela peut s'avérer complexe, et relativement verbeux par rapport à un code pensé pour React depuis le début. Avant de choisir un composant, il est donc judicieux d'évaluer les options de configuration possibles (modification des attributs DOM, des classes CSS), pour faciliter son intégration dans un contexte particulier.

Consulter le dépôt des corrections pour ReactJS