components icon indicating copy to clipboard operation
components copied to clipboard

bug(mat-sidenav): focus trap should be optional with mode over

Open sierks opened this issue 1 year ago • 0 comments
trafficstars

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

No response

Description

When Sidenav is open in over or push (not side) keyboard focus is trapped onto the sidenav. But the sidenav may just be a part of the page, not the whole thing. So the keyboard is stuck on the sidenav without an option to break it free (outside of toggling the sidenav closed).

I was told this is an a11y issue by someone at the OCR.

This seems similar to 21955 and 13132.

Reproduction

StackBlitz link: https://stackblitz.com/edit/kjwmhm

Steps to reproduce:

  1. Select over or push
  2. Toggle Sidenav open
  3. Use tab to change focus, noting it is trapped to the open Sidenav
  4. Select side
  5. Use tab to change focus, noting it is not trapped to the open Sidenav and now cycles through all the controls, including the stackblitz controls

My stackblitz is just an unchanged fork of "Sidenav with configurable mode" on the material website, https://material.angular.io/components/sidenav/overview#sidenav-mode

Expected Behavior

For an open sidenav in 'side' mode, focus should (optionally?) not be trapped.

Actual Behavior

The sidenav is trapping focus.

Environment

  • Angular: at least 13.3, including 18.2
  • Browser(s): at least Chrome, Edge, & Firefox

sierks avatar Aug 23 '24 14:08 sierks