Skip to content

feat: aria live region for announcements#9653

Merged
mikeharv merged 6 commits intoRaspberryPiFoundation:v13from
mikeharv:aria-live-region
Apr 1, 2026
Merged

feat: aria live region for announcements#9653
mikeharv merged 6 commits intoRaspberryPiFoundation:v13from
mikeharv:aria-live-region

Conversation

@mikeharv
Copy link
Copy Markdown
Contributor

@mikeharv mikeharv commented Mar 26, 2026

This adds an aria live region for announcing updates on Blockly. This was partially backported out of the screen-reader branch.

The basics

API verified by testing announcement of toast changes via uncommitted code.

The details

Resolves #9632

Fixes

Proposed Changes

During inject(), we will create a displayed-but-user-invisible <div/> with id blocklyAriaAnnounce which is configured as an aria live region with passive priority. Other parts of Blockly will be able to call announceDynamicAriaState with text to add to this region to be read by assistive technologies. An asynchronous timeout is used to manage replacing outdated pending announcements with the latest update.

Reason for Changes

This will give us a centralized place to announce dynamic state changes and information that cannot otherwise be conveyed.

Test Coverage

Added ARIA live region tests covering initialization, accessibility attributes, delayed announcements, repeated message handling, last-write-wins behavior, and delayed updates to role and assertiveness to prevent regressions.

Documentation

N/A

Additional Information

@mikeharv mikeharv requested a review from a team as a code owner March 26, 2026 19:46
@mikeharv mikeharv requested a review from BenHenning March 26, 2026 19:46
@github-actions github-actions bot added the PR: feature Adds a feature label Mar 26, 2026
Copy link
Copy Markdown
Collaborator

@BenHenning BenHenning left a comment

Choose a reason for hiding this comment

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

Thanks @mikeharv! Had some initial thoughts--PTAL.

Separately for testing, I think it would still be a good idea, if possible, to try and add at least some fundamental tests for the new announcement behavior. Some things which are hopefully testable and could be quite valuable to avoid downstream issues:

  • The live region is polite.
  • The live region is displayed (i.e. not display: none since this will then be ignored by screen readers).
  • That subsequent announcements even with the same text are unique from the last (e.g. due to the additional non-spoken character being toggled).
  • The general behavior of the region correctly announcing.

It would also be helpful to test that the region updates its role and value after a delay but I'm not sure how easy that one is to check. This directly fixes a somewhat tricky-to-debug issue that micro:bit found and fixed, so a regression test for it is definitely a nice-to-have (and not something I think we can assume works correctly just from other tested functionality that eventually uses dynamic announcements).

Comment thread packages/blockly/core/inject.ts Outdated
Comment thread packages/blockly/core/utils/aria.ts
@BenHenning BenHenning assigned mikeharv and unassigned BenHenning Mar 26, 2026
@mikeharv mikeharv requested a review from BenHenning March 27, 2026 16:47
@github-actions github-actions bot added PR: feature Adds a feature and removed PR: feature Adds a feature labels Mar 27, 2026
Copy link
Copy Markdown
Collaborator

@BenHenning BenHenning left a comment

Choose a reason for hiding this comment

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

Thanks @mikeharv! Great tests and changes overall! I had a few suggestions, PTAL.

Comment thread packages/blockly/core/utils/aria.ts Outdated
Comment thread packages/blockly/tests/mocha/index.html Outdated
Comment thread packages/blockly/core/utils/aria.ts
Comment thread packages/blockly/core/utils/aria.ts
Comment thread packages/blockly/core/utils/aria.ts Outdated
Comment thread packages/blockly/tests/mocha/aria_test.js
Comment thread packages/blockly/tests/mocha/aria_live_region_test.js Outdated
@BenHenning BenHenning removed their assignment Mar 30, 2026
Copy link
Copy Markdown
Collaborator

@BenHenning BenHenning left a comment

Choose a reason for hiding this comment

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

Thanks @mikeharv! Generally happy with this, just had one follow-up. Going ahead and approving to unblock you but feel free to assign back to me if you want me to look at any follow-up changes.

Comment thread packages/blockly/core/utils/aria.ts Outdated
* @param element DOM node to set role of.
* @param roleName Role name.
*/
export function setRole(element: Element, roleName: Role | null) {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

This part actually seems correct and worth keeping (and also worth updating the JSDoc for the function). We do want an ability to clear the role, we just don't need to do it as part of the status stuff below.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Thanks Ben! I re-added the ability to clear the role, along with a direct removeRole function, similar to Closure (https://google.github.io/closure-library/api/goog.a11y.aria.html)

Comment thread packages/blockly/core/utils/aria.ts
Comment thread packages/blockly/tests/mocha/aria_test.js
Comment thread packages/blockly/tests/mocha/aria_live_region_test.js Outdated
@BenHenning BenHenning removed their assignment Apr 1, 2026
@mikeharv mikeharv merged commit 3fb96e4 into RaspberryPiFoundation:v13 Apr 1, 2026
4 of 5 checks passed
@mikeharv mikeharv deleted the aria-live-region branch April 1, 2026 14:33
@mikeharv mikeharv mentioned this pull request Apr 1, 2026
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: feature Adds a feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants