angular / angular/components

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

Open
#18,956 8 comments 0 reactions 0 assignees View on GitHub
area: cdk/a11y feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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);
}
```

Contributor guide

Open the contributing guide

Research direction

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.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.