Un piège de focus est une fonctionnalité d'accessibilité très importante dans une application Web. Dans cet article, je vais d'abord vous aider à comprendre de quoi il s'agit, puis pourquoi c'est important, et enfin, je montrerai comment ajouter rapidement et facilement le concept dans vos applications Angular si nécessaire. Et c'est assez simple grâce au Angular CDK. Très bien, allons-y.   https://youtu.be/JKHAjYJ5T2o?embedable=true  L'accessibilité peut être un peu difficile à comprendre ou même à imaginer si vous êtes quelqu'un qui peut voir, entendre et utiliser le Web facilement avec différents appareils. Il peut donc également être facile de créer des éléments qui ne fonctionnent pas bien pour ceux qui le souhaitent. ne peut pas.  Qu'est-ce qu'un piège à concentration ?  Un piège de concentration est une fonctionnalité qui contribue à améliorer l’expérience de ces personnes. C'est une façon de gérer le focus de l'utilisateur dans un conteneur donné.  Prenons, par exemple, un modal. Si un utilisateur ouvre un modal sans gérer le focus, lorsqu'il commence à naviguer via le clavier en utilisant la touche de tabulation, les éléments derrière le modal continuent de recevoir le focus. C'est bizarre et ce n'est pas ce à quoi l'utilisateur s'attendrait, n'est-ce pas ? Nous devons les concentrer par programmation dans le modal.  Mais cela ne suffit pas ; si nous nous arrêtons ici, alors que nous parcourons le modal, nous finirons par parcourir tous les éléments pouvant être focalisés, puis nous reviendrons à nouveau à concentrer les éléments du document d'origine derrière le modal.  Ce que nous devons faire à la place, c'est piéger le focus afin que lorsque l'utilisateur se concentre sur le dernier élément du modal, le focus soit replacé sur le premier élément focalisable du modal dans l'onglet suivant.  Ok, maintenant que nous savons ce qu'est un piège de focus, nous commençons probablement à réaliser qu'il va y avoir des efforts pour créer cette fonctionnalité, n'est-ce pas ?  Eh bien, pas dans Angular. Avec le CDK, c'est assez simple en utilisant la directive   du   . cdkTrapFocus A11yModule  La directive angulaire  cdkTrapFocus  Regardons un exemple. Ici, nous avons une application Web pour la marque de chaussures Vans.   En haut, nous avons un bouton d'inscription. Lorsque nous cliquons dessus, puis tabulons, nous pouvons voir que le focus se déplace autour des éléments en arrière-plan.   Ce n’est pas ce que nous voulons, n’est-ce pas ?  Ok, ajoutons le   . La première chose que nous devons faire pour l’utiliser est d’importer le   . cdkTrapFocus A11yModule  inscription-modal.component.ts   import { A11yModule } from '@angular/cdk/a11y'; @Component({ selector: 'app-sign-up-modal', ... imports: [A11yModule] }) export class SignUpModalComponent { }  Pour ceux d’entre vous qui ne connaissent pas cet acronyme, Ally est l’abréviation du mot accessibilité. Cela vient du concept selon lequel le mot commence par un A, se termine par un Y et il y a onze caractères entre les deux.   L'Angular CDK possède plusieurs fonctionnalités d'accessibilité dans son module d'accessibilité, et la directive   en fait partie. cdkTrapFocus  Ainsi, une fois importé, nous pouvons maintenant l’utiliser dans le modèle. Nous avons juste besoin de l'ajouter à un élément qui enveloppe notre formulaire.  inscription-modal.component.html     <div cdkTrapFocus> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div>  Mettre l'accent sur l'initialisation avec    cdkTrapFocusAutoCapture @Input  Bonne nouvelle, la directive   a une fonction de mise au point automatique intégrée. Nous pouvons utiliser le     . Cette entrée focalisera automatiquement le premier élément focalisable dans la directive lors de son initialisation. La valeur par défaut est false, nous devons donc fournir une valeur true. cdkTrapFocus cdkTrapFocusAutoCapture @Input   <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div>  Désormais, lorsque nous ouvrons le modal, le champ de nom est correctement focalisé lorsqu'il est ouvert. Et, au fur et à mesure que nous naviguons, lorsque nous arrivons au bouton de fermeture, nous revenons au champ de nom. De plus, si nous appuyons sur   +   pour revenir en arrière, nous procéderons dans l'ordre inverse sans quitter le modal.  shift tab  Ainsi, non seulement c’est très utile pour tous les utilisateurs, mais c’est aussi très facile à mettre en œuvre.  Une dernière chose à noter, la directive trap focus garde la trace du dernier élément focalisé avant son initialisation, donc lorsque nous fermons le modal, le focus est renvoyé sur le bouton qui l'a ouvert.  Bien, nous venons d'économiser une tonne de travail et de rendre notre modal plus accessible.  Vous voulez le voir en action ?  Découvrez le code de démonstration et des exemples de ces techniques dans l'exemple stackblitz ci-dessous. Si vous avez des questions ou des idées, n'hésitez pas à laisser un commentaire.   https://stackblitz.com/edit/stackblitz-starters-2bznzs?embed=1&file=src%2Fsign-up-modal%2Fsign-up-modal.component.html&embedable=true

Buy Me a Coffee

Cet audio est produit dans la langue originale de l'histoire !

Comment utiliser la directive de focus angulaire CDK Trap

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps