angular / angular/components

fr(cdk/a11y/cdkFocusTrap): Option (or always) not to scroll to element when returning focus

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

Description

#### Feature Description
When `cdkTrapFocus` returns focus to the previously focused element (with `cdkTrapFocusAutoCapture` set to `true`), the directive calls `.focus()` on the previous element. On focus, the browser will, by default, scroll to the focused element. this is not always desirable. I'm not actually certain it is ever desirable, but I don't know all of the use cases for focus trap.

#### Use Case
Consider an interactive modal or popover that can be opened by a hover event on desktop. It is possible that the previously focused element was off screen. Then, when the modal is closed, the window will be scrolled back to the previously focused element when `focus()` is called on it.

Here is a simple alternative to calling `focus()` that would return focus without scrolling:
```typescript
public focusWithoutScrolling(element: HTMLElement) {
const x = window.scrollX;
const y = window.scrollY;
element.focus({ preventScroll: true });
//this is necessary because not all browsers yet respect preventScroll
this.window.scrollTo(x, y);
}
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Start at the cdkFocusTrap directive and its cdkTrapFocusAutoCapture focus-return path. Review how focus options and browser scrolling are handled before deciding whether scrolling should be optional or always prevented. Done means returning focus after closing a modal or popover without unexpectedly scrolling, with coverage for the chosen behavior.

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é
3/5
Temps estimé
1-2 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.