Elements in closed sidebar are focusable

Created on 18 August 2025, 6 days ago

Problem/Motivation

On the "mobile" version, when the sidebar is closed, the elements within the sidebar are still focusable and in the tab ring.

Tabbing into the sidebar causes the focus to disappear.

The submenu toggle buttons can be activated, but the submenus are hidden.

WCAG success criteria

Related technique

Steps to reproduce

  1. Enable the Navigation module.
  2. Log in as admin.
  3. Reduce the window width so that the "mobile" sidebar is active.
  4. Ensure that the sidebar is closed ("Expand sidebar" button is visible).
  5. Start tabbing from the top of the page before the "Expand sidebar" button, and continue past the "Expand sidebar" button.

After reaching the "Expand sidebar" button, focus moves to the next visible focusable item on the page.

Focus disappears as it moves into the closed sidebar.

Proposed resolution

When the sidebar is closed, completely hide it with visibility: hidden or display: none.

The attached videos demonstrate before / after with visibility: hidden.

VoiceOver is used in the videos only to make the focus location more apparent. This proposal will also hide the items from screen readers, which may not be desirable. I added Needs accessibility review for confirmation regarding desired screen reader behavior.

Remaining tasks

User interface changes

The focus will stay on visible elements.

Introduced terminology

API changes

Data model changes

Release notes snippet

πŸ› Bug report
Status

Active

Version

11.0 πŸ”₯

Component

navigation.module

Created by

πŸ‡ΊπŸ‡ΈUnited States kentr Durango, CO

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Needs accessibility review

    Used to alert the accessibility topic maintainer(s) that an issue significantly affects (or has the potential to affect) the accessibility of Drupal, and their signoff is needed (see the governance policy draft for more information). Useful links: Drupal's accessibility standards, the Drupal Core accessibility gate.

Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024