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.

Sign up for GitHub

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

Jump to bottom

bug(mat-sidenav): There is no focus trap when Sidenav position is 'end' #26572

Closed
1 task done
avishome opened this issue Feb 5, 2023 · 2 comments · Fixed by #27355
Closed
1 task done

bug(mat-sidenav): There is no focus trap when Sidenav position is 'end' #26572

avishome opened this issue Feb 5, 2023 · 2 comments · Fixed by #27355
Labels
Accessibility This issue is related to accessibility (a11y) area: material/sidenav P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@avishome
Copy link

avishome commented Feb 5, 2023

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

11

Description

When you opens the Sidenav in over mode the focus shouldn't leave the Sidenav when it is open. it works in case the Sidenav opens in the left side. but in the right side it is broken.

Reproduction

Steps to reproduce:
stackBlitz

  1. Open the Stackblitz example
  2. choose Mode: Over
  3. click on the toggle button
  4. In the keyboard, click on the tab several times.

Expected Behavior

The focus shouldn't leave the Sidenav.

Actual Behavior

The focus leaves the side pane and there is no way to return to Sidenav with the keyboard.

Environment

  • Angular: 14.2.10
  • CDK/Material: 14.2.7
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@avishome avishome added the needs triage This issue needs to be triaged by the team label Feb 5, 2023
@zarend
Copy link
Contributor

zarend commented Feb 6, 2023

Confirm that I this happens with v15. That's because the stackblitz uses v15

@zarend zarend added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent Accessibility This issue is related to accessibility (a11y) area: material/sidenav and removed needs triage This issue needs to be triaged by the team labels Feb 6, 2023
zarend added a commit to zarend/components that referenced this issue Jun 23, 2023
@zarend
fix(material/sidenav): only trap focus when backdrop is enabled
933fde4 
Correct when Sidenav enabled focus trapping. When backdrop is show, trap
focus. Do no trap focus when backdrop is not shown.

Existing behavior is that Sidenav traps focus whenever it is not in side
mode. This causes the end user to not be able to interact with the
sidenav content when the mode is push/over, backdrop is disabled and
using ConfigurableFocusTrapFactory (angular#26572).

With this commit applied, Sidenav always traps focus when backdrop is
shown. Sidenav never traps focus when backdrop is not shown, regardless
of what mode the sidenav is in, focus trapping will respect if the
backdrop is shown or not shown.

Fix this issue by correcting boolean logic for detecting if backdrop is
enabled and using that logic to determine when to trap focus. Add an
example that injects ConfigurableFocusTrapFactory.

Fix angular#26572
@zarend zarend mentioned this issue Jun 23, 2023
Merged
zarend added a commit to zarend/components that referenced this issue Jun 27, 2023
@zarend
fix(material/sidenav): only trap focus when backdrop is enabled
48cb8d1 
Correct when Sidenav enabled focus trapping. When backdrop is show, trap
focus. Do no trap focus when backdrop is not shown.

Existing behavior is that Sidenav traps focus whenever it is not in side
mode. This causes the end user to not be able to interact with the
sidenav content when the mode is push/over, backdrop is disabled and
using ConfigurableFocusTrapFactory (angular#26572).

With this commit applied, Sidenav always traps focus when backdrop is
shown. Sidenav never traps focus when backdrop is not shown, regardless
of what mode the sidenav is in, focus trapping will respect if the
backdrop is shown or not shown.

Fix this issue by correcting boolean logic for detecting if backdrop is
enabled and using that logic to determine when to trap focus. Add an
example that injects ConfigurableFocusTrapFactory.

Fix angular#26572
zarend added a commit to zarend/components that referenced this issue Jun 27, 2023
@zarend
fix(material/sidenav): only trap focus when backdrop is enabled
3a14e0c 
Correct when Sidenav enabled focus trapping. When backdrop is show, trap
focus. Do no trap focus when backdrop is not shown.

Existing behavior is that Sidenav traps focus whenever it is not in side
mode. This causes the end user to not be able to interact with the
sidenav content when the mode is push/over, backdrop is disabled and
using ConfigurableFocusTrapFactory (angular#26572).

With this commit applied, Sidenav always traps focus when backdrop is
shown. Sidenav never traps focus when backdrop is not shown, regardless
of what mode the sidenav is in, focus trapping will respect if the
backdrop is shown or not shown.

Fix this issue by correcting boolean logic for detecting if backdrop is
enabled and using that logic to determine when to trap focus. Add an
example that injects ConfigurableFocusTrapFactory.

Fix angular#26572
zarend added a commit that referenced this issue Jul 6, 2023
@zarend
fix(material/sidenav): only trap focus when backdrop is enabled (#27355)
daa6ca3 
Correct when Sidenav enabled focus trapping. When backdrop is show, trap
focus. Do no trap focus when backdrop is not shown.

Existing behavior is that Sidenav traps focus whenever it is not in side
mode. This causes the end user to not be able to interact with the
sidenav content when the mode is push/over, backdrop is disabled and
using ConfigurableFocusTrapFactory (#26572).

With this commit applied, Sidenav always traps focus when backdrop is
shown. Sidenav never traps focus when backdrop is not shown, regardless
of what mode the sidenav is in, focus trapping will respect if the
backdrop is shown or not shown.

Fix this issue by correcting boolean logic for detecting if backdrop is
enabled and using that logic to determine when to trap focus. Add an
example that injects ConfigurableFocusTrapFactory.

Fix #26572
stephenrca pushed a commit to stephenrca/components that referenced this issue Aug 2, 2023
@zarend @stephenrca
fix(material/sidenav): only trap focus when backdrop is enabled (angu…
f54b6bb 
…lar#27355)

Correct when Sidenav enabled focus trapping. When backdrop is show, trap
focus. Do no trap focus when backdrop is not shown.

Existing behavior is that Sidenav traps focus whenever it is not in side
mode. This causes the end user to not be able to interact with the
sidenav content when the mode is push/over, backdrop is disabled and
using ConfigurableFocusTrapFactory (angular#26572).

With this commit applied, Sidenav always traps focus when backdrop is
shown. Sidenav never traps focus when backdrop is not shown, regardless
of what mode the sidenav is in, focus trapping will respect if the
backdrop is shown or not shown.

Fix this issue by correcting boolean logic for detecting if backdrop is
enabled and using that logic to determine when to trap focus. Add an
example that injects ConfigurableFocusTrapFactory.

Fix angular#26572
@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 Aug 6, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Accessibility This issue is related to accessibility (a11y) area: material/sidenav P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/sidenav): only trap focus when backdrop is enabled zarend/components
2 participants
@zarend @avishome