From 1f6dd0e3e280e49c22e34df2e9cd85884c349981 Mon Sep 17 00:00:00 2001 From: Maribeth Moffatt Date: Tue, 4 Nov 2025 13:44:34 -0800 Subject: [PATCH] fix: make the aria live region assertive (#9436) --- core/inject.ts | 2 +- core/utils/aria.ts | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/core/inject.ts b/core/inject.ts index 3df73c412..f5f04b5c3 100644 --- a/core/inject.ts +++ b/core/inject.ts @@ -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; diff --git a/core/utils/aria.ts b/core/utils/aria.ts index c099d10c7..84d4e2312 100644 --- a/core/utils/aria.ts +++ b/core/utils/aria.ts @@ -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');