feat: Mark content outside of popovers inert #145
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Improve accessibility by hiding content outside of the modals from screen readers.
Opening a nested settings--e.g., Text color--presents a popover and moves focus to the new popover. In that case, we do not want to dismiss the block inspector housing the button that opened the popover.
Buttons rendered within popovers reside in the root body element, thus we need to hoist this global style override higher.
dcalhoun
commented
May 30, 2025
| 'is-quick': isQuick | ||
| }), | ||
| popoverProps: { | ||
| + ...this.props.popoverProps, |
There was a problem hiding this comment.
Patch to allow improving screen reader accessibility through marking the block inserter as a dialog.
Comment on lines
+14
to
+17
| <div | ||
| id="popover-fallback-container" | ||
| class="components-popover__fallback-container" | ||
| ></div> |
There was a problem hiding this comment.
Manually place a "fallback" popover element in the root so that we may query it via its id attribute.
Comment on lines
+26
to
+28
| .components-button { | ||
| font-size: $baseline-interactive-font-size; | ||
| } |
There was a problem hiding this comment.
Hoist these existing styles to ensure they are applied to buttons within popovers that now render in the root body element.
Comment on lines
+53
to
+54
| useModalize( isInserterOpened ); | ||
| useModalize( isBlockInspectorShown ); |
There was a problem hiding this comment.
Mark content outside of the block inserter and block inspector as inert, so that screen readers cannot read the content aloud when visually obscured by a modal.
Allow setting popover props for the `Inserter` component, so we can improve the mobile screen reader experience by marking it as a modal dialog.
nbradbury
approved these changes
May 30, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Mark content outside of the block inserter and block inspector inert.
Why?
Close #86. Close CMM-192. Without this, screen readers unexpectedly navigate content that is visually
hidden by the modal popovers.
How?
For the block inserter and block inspector:
Testing Instructions
Tip
Test using the WP-iOS prototype build.
1: Content outside of popover is inert 1
dialog—e.g., block canvas content.
2: Dismiss dialogs with iOS' two-finger scrub
Accessibility Testing Instructions
Listed in testing instructions.
Screenshots or screencast
N/A, no visual changes.
Footnotes
This also applies to Android TalkBack, but testing Android with these steps is not possible due to an existing bug: https://github.com/WordPress/gutenberg/issues/70277. ↩