Skip to content

Modal: use inert instead of aria-hidden for non-modal isolation - #79969

Closed
ramonjd wants to merge 3 commits into
trunkfrom
fix/modal-inert-isolation
Closed

Modal: use inert instead of aria-hidden for non-modal isolation#79969
ramonjd wants to merge 3 commits into
trunkfrom
fix/modal-inert-isolation

Conversation

@ramonjd

@ramonjd ramonjd commented Jul 7, 2026

Copy link
Copy Markdown
Member

What? How?

This is a bit of a YOLO PR.

Context: this was flagged during an accessibility review of the media editor modal, but the modalize() helper is shared by every Modal in Gutenberg, so the change is split out here for broader review.

Switches the Modal component's background isolation from aria-hidden to the inert attribute.

Why

aria-hidden removes elements from the accessibility tree but leaves them keyboard-accessible — users can still Tab into content behind the modal. inert does both: hidden from assistive technology and unreachable via keyboard navigation.

The inert attribute has been baseline across all browsers since 2023.

Test plan

  1. Open any modal in the editor (e.g. media editor, preferences, keyboard shortcuts)
  2. With the modal open, try Tab/Shift+Tab. Focus should not reach content behind the modal
  3. Close the modal. Background content should be fully interactive again
  4. Open a nested modal (e.g. media editor > keyboard shortcuts). Outer modal becomes inert, inner modal close restores it
  5. Test with VoiceOver/NVDA. Background content should not be announced while modal is open
Before After
Screenshot 2026-07-08 at 12 25 27 pm Screenshot 2026-07-08 at 12 20 55 pm

@github-actions github-actions Bot added the [Package] Components /packages/components label Jul 7, 2026
@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown

Size Change: -8 B (0%)

Total Size: 7.67 MB

📦 View Changed
Filename Size Change
build/scripts/components/index.min.js 270 kB -8 B (0%)

compressed-size-action

aria-hidden removes elements from the accessibility tree but leaves
them keyboard-accessible. inert does both — hidden from assistive
technology and unreachable via Tab/keyboard navigation.
@ramonjd
ramonjd force-pushed the fix/modal-inert-isolation branch from 3c08b1b to 2dc97be Compare July 8, 2026 01:51
@ramonjd ramonjd self-assigned this Jul 8, 2026
@ramonjd ramonjd added the [Type] Enhancement A suggestion for improvement. label Jul 8, 2026
@ramonjd
ramonjd requested a review from joedolson July 8, 2026 02:16
@ramonjd

ramonjd commented Jul 8, 2026

Copy link
Copy Markdown
Member Author

I think some of the e2e fails are related. not sure. i won't have much time to look at this PR before 7.1.

@ramonjd ramonjd closed this Jul 15, 2026
@ramonjd
ramonjd deleted the fix/modal-inert-isolation branch July 15, 2026 04:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Components /packages/components [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant