From ecb47290cfc3ead053a09cb57917a36592fce78c Mon Sep 17 00:00:00 2001
From: Robert Knight <robert@microbit.org>
Date: Tue, 19 Nov 2024 10:03:56 +0000
Subject: [PATCH 1/5] Fix vertical scroll (data page) and icon picker position

---
 src/components/LedIconPicker.tsx | 55 +++++++++++++++++---------------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/components/LedIconPicker.tsx b/src/components/LedIconPicker.tsx
index e91cd9222..d7d87d123 100644
--- a/src/components/LedIconPicker.tsx
+++ b/src/components/LedIconPicker.tsx
@@ -6,6 +6,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
+  Portal,
 } from "@chakra-ui/react";
 import { memo, useCallback } from "react";
 import { RiArrowDropDownFill } from "react-icons/ri";
@@ -28,7 +29,7 @@ const LedIconPicker = ({ onIconSelected }: LedIconPicker) => {
   );
 
   return (
-    <Popover placement="bottom-end" isLazy lazyBehavior="keepMounted">
+    <Popover placement="right-start" isLazy lazyBehavior="keepMounted">
       {({ onClose }) => (
         <>
           <PopoverTrigger>
@@ -41,31 +42,33 @@ const LedIconPicker = ({ onIconSelected }: LedIconPicker) => {
               <RiArrowDropDownFill size={32} />
             </IconButton>
           </PopoverTrigger>
-          <PopoverContent w="100%" height="300px" overflowY="auto">
-            <PopoverArrow />
-            <PopoverBody p={4}>
-              <Grid templateColumns="repeat(4, 1fr)" gap={4}>
-                {Object.keys(makecodeIcons).map((icon, idx) => (
-                  <IconButton
-                    key={idx}
-                    aria-label={intl.formatMessage(
-                      { id: "select-icon-option-action-aria" },
-                      {
-                        iconName: intl.formatMessage({
-                          id: `led-icon-option-${icon.toLowerCase()}`,
-                        }),
-                      }
-                    )}
-                    onClick={() => handleClick(icon as MakeCodeIcon, onClose)}
-                    variant="unstyled"
-                    h={20}
-                    w={20}
-                    icon={<LedIconSvg icon={icon as MakeCodeIcon} />}
-                  />
-                ))}
-              </Grid>
-            </PopoverBody>
-          </PopoverContent>
+          <Portal>
+            <PopoverContent w="100%" height="300px" overflowY="auto">
+              <PopoverArrow />
+              <PopoverBody p={4}>
+                <Grid templateColumns="repeat(4, 1fr)" gap={4}>
+                  {Object.keys(makecodeIcons).map((icon, idx) => (
+                    <IconButton
+                      key={idx}
+                      aria-label={intl.formatMessage(
+                        { id: "select-icon-option-action-aria" },
+                        {
+                          iconName: intl.formatMessage({
+                            id: `led-icon-option-${icon.toLowerCase()}`,
+                          }),
+                        }
+                      )}
+                      onClick={() => handleClick(icon as MakeCodeIcon, onClose)}
+                      variant="unstyled"
+                      h={20}
+                      w={20}
+                      icon={<LedIconSvg icon={icon as MakeCodeIcon} />}
+                    />
+                  ))}
+                </Grid>
+              </PopoverBody>
+            </PopoverContent>
+          </Portal>
         </>
       )}
     </Popover>

From 1007f22820651d2034d294f3db845a1e1f50db08 Mon Sep 17 00:00:00 2001
From: Robert Knight <robert@microbit.org>
Date: Tue, 19 Nov 2024 10:33:50 +0000
Subject: [PATCH 2/5] Add landmark elements and regions for navigation

---
 lang/ui.en.json                        | 12 ++++++++++++
 src/components/ActionBar.tsx           |  2 +-
 src/components/DataSamplesTableRow.tsx | 12 +++++++++++-
 src/components/LiveGraphPanel.tsx      |  6 ++++--
 src/messages/ui.en.json                | 26 ++++++++++++++++++++++++++
 src/pages/DataSamplesPage.tsx          | 20 +++++++++++++-------
 src/pages/HomePage.tsx                 |  9 ++++++++-
 src/pages/ImportPage.tsx               |  2 +-
 src/pages/NewPage.tsx                  |  2 +-
 src/pages/TestingModelPage.tsx         |  9 ++++++++-
 10 files changed, 85 insertions(+), 15 deletions(-)

diff --git a/lang/ui.en.json b/lang/ui.en.json
index eb3c664ea..ac2969b88 100644
--- a/lang/ui.en.json
+++ b/lang/ui.en.json
@@ -31,6 +31,10 @@
     "defaultMessage": "Name of action",
     "description": "Placeholder text for user supplied name of a movement-related action, e.g. clapping"
   },
+  "action-region": {
+    "defaultMessage": "Action \"{action}\"",
+    "description": "Region label for action row"
+  },
   "action-tooltip": {
     "defaultMessage": "The type of movement you want {appNameFull} to recognise e.g. ‘waving’ or ‘clapping’.",
     "description": "Tooltip explaining action"
@@ -395,6 +399,10 @@
     "defaultMessage": "Show data features",
     "description": "Show data features button text"
   },
+  "data-samples-actions-region": {
+    "defaultMessage": "Data and model actions",
+    "description": "Region label for data samples actions"
+  },
   "data-samples-label": {
     "defaultMessage": "Data samples",
     "description": "Heading for data samples column"
@@ -1387,6 +1395,10 @@
     "defaultMessage": "Terms of use",
     "description": "Link or menu item link to view terms of use"
   },
+  "testing-model-actions-region": {
+    "defaultMessage": "Project actions",
+    "description": "Region label for testing model actions"
+  },
   "testing-model-title": {
     "defaultMessage": "Testing model",
     "description": "Testing model page title"
diff --git a/src/components/ActionBar.tsx b/src/components/ActionBar.tsx
index 106184ec8..2154c2959 100644
--- a/src/components/ActionBar.tsx
+++ b/src/components/ActionBar.tsx
@@ -17,7 +17,7 @@ const ActionBar = ({
 }: ActionBarProps) => {
   return (
     <HStack
-      px={5}
+      as="header"
       alignItems="center"
       justifyContent="space-between"
       bgColor="brand2.500"
diff --git a/src/components/DataSamplesTableRow.tsx b/src/components/DataSamplesTableRow.tsx
index 8065eaee5..1acf18c41 100644
--- a/src/components/DataSamplesTableRow.tsx
+++ b/src/components/DataSamplesTableRow.tsx
@@ -59,7 +59,17 @@ const DataSamplesTableRow = ({
         onConfirm={() => deleteAction(action.ID)}
         onCancel={deleteConfirmDisclosure.onClose}
       />
-      <Box display="contents" onFocusCapture={onSelectRow}>
+      <Box
+        role="region"
+        aria-label={intl.formatMessage(
+          {
+            id: "action-region",
+          },
+          { action: action.name }
+        )}
+        display="contents"
+        onFocusCapture={onSelectRow}
+      >
         <GridItem>
           <ActionNameCard
             value={action}
diff --git a/src/components/LiveGraphPanel.tsx b/src/components/LiveGraphPanel.tsx
index db698112b..1266fb8b2 100644
--- a/src/components/LiveGraphPanel.tsx
+++ b/src/components/LiveGraphPanel.tsx
@@ -9,7 +9,7 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { useCallback, useRef } from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { ConnectionStatus } from "../connect-status-hooks";
 import { useConnectionStage } from "../connection-stage-hooks";
 import microbitImage from "../images/stylised-microbit-black.svg";
@@ -64,9 +64,11 @@ const LiveGraphPanel = ({
     });
     void actions.disconnect();
   }, [actions, logging]);
-
+  const intl = useIntl();
   return (
     <HStack
+      role="region"
+      arial-label={intl.formatMessage({ id: "live-data-graph" })}
       position="relative"
       h={160}
       width="100%"
diff --git a/src/messages/ui.en.json b/src/messages/ui.en.json
index 2b85d1607..f6c7cc2a0 100644
--- a/src/messages/ui.en.json
+++ b/src/messages/ui.en.json
@@ -65,6 +65,20 @@
       "value": "Name of action"
     }
   ],
+  "action-region": [
+    {
+      "type": 0,
+      "value": "Action \""
+    },
+    {
+      "type": 1,
+      "value": "action"
+    },
+    {
+      "type": 0,
+      "value": "\""
+    }
+  ],
   "action-tooltip": [
     {
       "type": 0,
@@ -663,6 +677,12 @@
       "value": "Show data features"
     }
   ],
+  "data-samples-actions-region": [
+    {
+      "type": 0,
+      "value": "Data and model actions"
+    }
+  ],
   "data-samples-label": [
     {
       "type": 0,
@@ -2435,6 +2455,12 @@
       "value": "Terms of use"
     }
   ],
+  "testing-model-actions-region": [
+    {
+      "type": 0,
+      "value": "Project actions"
+    }
+  ],
   "testing-model-title": [
     {
       "type": 0,
diff --git a/src/pages/DataSamplesPage.tsx b/src/pages/DataSamplesPage.tsx
index 853d13ae7..4e4a2065b 100644
--- a/src/pages/DataSamplesPage.tsx
+++ b/src/pages/DataSamplesPage.tsx
@@ -1,7 +1,7 @@
-import { Button, HStack, VStack } from "@chakra-ui/react";
+import { Button, Flex, HStack, VStack } from "@chakra-ui/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { RiAddLine, RiArrowRightLine } from "react-icons/ri";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router";
 import DataSamplesTable from "../components/DataSamplesTable";
 import DefaultPageLayout, {
@@ -45,7 +45,7 @@ const DataSamplesPage = () => {
     setSelectedActionIdx(actions.length);
     addNewAction();
   }, [addNewAction, actions]);
-
+  const intl = useIntl();
   return (
     <>
       <TrainModelDialogs finalFocusRef={trainButtonRef} />
@@ -55,12 +55,18 @@ const DataSamplesPage = () => {
         menuItems={<ProjectMenuItems />}
         toolbarItemsRight={<ProjectToolbarItems />}
       >
-        <DataSamplesTable
-          selectedActionIdx={selectedActionIdx}
-          setSelectedActionIdx={setSelectedActionIdx}
-        />
+        <Flex as="main" flexGrow={1} flexDir="column">
+          <DataSamplesTable
+            selectedActionIdx={selectedActionIdx}
+            setSelectedActionIdx={setSelectedActionIdx}
+          />
+        </Flex>
         <VStack w="full" flexShrink={0} bottom={0} gap={0} bg="gray.25">
           <HStack
+            role="region"
+            aria-label={intl.formatMessage({
+              id: "data-samples-actions-region",
+            })}
             justifyContent="space-between"
             px={5}
             py={2}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 9bab3fb9a..53a50a922 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -45,7 +45,14 @@ const HomePage = () => {
         </Button>
       }
     >
-      <Container centerContent gap={20} p={8} pb={20} maxW="container.lg">
+      <Container
+        as="main"
+        centerContent
+        gap={20}
+        p={8}
+        pb={20}
+        maxW="container.lg"
+      >
         <HStack
           gap={5}
           flexDir={{ base: "column", lg: "row" }}
diff --git a/src/pages/ImportPage.tsx b/src/pages/ImportPage.tsx
index d658a2add..dca627217 100644
--- a/src/pages/ImportPage.tsx
+++ b/src/pages/ImportPage.tsx
@@ -94,7 +94,7 @@ const ImportPage = () => {
       toolbarItemsRight={<HomeToolbarItem />}
       menuItems={<HomeMenuItem />}
     >
-      <VStack justifyContent="center">
+      <VStack as="main" justifyContent="center">
         <Stack
           bgColor="white"
           spacing={5}
diff --git a/src/pages/NewPage.tsx b/src/pages/NewPage.tsx
index 2183e2f3c..3f3086d73 100644
--- a/src/pages/NewPage.tsx
+++ b/src/pages/NewPage.tsx
@@ -69,7 +69,7 @@ const NewPage = () => {
       menuItems={<HomeMenuItem />}
     >
       <LoadProjectInput ref={loadProjectRef} accept=".json,.hex" />
-      <VStack alignItems="center">
+      <VStack as="main" alignItems="center">
         <Container maxW="1180px" alignItems="stretch" p={4} mt={8}>
           <VStack alignItems="stretch" w="100%">
             <Heading as="h1" fontSize="4xl" fontWeight="bold">
diff --git a/src/pages/TestingModelPage.tsx b/src/pages/TestingModelPage.tsx
index c51f4654d..055605eda 100644
--- a/src/pages/TestingModelPage.tsx
+++ b/src/pages/TestingModelPage.tsx
@@ -1,6 +1,7 @@
 import {
   Button,
   ButtonGroup,
+  Flex,
   HStack,
   Menu,
   MenuItem,
@@ -119,9 +120,15 @@ const TestingModelPage = () => {
         stage="openEditor"
         onNextLoading={editorLoading}
       />
-      <TestingModelTable />
+      <Flex as="main" flexGrow={1} flexDir="column">
+        <TestingModelTable />
+      </Flex>
       <VStack w="full" flexShrink={0} bottom={0} gap={0} bg="gray.25">
         <HStack
+          role="region"
+          aria-label={intl.formatMessage({
+            id: "testing-model-actions-region",
+          })}
           justifyContent="right"
           px={5}
           py={2}

From 6c45415888c7e5e18b72b2491cc96a61d8f4aa2e Mon Sep 17 00:00:00 2001
From: Robert Knight <robert@microbit.org>
Date: Tue, 19 Nov 2024 13:31:16 +0000
Subject: [PATCH 3/5] Add region role to action rows on testing model page

---
 src/components/TestingModelTable.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/TestingModelTable.tsx b/src/components/TestingModelTable.tsx
index 47ff4c9bd..350a245ff 100644
--- a/src/components/TestingModelTable.tsx
+++ b/src/components/TestingModelTable.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Grid,
   GridItem,
   GridProps,
@@ -7,15 +8,16 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { MakeCodeRenderBlocksProvider } from "@microbit/makecode-embed/react";
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { RiArrowRightLine } from "react-icons/ri";
+import { useIntl } from "react-intl";
 import { useConnectionStage } from "../connection-stage-hooks";
 import { useProject } from "../hooks/project-hooks";
 import { mlSettings } from "../mlConfig";
 import { getMakeCodeLang } from "../settings";
 import { useSettings, useStore } from "../store";
-import ActionNameCard from "./ActionNameCard";
 import ActionCertaintyCard from "./ActionCertaintyCard";
+import ActionNameCard from "./ActionNameCard";
 import CodeViewCard from "./CodeViewCard";
 import CodeViewDefaultBlockCard from "./CodeViewDefaultBlockCard";
 import HeadingGrid from "./HeadingGrid";
@@ -51,6 +53,7 @@ const TestingModelTable = () => {
   const [{ languageId }] = useSettings();
   const makeCodeLang = getMakeCodeLang(languageId);
   const scrollableAreaRef = useRef<HTMLDivElement>(null);
+  const intl = useIntl();
   return (
     <MakeCodeRenderBlocksProvider
       key={makeCodeLang}
@@ -83,7 +86,17 @@ const TestingModelTable = () => {
             {actions.map((action, idx) => {
               const { requiredConfidence: threshold } = action;
               return (
-                <React.Fragment key={idx}>
+                <Box
+                  key={idx}
+                  role="region"
+                  aria-label={intl.formatMessage(
+                    {
+                      id: "action-region",
+                    },
+                    { action: action.name }
+                  )}
+                  display="contents"
+                >
                   <GridItem>
                     <ActionNameCard
                       value={action}
@@ -112,7 +125,7 @@ const TestingModelTable = () => {
                       <CodeViewDefaultBlockCard action={action} />
                     )}
                   </GridItem>
-                </React.Fragment>
+                </Box>
               );
             })}
           </Grid>

From 43fe6cbaf4c7a9b25cdbc950a9fa59c2d16c389a Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Tue, 19 Nov 2024 17:27:45 +0000
Subject: [PATCH 4/5] Tweak region names

---
 lang/ui.en.json         | 4 ++--
 src/messages/ui.en.json | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lang/ui.en.json b/lang/ui.en.json
index ac2969b88..2804281de 100644
--- a/lang/ui.en.json
+++ b/lang/ui.en.json
@@ -400,7 +400,7 @@
     "description": "Show data features button text"
   },
   "data-samples-actions-region": {
-    "defaultMessage": "Data and model actions",
+    "defaultMessage": "Data samples toolbar",
     "description": "Region label for data samples actions"
   },
   "data-samples-label": {
@@ -1396,7 +1396,7 @@
     "description": "Link or menu item link to view terms of use"
   },
   "testing-model-actions-region": {
-    "defaultMessage": "Project actions",
+    "defaultMessage": "Testing model toolbar",
     "description": "Region label for testing model actions"
   },
   "testing-model-title": {
diff --git a/src/messages/ui.en.json b/src/messages/ui.en.json
index f6c7cc2a0..4531317c8 100644
--- a/src/messages/ui.en.json
+++ b/src/messages/ui.en.json
@@ -680,7 +680,7 @@
   "data-samples-actions-region": [
     {
       "type": 0,
-      "value": "Data and model actions"
+      "value": "Data samples toolbar"
     }
   ],
   "data-samples-label": [
@@ -2458,7 +2458,7 @@
   "testing-model-actions-region": [
     {
       "type": 0,
-      "value": "Project actions"
+      "value": "Testing model toolbar"
     }
   ],
   "testing-model-title": [

From 62306df575f4de94c04b2d497864427f60cd4f20 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Tue, 19 Nov 2024 17:32:05 +0000
Subject: [PATCH 5/5] Typo

---
 src/components/LiveGraphPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LiveGraphPanel.tsx b/src/components/LiveGraphPanel.tsx
index 1266fb8b2..3efaeea65 100644
--- a/src/components/LiveGraphPanel.tsx
+++ b/src/components/LiveGraphPanel.tsx
@@ -68,7 +68,7 @@ const LiveGraphPanel = ({
   return (
     <HStack
       role="region"
-      arial-label={intl.formatMessage({ id: "live-data-graph" })}
+      aria-label={intl.formatMessage({ id: "live-data-graph" })}
       position="relative"
       h={160}
       width="100%"