Ensure all modals have headers

lang/ui.en.json

@@ -1,7 +1,7 @@
 {
   "about": {
     "defaultMessage": "About",
-    "description": "About action"
+    "description": "About action; also the accessible name of the about dialog"
   },
   "about-comic": {
     "defaultMessage": "Three panel comic titled \"MicroPython Rocks\" by Mike Rowbit. A cartoon snake introduces Damien, saying \"Meet Damien... He created MicroPython.\". Two snakes discuss MicroPython. The yellow snake says \"MicroPython is designed to work on very small computers.\" \"Like your BBC micro:bit\" the purple snake replies.\" The yellows snake continues \"But Python can run anywhere.\". The purple snake agrees, saying \"Like on this rack of servers that run huge websites\". The background behind the snakes shows a server rack.",
@@ -281,7 +281,7 @@
   },
   "feedback": {
     "defaultMessage": "Feedback",
-    "description": "Feedback action"
+    "description": "Feedback action; also the accessible name of the feedback dialog"
   },
   "file-actions": {
     "defaultMessage": "{name} file actions",

src/common/DialogHeading.tsx

@@ -0,0 +1,25 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode } from "react";
+import { Heading } from "react-aria-components";
+import { css } from "styled-system/css";
+
+const dialogHeadingClass = css({
+  fontSize: "xl",
+  fontWeight: "semibold",
+});
+
+/**
+ * Semantic heading that uses the RAC Dialog's `title` slot, for headings
+ * rendered in the dialog body rather than via ModalHeader.
+ */
+const DialogHeading = ({ children }: { children: ReactNode }) => (
+  <Heading slot="title" className={dialogHeadingClass}>
+    {children}
+  </Heading>
+);
+
+export default DialogHeading;

src/common/MultipleFilesDialog.tsx

@@ -7,6 +7,7 @@ import { Text } from "@microbit/ui";
 import { VStack } from "styled-system/jsx";
 import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
+import DialogHeading from "../common/DialogHeading";
 import { GenericDialog, GenericDialogFooter } from "../common/GenericDialog";
 import { useProject } from "../project/project-hooks";
 
@@ -55,9 +56,9 @@ const MultipleFilesDialogBody = () => {
       gap="5"
       alignItems="flex-start"
     >
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="multiple-files-title" />
-      </Text>
+      </DialogHeading>
       <Text>
         <FormattedMessage
           id="multiple-files-message-one"

src/common/PostSaveDialog.tsx

@@ -7,6 +7,7 @@ import { Link, Text } from "@microbit/ui";
 import { VStack } from "styled-system/jsx";
 import { ReactNode, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
+import DialogHeading from "../common/DialogHeading";
 import { GenericDialog, GenericDialogFooter } from "../common/GenericDialog";
 import { useProject } from "../project/project-hooks";
 import { FinalFocusRef } from "../project/project-actions";
@@ -77,9 +78,9 @@ const PostSaveDialogBody = ({
       gap="5"
       alignItems="flex-start"
     >
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="post-save-title" />
-      </Text>
+      </DialogHeading>
       <Text>
         <FormattedMessage
           id="post-save-message-one"

src/workbench/AboutDialog/AboutDialog.tsx

@@ -80,8 +80,8 @@ const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
       finalFocusRef={finalFocusRef}
       aria-label={intl.formatMessage({ id: "about" })}
     >
+      <ModalCloseButton />
       <ModalBody>
-        <ModalCloseButton />
         <VStack gap="8" pl="5" pr="5" pt="5">
           <HStack gap="4">
             {deployment.horizontalLogo && (

src/workbench/WelcomeDialog.tsx

@@ -17,6 +17,7 @@ import { ReactNode } from "react";
 import { RiExternalLinkLine } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
 import { HStack, Stack, VStack } from "styled-system/jsx";
+import DialogHeading from "../common/DialogHeading";
 import YoutubeVideoEmbed from "../common/YoutubeVideoEmbed";
 import { useDeployment } from "../deployment";
 
@@ -31,12 +32,7 @@ const WelcomeDialog = ({ youtubeId, isOpen, onClose }: WelcomeDialogProps) => {
   const intl = useIntl();
   const welcomeVideoAltText = intl.formatMessage({ id: "welcome-video-alt" });
   return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      size="2xl"
-      aria-label={intl.formatMessage({ id: "welcome-title" })}
-    >
+    <Modal isOpen={isOpen} onClose={onClose} size="2xl">
       <ModalCloseButton />
       <ModalBody>
         <VStack
@@ -49,9 +45,9 @@ const WelcomeDialog = ({ youtubeId, isOpen, onClose }: WelcomeDialogProps) => {
           alignItems="stretch"
         >
           <Stack gap="3">
-            <Text as="h2" fontSize="xl" fontWeight="semibold">
+            <DialogHeading>
               <FormattedMessage id="welcome-title" />
-            </Text>
+            </DialogHeading>
             <YoutubeVideoEmbed
               youtubeId={youtubeId}
               alt={welcomeVideoAltText}

src/workbench/connect-dialogs/ConnectCableDialog.tsx

@@ -3,9 +3,10 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Image, Text } from "@microbit/ui";
+import { Image } from "@microbit/ui";
 import { FormattedMessage } from "react-intl";
 import { Flex, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import connectCable from "./connect-cable.gif";
 
 const ConnectCableDialogBody = () => {
@@ -19,9 +20,9 @@ const ConnectCableDialogBody = () => {
       gap="5"
       alignItems="flex-start"
     >
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="connect-cable-title" />
-      </Text>
+      </DialogHeading>
 
       <Flex justifyContent="center" width="100%">
         <Image height="372px" width="400px" src={connectCable} alt="" />

src/workbench/connect-dialogs/ConnectHelpDialog.tsx

@@ -13,6 +13,7 @@ import {
 } from "@microbit/ui";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Box, Flex, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import selectMicrobit from "./select-microbit.png";
 
 const ConnectHelpDialogBody = () => {
@@ -29,9 +30,9 @@ const ConnectHelpDialogBody = () => {
       gap="5"
       alignItems="flex-start"
     >
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="connect-help-title" />
-      </Text>
+      </DialogHeading>
       <Box
         position="relative"
         width={isDesktop ? "100%" : "auto"}

src/workbench/connect-dialogs/FirmwareDialog.tsx

@@ -8,6 +8,7 @@ import { ReactNode, useCallback } from "react";
 import { RiExternalLinkLine } from "react-icons/ri";
 import { FormattedMessage } from "react-intl";
 import { HStack, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import { GenericDialog } from "../../common/GenericDialog";
 import firmwareUpgrade from "./firmware-upgrade.svg";
 import { FinalFocusRef } from "../../project/project-actions";
@@ -53,9 +54,9 @@ const FirmwareDialogBody = () => {
       gap="5"
       alignItems="flex-start"
     >
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="firmware-update-title" />
-      </Text>
+      </DialogHeading>
       <Text>
         <FormattedMessage id="firmware-update-message" />
       </Text>

src/workbench/connect-dialogs/NotFoundDialog.tsx

@@ -8,6 +8,7 @@ import { ReactNode, useCallback } from "react";
 import { RiDownload2Line, RiExternalLinkLine } from "react-icons/ri";
 import { FormattedMessage } from "react-intl";
 import { Box, Flex, HStack, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import { GenericDialog } from "../../common/GenericDialog";
 import SaveButton from "../../project/SaveButton";
 import { ConnectErrorChoice } from "./FirmwareDialog";
@@ -71,9 +72,9 @@ const NotFoundDialogBody = ({
       gap="5"
       alignItems="flex-start"
     >
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="not-found-title" />
-      </Text>
+      </DialogHeading>
       <Text>
         <FormattedMessage id="not-found-message" />
       </Text>

src/workbench/connect-dialogs/TransferHexDialog.tsx

@@ -8,6 +8,7 @@ import { ReactNode } from "react";
 import { RiInformationLine } from "react-icons/ri";
 import { FormattedMessage } from "react-intl";
 import { Flex, HStack, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import { GenericDialog, GenericDialogFooter } from "../../common/GenericDialog";
 import transferHexMac from "./transfer-hex-mac.gif";
 import transferHexWin from "./transfer-hex-win.gif";
@@ -64,9 +65,9 @@ const TransferHexDialogBody = () => {
       alignItems="flex-start"
     >
       <VStack alignItems="flex-start">
-        <Text as="h2" fontSize="xl" fontWeight="semibold">
+        <DialogHeading>
           <FormattedMessage id="transfer-hex-title" />
-        </Text>
+        </DialogHeading>
         <Text>
           <FormattedMessage
             id="transfer-hex-message-one"

src/workbench/connect-dialogs/WebUSBDialog.tsx

@@ -7,6 +7,7 @@ import { Button, Image, Text } from "@microbit/ui";
 import { ReactNode, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { Flex, HStack, Stack, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import { GenericDialog } from "../../common/GenericDialog";
 import chromeOSErrorImage from "./chrome-os-105-error.png";
 import { FinalFocusRef } from "../../project/project-actions";
@@ -60,9 +61,9 @@ const DialogBodyWrapper = ({ children }: { children: ReactNode }) => (
 const NotSupportedErrorBody = () => {
   return (
     <DialogBodyWrapper>
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="webusb-not-supported-title" />
-      </Text>
+      </DialogHeading>
       <Text>
         <FormattedMessage id="webusb-not-supported" />
       </Text>
@@ -76,9 +77,9 @@ const NotSupportedErrorBody = () => {
 const Chrome105ErrorBody = () => {
   return (
     <DialogBodyWrapper>
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         There is an issue with Chrome OS version 105 and WebUSB*
-      </Text>
+      </DialogHeading>
       <HStack gap="5">
         <Stack>
           <Text>

src/workbench/connect-dialogs/WebUSBErrorDialog.tsx

@@ -7,6 +7,7 @@ import { Button, Text } from "@microbit/ui";
 import { ReactNode, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { HStack, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import { GenericDialog } from "../../common/GenericDialog";
 import { FinalFocusRef } from "../../project/project-actions";
 
@@ -52,13 +53,7 @@ const WebUSBErrorBody = ({ title, description }: WebUSBErrorBodyProps) => (
     gap="5"
     alignItems="flex-start"
   >
-    {typeof title === "string" ? (
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
-        {title}
-      </Text>
-    ) : (
-      title
-    )}
+    <DialogHeading>{title}</DialogHeading>
     {typeof description === "string" ? <Text>{description}</Text> : description}
   </VStack>
 );