Add landmark elements and regions for navigation (#527)

* Fix vertical scroll (data page) and icon picker position
* Add landmark elements and regions for navigation
* Add region role to action rows on testing model page

Regions as of this PR:
- header with the app-wide actions
- main containing the table-like area
  - named action regions
- "data samples toolbar" or "testing model toolbar" containing the page specific actions (intentionally avoided the word action here)
- live graph

We think the live graph makes sense as a separate region as the other actions aren't related to it and are different per page. It's also something we talk about a lot in docs etc.

First cut of work for #517

Author: microbit-robert

lang/ui.en.json

@@ -35,6 +35,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"
@@ -403,6 +407,10 @@
     "defaultMessage": "Show data features",
     "description": "Show data features button text"
   },
+  "data-samples-actions-region": {
+    "defaultMessage": "Data samples toolbar",
+    "description": "Region label for data samples actions"
+  },
   "data-samples-label": {
     "defaultMessage": "Data samples",
     "description": "Heading for data samples column"
@@ -1411,6 +1419,10 @@
     "defaultMessage": "Terms of use",
     "description": "Link or menu item link to view terms of use"
   },
+  "testing-model-actions-region": {
+    "defaultMessage": "Testing model toolbar",
+    "description": "Region label for testing model actions"
+  },
   "testing-model-title": {
     "defaultMessage": "Testing model",
     "description": "Testing model page title"

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"

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}

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";
@@ -29,7 +30,7 @@ const LedIconPicker = ({ actionName, onIconSelected }: LedIconPicker) => {
   );
 
   return (
-    <Popover placement="bottom-end" isLazy lazyBehavior="keepMounted">
+    <Popover placement="right-start" isLazy lazyBehavior="keepMounted">
       {({ onClose }) => (
         <>
           <PopoverTrigger>
@@ -51,31 +52,33 @@ const LedIconPicker = ({ actionName, 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>

src/components/LiveGraphPanel.tsx

@@ -67,6 +67,8 @@ const LiveGraphPanel = ({
   const intl = useIntl();
   return (
     <HStack
+      role="region"
+      aria-label={intl.formatMessage({ id: "live-data-graph" })}
       position="relative"
       h={160}
       width="100%"

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>

src/messages/ui.en.json

@@ -71,6 +71,20 @@
       "value": "Name of action"
     }
   ],
+  "action-region": [
+    {
+      "type": 0,
+      "value": "Action \""
+    },
+    {
+      "type": 1,
+      "value": "action"
+    },
+    {
+      "type": 0,
+      "value": "\""
+    }
+  ],
   "action-tooltip": [
     {
       "type": 0,
@@ -675,6 +689,12 @@
       "value": "Show data features"
     }
   ],
+  "data-samples-actions-region": [
+    {
+      "type": 0,
+      "value": "Data samples toolbar"
+    }
+  ],
   "data-samples-label": [
     {
       "type": 0,
@@ -2499,6 +2519,12 @@
       "value": "Terms of use"
     }
   ],
+  "testing-model-actions-region": [
+    {
+      "type": 0,
+      "value": "Testing model toolbar"
+    }
+  ],
   "testing-model-title": [
     {
       "type": 0,

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}

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" }}

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}