Skip to content

fix(cdk/a11y): live announcer not working with aria-modal element #25978

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 16, 2022

Conversation

crisbeto
Copy link
Member

When an aria-modal="true" element is present, some browsers exclude all the content outside of them from the a11y tree which breaks the LiveAnnouncer.

These changes add some logic to set an aria-owns on the modals so that the announcement is made.

Fixes #22733.

@crisbeto crisbeto added P2 The issue is important to a large percentage of users, with a workaround Accessibility This issue is related to accessibility (a11y) target: patch This PR is targeted for the next patch release labels Nov 15, 2022
Copy link
Member

@devversion devversion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Makes sense. Could potentially leave a comment, but I think the PR is also sufficient.

When an `aria-modal="true"` element is present, some browsers exclude all the content outside of them from the a11y tree which breaks the `LiveAnnouncer`.

These changes add some logic to set an `aria-owns` on the modals so that the announcement is made.

Fixes angular#22733.
@crisbeto crisbeto force-pushed the 22733/live-announcer-aria-modal branch from ad07ea2 to a615ae5 Compare November 15, 2022 17:55
@crisbeto crisbeto added the action: merge The PR is ready for merge by the caretaker label Nov 15, 2022
Copy link
Contributor

@zarend zarend left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, nice fix

@crisbeto crisbeto merged commit a1357a4 into angular:main Nov 16, 2022
crisbeto added a commit that referenced this pull request Nov 16, 2022
…5978)

When an `aria-modal="true"` element is present, some browsers exclude all the content outside of them from the a11y tree which breaks the `LiveAnnouncer`.

These changes add some logic to set an `aria-owns` on the modals so that the announcement is made.

Fixes #22733.

(cherry picked from commit a1357a4)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 17, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Accessibility This issue is related to accessibility (a11y) action: merge The PR is ready for merge by the caretaker P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

LiveAnnouncer does not work when made inside a mat-dialog
4 participants