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

Closes #998.

Author: microbit-robert

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>

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>

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>

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}

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",
     });
   }