Skip to content

Improve screen reader behaviour for area overlay#11152

Merged
riknoll merged 2 commits intomicrosoft:masterfrom
microbit-robert:area-menu-screen-reader
Mar 4, 2026
Merged

Improve screen reader behaviour for area overlay#11152
riknoll merged 2 commits intomicrosoft:masterfrom
microbit-robert:area-menu-screen-reader

Conversation

@microbit-robert
Copy link
Contributor

The current area overlay menu is keyboard accessible but the screen reader experience is not so good. This PR makes the following changes to improve the screen reader experience:

  • Add roles of menu and menuitem
  • Add aria-label for menu
  • Add arrow navigation and focus the first menu item by default
  • Align the area overlay menu item names with the accessibility documentation

Add role of menu and menuitem.
Add aria-label for menu.
Add arrow navigation and focus the first menu item by default.
Align area overlay menu item names with accessibility docs.
id: "editor",
ariaLabel: lf("Editor"),
id: "workspace",
ariaLabel: lf("Workspace"),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this only be "Workspace" for the Blocks case, and "Editor" for the JavaScript/Python case?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think whatever it is should be consistent between experiences. i'm fine with workspace

Copy link
Member

@riknoll riknoll left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. do we have docs anywhere that need to be updated with the new terminology?

@riknoll riknoll enabled auto-merge (squash) March 4, 2026 23:48
@riknoll riknoll merged commit 50b567d into microsoft:master Mar 4, 2026
12 checks passed
@microbit-robert
Copy link
Contributor Author

LGTM. do we have docs anywhere that need to be updated with the new terminology?

I've aligned with these MakeCode docs. I'm not aware of anything else that specifically points out the area menu in the same detailed way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants