Problèmes de focus et support de l'optimisation
La création de composants React accessibles nécessite plus que l'ajout de labels ARIA. Vous devez gérer la manière dont les utilisateurs naviguent dans votre interface à l'aide d'un clavier.
Je documente mon parcours de création d'un composant de navigation entièrement accessible à partir de zéro. Dans cette mise à jour, je me concentre sur deux domaines principaux : la correction des pièges au clavier et la préparation d'une gestion plus fluide des sous-listes.
La correction du piège au clavier
Un problème courant survient lorsqu'un utilisateur utilise Shift+Tab pour entrer dans un composant. Si le focus se pose sur un lien à l'intérieur d'une sous-liste fermée, le contour du focus disparaît. Il s'agit d'une erreur majeure pour les utilisateurs au clavier.
Pour corriger cela, j'ai implémenté un changement de logique :
• Si le focus atteint le dernier élément d'une sous-liste fermée, le système déplace le focus vers le bouton parent de la rangée supérieure. • J'utilise un écouteur d'événement onFocus pour détecter ce mouvement spécifique. • La logique vérifie si l'élément focalisé est le dernier du composant. • Si c'est le cas, le code identifie l'ancêtre de la rangée supérieure et y déplace le focus.
Cela garantit que l'utilisateur ne perd jamais sa place dans l'interface.
Configuration de la fermeture des sous-listes
Lorsque vous fermez un menu parent, tous les sous-menus ouverts à l'intérieur doivent également se fermer. C'est ainsi que fonctionnent les systèmes d'exploitation standards.
Pour gérer cela dans React sans causer de problèmes de performance, j'ai évité de stocker des fonctions dans l'état (state). Le stockage de fonctions dans le state déclenche des re-rendus (re-renders) inutiles.
À la place, j'ai utilisé une approche différente :
• J'ai créé une Map à l'intérieur d'un useRef. • Cette Map stocke les fonctions de fermeture associées aux éléments parents. • Lorsque le tableau de navigation est demandé, le système injecte ces fonctions dans les objets. • L'utilisation d'une Ref me permet de mettre à jour ces connexions sans déclencher de re-rendu.
Cela pose les bases d'un comportement de menu propre et prévisible.
Ensuite, j'implémenterai la logique réelle pour fermer ces sous-listes.
Source : https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l