Gérer le focus avec les références et useEffect
Pilotez le focus dans un univers fondé sur les composants.
Gérer le focus avec les références et useEffect est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Pourquoi le focus doit être géré
Lorsque l’interface apparaît, disparaît ou est mise à jour, le focus du clavier peut se retrouver au mauvais endroit ou disparaître. Dans React, vous le dirigez délibérément avec des références et des effets.
Une ref pointe vers un nœud DOM
useRef vous fournit une référence stable vers un élément réel. Après le rendu, ref.current correspond au nœud DOM réel sur lequel vous pouvez appeler .focus().
const inputRef = useRef(null);
<input ref={inputRef} />useEffect s’exécute après le rendu
Le focus doit être appliqué une fois que l’élément existe dans le DOM. useEffect s’exécute après l’affichage par le navigateur : c’est donc l’endroit sûr pour déplacer le focus.
useEffect(() => {
inputRef.current.focus();
}, []);Appliquer le focus au montage
Un tableau de dépendances vide signifie que l’effet s’exécute une seule fois, au montage du composant. Utilisez-le pour placer le focus sur le premier champ d’un formulaire ou d’une étape.
Appliquer le focus à l’ouverture
Ajoutez une dépendance comme isOpen afin que l’effet s’exécute à nouveau lorsque l’état change. Lorsqu’un panneau s’ouvre, vous pouvez déplacer directement le focus à l’intérieur.
useEffect(() => {
if (isOpen) panelRef.current.focus();
}, [isOpen]);Prévoir la valeur nulle
Une ref peut être nulle si le nœud n’est pas encore rendu. Vérifiez que ref.current existe avant d’appeler .focus(), afin d’éviter un plantage dû à l’absence de l’élément.
ref.current?.focus();Rendre les éléments qui ne sont pas des champs accessibles au focus
Les titres et les divs ne peuvent pas recevoir le focus par défaut. Ajoutez tabindex de -1 afin que le script puisse leur appliquer le focus sans les ajouter à l’ordre naturel de tabulation.
<div tabindex="-1" ref={regionRef}>...</div>Restaurer le focus lors du nettoyage
Un effet peut renvoyer une fonction de nettoyage. Utilisez-la pour renvoyer le focus vers le déclencheur lorsqu’une couche est démontée, afin que les utilisateurs ne se retrouvent pas en haut de la page.
useEffect(() => {
const prev = document.activeElement;
return () => prev.focus();
}, []);Attention aux fermetures obsolètes
Un effet capture les valeurs de son rendu. Si vous appliquez le focus en fonction de données, indiquez-les dans le tableau de dépendances afin que l’effet utilise des valeurs à jour plutôt que des valeurs obsolètes.
forwardRef pour les éléments enfants
Pour appliquer le focus à un élément situé dans un composant enfant, enveloppez-le dans forwardRef. Le parent détient alors une ref vers le nœud interne et peut lui appliquer le focus.
const Field = forwardRef((props, ref) =>
<input ref={ref} {...props} />);N’appliquez pas trop souvent le focus
Ne déplacez le focus que lorsque cela aide réellement l’utilisateur, par exemple à l’ouverture d’une boîte de dialogue ou lors de l’affichage d’une erreur. Prendre le focus à chaque rendu frustre tout le monde.
Vérification rapide
Vous voulez déplacer le focus du clavier vers un élément juste après son rendu par React. Où cela doit-il être effectué ?
Récapitulatif : refs et effets
Associez une useRef à un useEffect pour déplacer le focus après le rendu. Prévoyez la valeur nulle, restaurez le focus lors du nettoyage et ne le dirigez que lorsque cela est utile. 🎯
Questions Fréquemment Posées
La leçon « Gérer le focus avec les références et useEffect » est-elle gratuite ?
Oui — le texte complet de « Gérer le focus avec les références et useEffect » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Gérer le focus avec les références et useEffect » ?
Pilotez le focus dans un univers fondé sur les composants. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Gérer le focus avec les références et useEffect » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Gérer les changements de route sans recharger la page
- Gérer le focus avec les références et useEffect
- Fragments, portails et piège de l'ordre du DOM
- jsx-a11y et garde-fous au niveau des composants