Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(FocusTrap): focus methods should accept focus options #21767

Closed
lagatchell opened this issue Feb 1, 2021 · 1 comment · Fixed by #21769, cayacdev/cashbox#88, ToWipf/jasmarty#155 or CarlosPavajeau/Kaizen#251
Assignees
Labels
area: cdk/a11y feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@lagatchell
Copy link
Contributor

Feature Description

FocusTrap methods should accept focus parameters.

Methods to change:

  • focusFirstTabbableElement()
  • focusFirstTabbableElementWhenReady()
  • focusInitialElement()
  • focusInitialElementWhenReady()
  • focusLastTabbableElement()
  • focusLastTabbableElementWhenReady()

Example:

// Would like to be able to do something like the following
constructor(
  private _elementRef: ElementRef,
  private _focusTrapFactory: ConfigurableFocusTrapFactory,
) {
  const focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
  const focusOptions = { preventScroll: true }; 
  focusTrap.focusFirstTabbableElementWhenReady(focusOptions);
}

Use Case

Using a FocusTrap to focus an element that starts out of view can cause parent elements to shift as the browser tries to bring the element into view. Allowing focus parameters to be configured, will enable consumers to set the preventScroll option and prevent this behavior (in supporting browsers).

Stackblitz demoing a scenario where the ability to specify focus parameters would be helpful.

Maybe be related to #17863

@lagatchell lagatchell added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Feb 1, 2021
@crisbeto crisbeto self-assigned this Feb 2, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 2, 2021
Allows for an optional `FocusOptions` object to be passed into the various focus
trap methods.

Fixes angular#21767.
@crisbeto crisbeto added area: cdk/a11y has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Feb 2, 2021
annieyw pushed a commit that referenced this issue Feb 5, 2021
…1769)

Allows for an optional `FocusOptions` object to be passed into the various focus
trap methods.

Fixes #21767.
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Feb 8, 2021
…gular#21769)

Allows for an optional `FocusOptions` object to be passed into the various focus
trap methods.

Fixes angular#21767.
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Feb 8, 2021
…gular#21769)

Allows for an optional `FocusOptions` object to be passed into the various focus
trap methods.

Fixes angular#21767.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 8, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.