angular / angular/components

Add a "focus on first tab" option to FocusTrap in CDK

Ouverte
#10,156 7 commentaires 4 réactions 0 personnes assignées Voir sur GitHub
area: cdk/a11y feature P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### Bug, feature request, or proposal:
Proposal

#### What is the expected behavior?
For dialogs and other containers such as drawers, menus etc. When the dialog or container is initialized to receive focus, instead of focusing the first tabbable element or the cdkFocusInitial directive's element, do not focus any element. Instead focus the first element upon the first tab or the last element upon shift-tab.

#### What is the current behavior?
Currently when using cdkFocusRegionStart and cdkFocusRegionEnd, the first tabbable element with the focus trap region receives initial focus. The cdkFocusInitial directive allows changing which component, but there is no mechanism to have no element initially focused. There are often use cases when no initial focus is a preferred behavior (e.g. dialogs where the primary action is non-reversible such as a delete operation).

#### What is the use-case or motivation for changing an existing behavior?
To support use cases where no initial focus is an important UX concern.

#### Is there anything else we should know?
This could be low effort. It appears that the wiring already in FocusTrap could easily support this. A new directive such as 'cdkFocusInitialTab' could be added to be the focus target on initial tab, and code changes made so that initial focus to the first tabbable element is not automatically applied when that directive is used. Usage could be something like:
```
First
...
Last
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par l’implémentation de FocusTrap de CDK ainsi que par le câblage de cdkFocusRegionStart/cdkFocusRegionEnd et cdkFocusInitial décrit dans l’issue. Suivez la manière dont le focus initial est sélectionné, puis définissez et testez le comportement proposé de cdkFocusInitialTab afin que la touche Tab vers l’avant atteigne le premier élément et que Maj-Tab atteigne le dernier, sans donner initialement le focus à un élément.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
accessibility, frontend
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.