Comment utiliser la directive de focus angulaire CDK Trap

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.

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 cdkTrapFocus du 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 cdkTrapFocus . La première chose que nous devons faire pour l’utiliser est d’importer le 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 cdkTrapFocus en fait partie.

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 cdkTrapFocus a une fonction de mise au point automatique intégrée. Nous pouvons utiliser le cdkTrapFocusAutoCapture @Input . 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.

 <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 shift + tab pour revenir en arrière, nous procéderons dans l'ordre inverse sans quitter le modal.

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.