Skip to content

[a11y][D7] Portaled dropdown menu escapes the aria-modal dialog #51

Description

@BrianGenisio

Finding

D7 — The portaled menu escapes the aria-modal dialog
Severity: serious
WCAG: 1.3.1 Info and Relationships, 4.1.2 Name Role Value
Theme: both

Where

public/portal-dropdown.js — menu relocated to document.body when open

Current behavior

PortalDropdown solves clipping by moving the open menu to document.body. The menu is then no longer a descendant of the settings dialog.

Verified: thinking menu portaled: true; menu inside dialog: false.

Because the modal sets aria-modal="true", conforming screen readers hide everything outside the dialog subtree — so the Thinking menu a sighted user sees is missing for a screen reader user.

Expected behavior

The open menu remains programmatically associated with (or inside) the dialog so assistive technology can reach it while the modal is open.

How this was verified

Live check that the thinking menu node is under document.body and not contained by the dialog while open.

Suggested approach

Two viable options (spike before committing):

  1. Tactical: add aria-owns on the toggle pointing at the portaled menu. Small, keeps existing portal machinery.
  2. Structural: replace the portal with the native popover attribute / top layer, which solves clipping without leaving the dialog subtree — and may let public/portal-dropdown.js be deleted.

Worth a short spike; the structural path is larger but removes a 178-line workaround.

Depends on / benefits from D1 (modal focus trap) and D2–D4 (dropdown keyboard/ARIA) landing cleanly.

Acceptance criteria

  • Open Thinking menu is reachable to assistive technology while settings modal is open
  • Keyboard users can operate the menu without leaving the modal context incorrectly
  • Verified in both light and dark mode
  • axe reports no new violations
  • VoiceOver (or equivalent) pass described in the PR if the approach touches ownership/live tree

Reference

a11y-audits/8-5-26/audit.md → finding D7
a11y-audits/8-5-26/resolution-plan.md → Wave 2 (spike aria-owns vs popover)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions