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:
Ben Henning
2025-12-03 15:11:53 -08:00
committed by GitHub
parent bbe6cc9b0e
commit 74e81ceb86
2 changed files with 6 additions and 0 deletions

View File

@@ -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;
}

View File

@@ -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_,