CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-23 00:30:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: Improve representation of FlyoutButtons in screenreaders. (#9356)

Browse Source 
* fix: Improve representation of `FlyoutButtons` in screenreaders.

* fix: Remove aria-selected.
This commit is contained in:
Aaron Dodson
2025-09-10 11:44:08 -07:00
committed by GitHub
parent 41b7e9399e
commit d349a0c0b0
1 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/flyout_button.ts
View File

@@ -114,12 +114,17 @@ export class FlyoutButton
this.id = idGenerator.getNextUniqueId();
this.svgGroup = dom.createSvgElement(
Svg.G,
{'id': this.id, 'class': cssClass},
{'id': this.id, 'class': cssClass, 'tabindex': '-1'},
this.workspace.getCanvas(),
);
aria.setRole(this.svgGroup, aria.Role.BUTTON);
aria.setState(this.svgGroup, aria.State.LABEL, 'Button');
// Set the accessibility role. All child nodes will be set to `presentation`
// to avoid extraneous "group" narration on VoiceOver.
if (this.isFlyoutLabel) {
aria.setRole(this.svgGroup, aria.Role.TREEITEM);
} else {
aria.setRole(this.svgGroup, aria.Role.BUTTON);
}
let shadow;
if (!this.isFlyoutLabel) {
@@ -135,6 +140,7 @@ export class FlyoutButton
},
this.svgGroup!,
);
aria.setRole(shadow, aria.Role.PRESENTATION);
}
// Background rectangle.
const rect = dom.createSvgElement(
@@ -148,6 +154,7 @@ export class FlyoutButton
},
this.svgGroup!,
);
aria.setRole(rect, aria.Role.PRESENTATION);
const svgText = dom.createSvgElement(
Svg.TEXT,
@@ -159,6 +166,9 @@ export class FlyoutButton
},
this.svgGroup!,
);
if (!this.isFlyoutLabel) {
aria.setRole(svgText, aria.Role.PRESENTATION);
}
let text = parsing.replaceMessageReferences(this.text);
if (this.workspace.RTL) {
// Force text to be RTL by adding an RLM.