Skip to content

Commit 74e81ce

Browse files
authored
feat: Add labels for Toolbox and Flyout. (#9483)
## The basics - [x] I [validated my changes](https://developers.google.com/blockly/guides/contribute/core#making_and_verifying_a_change) ## The details ### Resolves Fixes #9464 ### Proposed Changes Adds ARIA labels for `Toolbox` and `Flyout` ('s `Workspace`) containers to complement their existing region labels. ### Reason for Changes In some cases certain screen readers (like NVDA) don't read out region labels. Previously, only the region labels provided context for currently being within the toolbox or flyout, so adding additional labels on the ARIA `tree` containers themselves ensures that these contexts are always read if the tree's context is read. This adds redundancy with the region output if both are read, but ChromeVox at least adds some delay between finishing the tree's context and beginning the region's context and this seems to mesh well together. The fully read context now feels like: "here's an item, it's the toolbox tree, and that tree is within the toolbox region." Even though both regions only contain a single tree it doesn't feel dimorphic. ### Test Coverage No new automated tests are needed for this experimental change. This has been manually tested with ChromeVox to demonstrate the dual tree + region output for both toolbox and flyout: [Screen recording 2025-11-26 2.52.22 PM.webm](https://github.com/user-attachments/assets/aa43ae81-9da6-4c79-b0fc-120146892aae) ### Documentation No new documentation is needed for this experimental change. ### Additional Information This was only tested on ChromeVox.
1 parent bbe6cc9 commit 74e81ce

File tree

2 files changed

+6
-0
lines changed

2 files changed

+6
-0
lines changed

core/toolbox/toolbox.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,11 @@ export class Toolbox
226226
contentsContainer.style.flexDirection = 'row';
227227
}
228228
aria.setRole(contentsContainer, aria.Role.TREE);
229+
aria.setState(
230+
contentsContainer,
231+
aria.State.LABEL,
232+
Msg['TOOLBOX_ARIA_LABEL'],
233+
);
229234
return contentsContainer;
230235
}
231236

core/workspace_svg.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -806,6 +806,7 @@ export class WorkspaceSvg
806806
if (this.isFlyout) {
807807
// Use the block canvas as the primary tree parent for flyout blocks.
808808
aria.setRole(this.svgBlockCanvas_, aria.Role.TREE);
809+
aria.setState(this.svgBlockCanvas_, aria.State.LABEL, ariaLabel);
809810
} else {
810811
browserEvents.conditionalBind(
811812
this.svgGroup_,

0 commit comments

Comments
 (0)