Add heading elements to dialog headers to improve accessibility (#1002)

Closes #998.
microbit-foundation · Sep 27, 2022 · a4d25d6 · a4d25d6
1 parent d7cd1ec
commit a4d25d6
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 11 deletions.
diff --git a/src/common/ConfirmDialog.tsx b/src/common/ConfirmDialog.tsx
@@ -12,6 +12,7 @@ import {
   AlertDialogHeader,
   AlertDialogOverlay,
 } from "@chakra-ui/modal";
+import { Text } from "@chakra-ui/react";
 import { ReactNode, useRef } from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -40,8 +41,10 @@ export const ConfirmDialog = ({
     >
       <AlertDialogOverlay>
         <AlertDialogContent>
-          <AlertDialogHeader fontSize="lg" fontWeight="bold">
-            {header}
+          <AlertDialogHeader>
+            <Text as="h2" fontSize="lg" fontWeight="bold">
+              {header}
+            </Text>
           </AlertDialogHeader>
           <AlertDialogBody>{body}</AlertDialogBody>
           <AlertDialogFooter>

diff --git a/src/common/GenericDialog.tsx b/src/common/GenericDialog.tsx
@@ -11,7 +11,7 @@ import {
   ModalHeader,
   ModalOverlay,
 } from "@chakra-ui/modal";
-import { Button, HStack, Link } from "@chakra-ui/react";
+import { Button, HStack, Link, Text } from "@chakra-ui/react";
 import { ThemeTypings } from "@chakra-ui/styled-system";
 import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
@@ -48,8 +48,10 @@ export const GenericDialog = ({
         <ModalContent minWidth="560px" my="auto">
           <ModalCloseButton />
           {header && (
-            <ModalHeader fontSize="lg" fontWeight="bold">
-              {header}
+            <ModalHeader>
+              <Text as="h2" fontSize="xl" fontWeight="bold">
+                {header}
+              </Text>
             </ModalHeader>
           )}
           <ModalBody>{body}</ModalBody>

diff --git a/src/common/InputDialog.tsx b/src/common/InputDialog.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { Button } from "@chakra-ui/button";
-import { Box, VStack } from "@chakra-ui/layout";
+import { Box, VStack, Text } from "@chakra-ui/layout";
 import {
   Modal,
   ModalBody,
@@ -76,8 +76,10 @@ export const InputDialog = <T,>({
     >
       <ModalOverlay>
         <ModalContent>
-          <ModalHeader fontSize="lg" fontWeight="bold">
-            {header}
+          <ModalHeader>
+            <Text as="h2" fontSize="lg" fontWeight="bold">
+              {header}
+            </Text>
           </ModalHeader>
           <ModalBody>
             <VStack>

diff --git a/src/common/ProgressDialog.tsx b/src/common/ProgressDialog.tsx
@@ -11,7 +11,7 @@ import {
   ModalOverlay,
 } from "@chakra-ui/modal";
 import { Progress } from "@chakra-ui/progress";
-import { VStack } from "@chakra-ui/react";
+import { Text, VStack } from "@chakra-ui/react";
 import { ReactNode } from "react";
 
 const doNothing = () => {};
@@ -39,7 +39,11 @@ const ProgressDialog = ({ header, body, progress }: ProgressDialogProps) => {
     >
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>{header}</ModalHeader>
+        <ModalHeader>
+          <Text as="h2" fontSize="xl" fontWeight="bold">
+            {header}
+          </Text>
+        </ModalHeader>
         <ModalBody>
           <VStack
             spacing={4}

diff --git a/src/e2e/app.ts b/src/e2e/app.ts
@@ -742,7 +742,7 @@ export class App {
   async confirmInputDialog(title: string): Promise<void> {
     const document = await this.document();
     await document.findByText(title, {
-      selector: "header",
+      selector: "h2",
     });
   }