mirror of
https://github.com/google/blockly.git
synced 2026-01-05 08:00:09 +01:00
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.
This commit is contained in:
@@ -226,6 +226,11 @@ export class Toolbox
|
||||
contentsContainer.style.flexDirection = 'row';
|
||||
}
|
||||
aria.setRole(contentsContainer, aria.Role.TREE);
|
||||
aria.setState(
|
||||
contentsContainer,
|
||||
aria.State.LABEL,
|
||||
Msg['TOOLBOX_ARIA_LABEL'],
|
||||
);
|
||||
return contentsContainer;
|
||||
}
|
||||
|
||||
|
||||
@@ -806,6 +806,7 @@ export class WorkspaceSvg
|
||||
if (this.isFlyout) {
|
||||
// Use the block canvas as the primary tree parent for flyout blocks.
|
||||
aria.setRole(this.svgBlockCanvas_, aria.Role.TREE);
|
||||
aria.setState(this.svgBlockCanvas_, aria.State.LABEL, ariaLabel);
|
||||
} else {
|
||||
browserEvents.conditionalBind(
|
||||
this.svgGroup_,
|
||||
|
||||
Reference in New Issue
Block a user