Issue #3577228: Fix toolbar tray focus jumping for screen reader users

Yahya Abdikadirrequested to merge
issue/drupal-3577228:3577228-toolbar-tray-focus-jumping into 11.x

Problem

When a toolbar tray is open (e.g. Shortcuts or Administration), VoiceOver users experience focus jumping to tray elements when tapping on page content. This happens because toolbar trays use position: fixed and remain in the accessibility tree, causing VoiceOver spatial hit-testing to land on them instead of the intended content.

Solution

Use the inert attribute to block closed and visually-open trays from assistive technology and interaction:

  • All trays get inert = true at initialization
  • When a tray opens visually, it stays inert (blocked from AT and clicks)
  • Tab from the toolbar trigger enters the tray (inert = false), giving keyboard/AT users explicit access
  • Focus leaving the tray restores inert = true
  • Escape closes the tray and returns focus to the trigger

Changes in latest commit

Based on code review feedback from Curtis Wilcox:

  • Removed redundant aria-hidden attributes (the inert attribute already implies ariaHidden)
  • Changed .setAttribute("inert", "") / .removeAttribute("inert") to .inert = true / .inert = false (property syntax)

Testing

Tested with VoiceOver (macOS/iOS), JAWS, and NVDA.

Merge request reports