fix(ui5-popup): announce invisible messages inside open popups - #13889
Open
ivoplashkov wants to merge 8 commits into
Open
fix(ui5-popup): announce invisible messages inside open popups#13889ivoplashkov wants to merge 8 commits into
ivoplashkov wants to merge 8 commits into
Conversation
Screen readers scope their accessibility tree to a modal popup's subtree while it is open, so announcements written to the default body-level aria-live region are not read out. InvisibleMessage now supports registering per-container aria-live regions. Popup registers its root as a region on open and deregisters it on close, so announce() routes messages into the open popup and they are heard. Fixes #13613
ivoplashkov
had a problem deploying
to
netlify-preview
August 4, 2026 05:42 — with 
GitHub Actions
Failure
GitHub Actions
Failure
ivoplashkov
had a problem deploying
to
netlify-preview
August 4, 2026 05:45 — with
GitHub Actions
Failure
GitHub Actions
Failure
The test page used absolute cross-package src paths (/packages/base/src/...ts) which Rollup could not resolve during the production/test bundle, breaking the build. Use the window["sap-ui-webcomponents-bundle"] global (as other test pages do) to access announce(), passing the mode as a plain string.
ivoplashkov
temporarily deployed
to
netlify-preview
August 4, 2026 06:02 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
|
🚀 Deployed on https://pr-13889--ui5-webcomponents-preview.netlify.app |
Registering a per-popup aria-live region for every popup rerouted announcements away from the default body-level region even for non-modal popovers (e.g. ComboBox suggestion lists), breaking their existing announcements. Only modal popups need their own region, since a screen reader scopes its accessibility tree to a modal popup's subtree. Gate registration on isModal so non-modal popovers keep using the default region.
ivoplashkov
temporarily deployed
to
netlify-preview
August 4, 2026 06:28 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
Contributor
|
Please check how the aria-notify polyfil is implemented. Seems like exactly the things we need: https://github.com/github/arianotify-polyfill/blob/main/arianotify-polyfill.js |
Contributor
Author
Already did, however this is not yet fully available on all browsers and the support is limited. I have also discussed this with the central accessibility team and the overall assumption is that it's still early to adopt. Other than that, this is definitelly the thing we need to solve this case and we should adopt it in future. |
GerganaKremenska
requested changes
Aug 10, 2026
The native <dialog> example called announce() without registering the dialog as an aria-live region, so announcements were silenced under the modal a11y scoping. Expose registerInvisibleMessageRegion and deregisterInvisibleMessageRegion on the test bundle and call them on the native dialog's open/close so announce() routes into the dialog subtree.
Register the in-popup aria-live region only for modal popups. A screen reader scopes its accessibility tree to a genuinely modal popup (focus trap / backdrop), which silences the body-level region; non-modal popups such as the ComboBox dropdown do not cause this scoping, so their announcements are still heard from the default body-level region and must not be routed into the popup subtree. Add native <dialog>, native popover, and native popover + aria-modal comparison cases to the InvisibleMessageInDialog test page to demonstrate that modal scoping (not the bare aria-modal attribute) is what silences the body-level region.
ndeshev
reviewed
Aug 11, 2026
|
|
||
| this._deregisterResizeHandler(); | ||
| this._detachBrowserEvents(); | ||
| this._deregisterInvisibleMessageRegion(); |
Contributor
There was a problem hiding this comment.
You register it on open and deregister on close, why is this not in the if statement above?
ndeshev
reviewed
Aug 11, 2026
| </div> | ||
|
|
||
| <h1 style="margin-top: 2rem;">Comparison: native popover (top layer) WITH aria-modal="true"</h1> | ||
| <p class="note"> |
Contributor
There was a problem hiding this comment.
Just a note - JAWS announces the body spans of all popover examples, the only issue is with the native dialog's showModal() behavior
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
Screen readers scope their accessibility tree to a modal popup's subtree while it is open, so announcements written to the default body-level aria-live region are not read out.
InvisibleMessage now supports registering per-container aria-live regions. Popup registers its root as a region on open and deregisters it on close, so announce() routes messages into the open popup and they are heard.
Fixes #13613