From a4d25d6b6725ac206360723376cfe4f2c310e511 Mon Sep 17 00:00:00 2001
From: Robert Knight <95928279+microbit-robert@users.noreply.github.com>
Date: Tue, 27 Sep 2022 13:13:01 +0100
Subject: [PATCH] Add heading elements to dialog headers to improve
 accessibility (#1002)

Closes #998.
---
 src/common/ConfirmDialog.tsx  | 7 +++++--
 src/common/GenericDialog.tsx  | 8 +++++---
 src/common/InputDialog.tsx    | 8 +++++---
 src/common/ProgressDialog.tsx | 8 ++++++--
 src/e2e/app.ts                | 2 +-
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/common/ConfirmDialog.tsx b/src/common/ConfirmDialog.tsx
index fdb1da08c..034d957fb 100644
--- 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
index 8583e1d76..ba88bb2da 100644
--- 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
index 0bd7f8a72..5ec12c89e 100644
--- 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
index de3def83e..72661a90f 100644
--- 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
index 58ca474a9..ba3de06fb 100644
--- 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",
     });
   }