Overlays : Focus & Fermeture (react-utils)

Ce qu'elle fait

Fournit des hooks React compacts et réutilisables pour gérer le comportement des overlays : fermeture lors d'un clic extérieur ou via la touche Échap, restauration du focus vers l'élément déclencheur après la fermeture, et rendu du contenu en arrière-plan inerte lorsqu'un modal ou un overlay est ouvert. La compétence contient des exemples d'utilisation et les pièges courants.

Quand l'utiliser

Utilisez cette compétence lors de l'implémentation de dialogues, de popovers, de feuilles (sheets) ou de modals accessibles dans des interfaces React où la gestion du focus et la sémantique de fermeture sont cruciales — particulièrement pour les utilisateurs de claviers et de lecteurs d'écran. Utile pour les bibliothèques de composants et les overlays au niveau de l'application.

Ce qui est inclus

• Scripts : aucun
• Références : renvoie aux fichiers sources du package (useDismiss, useFocusReturn, useInert) et au routage au niveau du package ; des exemples en TypeScript/TSX sont fournis dans le corps de la compétence.
• Instructions : extraits de composants montrant comment appliquer les hooks, patterns recommandés (passer { when: open } à useDismiss) et erreurs courantes à éviter.

Agents compatibles

Agents orientés frontend ou tout agent aidant à l'écriture de code UI React/TypeScript et pouvant lire les sources d'un dépôt.