Skip to content

Commit bbe6cc9

Browse files
authored
fix: Improve ARIA region handling. (#9485)
## The basics - [x] I [validated my changes](https://developers.google.com/blockly/guides/contribute/core#making_and_verifying_a_change) ## The details ### Resolves Fixes #9451 ### Proposed Changes Removes the ARIA `region` role for both flyouts and workspaces that are within mutators. ### Reason for Changes The use of the `region` role only adds confusion and slightly messes up region announcements for screen readers. `generic` has been used instead since it's the default container role (e.g. for `div`) and seems sufficient for what needs to be described in this case. Note that the delayed initialization for the flyout role is due to flyout initialization happening a bit later than its workspace DOM creation (so it doesn't seem possible to check for mutator status yet). There might be ways of doing this a bit more cleanly as part of #9307. ### Test Coverage No automated tests are needed for this experimental change. Manual testing comprised of navigating between the main workspace, the main workspace's toolbox and flyout, and a mutator workspace and flyout to validate that no unusual region readouts were happening. The accessibility node tree was also analyzed to verify that `generic` is correctly being applied as the role for the mutator workspace and flyout. ### Documentation No new documentation is needed for this experimental change. ### Additional Information This doesn't fully resolve all region issues, but it resolves the main ones (especially when combined with #9483 for NVDA). The main remaining problem at this point is that the main workspace itself is usually not read out as a region and it's not clear why. I suspect it has something to do with focus manager and how it automatically moves focus, but I'm not entirely sure what specific mechanism is causing the problem since both toolbox and flyout do something similar and don't have the same issue (flyout is particularly noteworthy since it's a workspace in itself). There may be some other focus oddities happening to cause the difference but, for now, this seems reasonable. If testing or user feedback find that the lack of consistent region readout is problematic for the main workspace then a new issue can be opened and investigated separately.
1 parent 017a4ce commit bbe6cc9

File tree

3 files changed

+10
-1
lines changed

3 files changed

+10
-1
lines changed

core/flyout_base.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,9 @@ export abstract class Flyout
338338
init(targetWorkspace: WorkspaceSvg) {
339339
this.targetWorkspace = targetWorkspace;
340340
this.workspace_.targetWorkspace = targetWorkspace;
341+
if (this.targetWorkspace.isMutator) {
342+
aria.setRole(this.workspace_.getFocusableElement(), aria.Role.GENERIC);
343+
}
341344

342345
this.workspace_.scrollbar = new ScrollbarPair(
343346
this.workspace_,

core/utils/aria.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export enum Role {
5454
COMBOBOX = 'combobox',
5555
SPINBUTTON = 'spinbutton',
5656
REGION = 'region',
57+
GENERIC = 'generic',
5758
}
5859

5960
/**

core/workspace_svg.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -762,14 +762,19 @@ export class WorkspaceSvg
762762
});
763763

764764
let ariaLabel = null;
765+
let role: aria.Role | null = null;
765766
if (this.isFlyout) {
766767
ariaLabel = 'Flyout';
768+
// Default to region, but this may change during flyout initialization.
769+
role = aria.Role.REGION;
767770
} else if (this.isMutator) {
768771
ariaLabel = 'Mutator Workspace';
772+
role = aria.Role.GENERIC;
769773
} else {
770774
ariaLabel = Msg['WORKSPACE_ARIA_LABEL'];
775+
role = aria.Role.REGION;
771776
}
772-
aria.setRole(this.svgGroup_, aria.Role.REGION);
777+
aria.setRole(this.svgGroup_, role);
773778
aria.setState(this.svgGroup_, aria.State.LABEL, ariaLabel);
774779

775780
// Note that a <g> alone does not receive mouse events--it must have a

0 commit comments

Comments
 (0)