CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-10 02:17:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: make the aria live region assertive (#9436)

Browse Source
This commit is contained in:
Maribeth Moffatt
2025-11-04 13:44:34 -08:00
committed by GitHub
parent 7e77b10706
commit 1f6dd0e3e2
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/inject.ts
View File

@@ -86,7 +86,7 @@ export function inject(
const ariaAnnouncementSpan = document.createElement('span');
ariaAnnouncementSpan.id = 'blocklyAriaAnnounce';
dom.addClass(ariaAnnouncementSpan, 'hiddenForAria');
aria.setState(ariaAnnouncementSpan, aria.State.LIVE, 'polite');
aria.setState(ariaAnnouncementSpan, aria.State.LIVE, 'assertive');
subContainer.appendChild(ariaAnnouncementSpan);
return workspace;

14
core/utils/aria.ts
View File

@@ -202,20 +202,20 @@ export function getState(element: Element, stateName: State): string | null {
}
/**
* Softly requests that the specified text be read to the user if a screen
* Assertively requests that the specified text be read to the user if a screen
* reader is currently active.
*
* This relies on a centrally managed ARIA live region that should not interrupt
* existing announcements (that is, this is what's considered a polite
* announcement).
* This relies on a centrally managed ARIA live region that is hidden from the
* visual DOM. This live region is assertive, meaning it will interrupt other
* text being read.
*
* Callers should use this judiciously. It's often considered bad practice to
* over announce information that can be inferred from other sources on the
* page, so this ought to only be used when certain context cannot be easily
* over-announce information that can be inferred from other sources on the
* page, so this ought to be used only when certain context cannot be easily
* determined (such as dynamic states that may not have perfect ARIA
* representations or indications).
*
* @param text The text to politely read to the user.
* @param text The text to read to the user.
*/
export function announceDynamicAriaState(text: string) {
const ariaAnnouncementSpan = document.getElementById('blocklyAriaAnnounce');