Skip to content

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

@sierks

Description

@sierks

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs triageThis issue needs to be triaged by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions