From 4c4f1a3754bfeaaaef595cf0a60180aec4e41fb3 Mon Sep 17 00:00:00 2001
From: Robert Knight <robert@microbit.org>
Date: Thu, 26 Feb 2026 10:49:24 +0000
Subject: [PATCH] Improve screen reader behaviour for area overlay

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.
---
 webapp/src/components/AreaMenuOverlay.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/webapp/src/components/AreaMenuOverlay.tsx b/webapp/src/components/AreaMenuOverlay.tsx
index 004f2c1dbaed..9ca02f546a66 100644
--- a/webapp/src/components/AreaMenuOverlay.tsx
+++ b/webapp/src/components/AreaMenuOverlay.tsx
@@ -19,7 +19,7 @@ interface RectBounds {
     height: number;
 }
 
-type AreaId = "mainmenu" | "simulator" | "toolbox" | "editor" | "editortools" | "tutorial";
+type AreaId = "topbar" | "simulator" | "toolbox" | "workspace" | "bottombar" | "tutorial";
 
 interface Area {
     id: AreaId;
@@ -44,8 +44,8 @@ const isSimMini = () => !!document.querySelector(".miniSim");
 
 const areas: Area[] = [
     {
-        id: "mainmenu",
-        ariaLabel: lf("Main menu"),
+        id: "topbar",
+        ariaLabel: lf("Top bar"),
         shortcutKey: "1",
         getBounds() {
             return document.querySelector("#mainmenu")?.getBoundingClientRect();
@@ -144,8 +144,8 @@ const areas: Area[] = [
         }
     },
     {
-        id: "editor",
-        ariaLabel: lf("Editor"),
+        id: "workspace",
+        ariaLabel: lf("Workspace"),
         shortcutKey: "4",
         getBounds(projectView: IProjectView) {
             const editorSelectors = ["#pxtJsonEditor", "#githubEditor", "#blocksArea", "#serialEditor", "#assetEditor", "#monacoEditor"];
@@ -180,8 +180,8 @@ const areas: Area[] = [
         }
     },
     {
-        id: "editortools",
-        ariaLabel: lf("Editor toolbar"),
+        id: "bottombar",
+        ariaLabel: lf("Bottom bar"),
         shortcutKey: "5",
         getBounds() {
             return document.querySelector("#editortools")?.getBoundingClientRect();
@@ -250,7 +250,7 @@ export const AreaMenuOverlay = ({ parent }: AreaMenuOverlapProps) => {
     }, [parent]);
 
     // Something is awry, bail out.
-    const bailOut = !areaRects.get("editor");
+    const bailOut = !areaRects.get("workspace");
     useEffect(() => {
         if (bailOut) {
             parent.toggleAreaMenu();
@@ -261,8 +261,8 @@ export const AreaMenuOverlay = ({ parent }: AreaMenuOverlapProps) => {
         return null;
     }
     return ReactDOM.createPortal(
-        <FocusTrap dontRestoreFocus onEscape={handleEscape}>
-            <div className="area-menu-container" >
+        <FocusTrap dontRestoreFocus onEscape={handleEscape} arrowKeyNavigation={true} focusFirstItem>
+            <div className="area-menu-container" role="menu" aria-label={lf("Area overlay")}>
                 {areas.map(area => {
                     const rect = areaRects.get(area.id);
                     return rect ? (<AreaButton
@@ -293,6 +293,7 @@ const AreaButton = ({ shortcutKey, bounds, ...props }: AreaButtonProps) => {
     return <Button
         {...props}
         className={`area-button ${props.className}`}
+        role="menuitem"
         style={{
             top, height, left, width
         }}