Skip to content

feat: add reusable announceToScreenReader helper and refactor block.js (#6608)#7764

Merged
walterbender merged 1 commit into
sugarlabs:masterfrom
abhnish:feat/aria-live-helper
Jul 9, 2026
Merged

feat: add reusable announceToScreenReader helper and refactor block.js (#6608)#7764
walterbender merged 1 commit into
sugarlabs:masterfrom
abhnish:feat/aria-live-helper

Conversation

@abhnish

@abhnish abhnish commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

Description

Extracts the aria-live region creation logic into a reusable announceToScreenReader helper function in js/utils/utils.js. Refactors the drag announcement in js/block.js to use this new helper instead of an inline IIFE.

This centralizes screen reader announcements, avoiding duplicate DOM creation logic and making it easier to trigger silent assistive announcements across the rest of the codebase.

Related Issue

Part of #6608

Category

  • Feature
  • Refactoring

Type of Change

  • Accessibility Enhancement
  • Code Quality

Testing Performed

  1. Opened the app locally at localhost:3000, enabled VoiceOver on macOS.
  2. Dragged a block — "picked up [block name]" was announced by screen reader.
  3. Confirmed no visual message appears — aria-live region only.
  4. Confirmed mbA11yLiveRegion is correctly lazy-loaded into the DOM on the first call and reused for subsequent announcements.
  5. npx prettier --check js/block.js js/utils/utils.js — clean.

PR Checklist

  • I have tested these changes locally
  • My changes generate no new warnings or console errors
  • I have checked for and resolved any merge conflicts

@abhnish abhnish requested a review from walterbender as a code owner July 8, 2026 13:47
@github-actions github-actions Bot added feature Adds new functionality size/S Small: 10-49 lines changed area/javascript Changes to JS source files labels Jul 8, 2026
@abhnish abhnish force-pushed the feat/aria-live-helper branch from 5b5c1fc to 1b49d67 Compare July 8, 2026 13:56
@abhnish

abhnish commented Jul 8, 2026

Copy link
Copy Markdown
Contributor Author

@walterbender , the code for the aria-live helper and block.js refactor is ready. Note: The CI is currently failing on pitchstaircase.test.js and musickeyboard.test.js, but I verified this PR does not touch those files. It appears those tests are currently failing on master.

@walterbender walterbender merged commit 031c1d3 into sugarlabs:master Jul 9, 2026
10 of 11 checks passed
@walterbender

Copy link
Copy Markdown
Member

Are there any other places we should be using this utility?

rakshityadav1868 pushed a commit to rakshityadav1868/musicblocks that referenced this pull request Jul 9, 2026
@abhnish

abhnish commented Jul 9, 2026

Copy link
Copy Markdown
Contributor Author

@walterbender Yep, A few spots still need it:
activity.js: ensureA11yLiveRegion and the textMsg/errorMsg hooks (from PR #7674) are duplicating this pattern, blocks.js: the trash announcement in PR #7753 (still pending) still has that old inline IIFE.
Going forward, any new announcements (like widgets opening/closing or blocks snapping) will just use this helper directly.

will clean up activity.js and update blocks.js in a quick follow-up once #7753 merges!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/javascript Changes to JS source files feature Adds new functionality size/S Small: 10-49 lines changed

Projects

Development

Successfully merging this pull request may close these issues.

2 participants