angular / angular/components

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

Offen
#18,956 8 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/a11y feature P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### 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);
}
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
accessibility, frontend
Issue-Typ
Feature
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.