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

[karptonite]

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:

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

[crisbeto]

It's worth noting that the preventScroll option isn't supported in all browsers.

[karptonite]

@crisbeto Thanks for bringing attention to that. I mentioned that in the comments of my focusWithoutScrolling example, but it is an easy thing to miss. The window.scrollTo call at the end is essentially polyfill for the browsers that don't support preventScroll.

[crisbeto]

I don't think the scrollTo call will handle all cases. E.g. if the element is inside of another scrollable element that isn't at the root of the document, the wrapper element will still be scrolled.

[karptonite]

That may be true. I guess you'd want to also do something similar with the first scrollable parent of the element to be focused? I wasn't suggesting my code as full polyfill for preventScroll, only an example of something that we use that covers our use cases.

[karptonite]

Here is a polyfill for the preventScroll option: https://github.com/calvellido/focus-options-polyfill

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[karptonite]

I understand the automated voting process here, but it still seems a shame to close this issue. It was assigned a P3 back when it was originally reported, and I think the argument for the improvement still stands.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.