Added dialog titles everywhere for accessibility

Author: fgatti675

examples/example_pro/src/FirestoreApp/DemoImportAction.tsx

@@ -5,6 +5,7 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
     FileUploadIcon,
     IconButton,
     Tooltip,
@@ -26,8 +27,8 @@ export function DemoImportAction({}: CollectionActionsProps) {
 
         <Dialog open={open}
                 maxWidth={"lg"}>
+            <DialogTitle>Import data</DialogTitle>
             <DialogContent className={"flex flex-col gap-4 my-4"}>
-                <Typography variant={"h6"}>Import data</Typography>
                 <Typography variant={"body2"}>The import feature is disabled in this demo</Typography>
             </DialogContent>
             <DialogActions>

examples/example_pro/src/FirestoreApp/collection_actions/OpenAIInstructionsActions.tsx

@@ -1,6 +1,15 @@
 import React, { useEffect } from "react";
 import { useSideDialogsController } from "@firecms/core";
-import { AutoFixHighIcon, Button, Dialog, DialogActions, DialogContent, IconButton, Typography, } from "@firecms/ui";
+import {
+    AutoFixHighIcon,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Typography,
+} from "@firecms/ui";
 
 /**
  * This whole component is a big hack used to point the user to the
@@ -37,10 +46,8 @@ export function OpenAIInstructionsActions() {
                 open={open}
                 onOpenChange={setOpen}
             >
+                <DialogTitle>OpenAI data enhancement</DialogTitle>
                 <DialogContent className="p-8 flex flex-col space-y-2">
-                    <Typography variant={"h5"} gutterBottom>
-                        OpenAI data enhancement DEMO
-                    </Typography>
                     <Typography gutterBottom>
                         Try it out by clicking on <b>ADD BOOK</b> and
                         then typing the title of your favourite book on the <b>AUTOFILL

examples/example_pro/src/FirestoreApp/views/ClientUIComponentsShowcase.tsx

@@ -17,6 +17,7 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
     ExpandablePanel,
     FaceIcon,
     FiberManualRecordIcon,
@@ -342,9 +343,10 @@ export default function ClientUIComponentsShowcase({
                 <Typography variant="subtitle2">Dialog</Typography>
                 <Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
                 <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
-
+                    <DialogTitle>
+                        Dialog
+                    </DialogTitle>
                     <DialogContent>
-                        <Typography variant={"h6"} className={"mb-2"}>Dialog</Typography>
                         This UI kit is amazing!
                     </DialogContent>
                     <DialogActions>

packages/collection_editor/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -32,6 +32,7 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
     DoneIcon,
     IconButton,
     LoadingButton,
@@ -114,6 +115,7 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
             maxWidth={"7xl"}
             onOpenChange={(open) => !open ? handleCancel() : undefined}
         >
+            <DialogTitle hidden>Collection editor</DialogTitle>
             {open && <CollectionEditor {...props}
                                        handleCancel={handleCancel}
                                        setFormDirty={setFormDirty}/>}

packages/collection_editor/src/ui/collection_editor/EntityCustomViewsSelectDialog.tsx

@@ -1,19 +1,20 @@
 import { useCustomizationController } from "@firecms/core";
-import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 import React from "react";
 
-export function EntityCustomViewsSelectDialog({ open, onClose }: { open: boolean, onClose: (selectedViewKey?: string) => void }) {
+export function EntityCustomViewsSelectDialog({
+                                                  open,
+                                                  onClose
+                                              }: { open: boolean, onClose: (selectedViewKey?: string) => void }) {
     const {
         entityViews,
     } = useCustomizationController();
 
     return <Dialog
         maxWidth={"md"}
         open={open}>
+        <DialogTitle>Select custom view</DialogTitle>
         <DialogContent className={"flex flex-col gap-4"}>
-            <Typography variant={"h6"}>
-                Select view
-            </Typography>
             {entityViews?.map((view) => {
                 return <Button
                     key={view.key}

packages/collection_editor/src/ui/collection_editor/EnumForm.tsx

@@ -11,6 +11,7 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
     IconButton,
     ListIcon,
     Paper,
@@ -327,7 +328,7 @@ function EnumEntryDialog({
         open={open}
         onOpenChange={(open) => !open ? onClose() : undefined}
     >
-
+        <DialogTitle hidden>Enum form dialog</DialogTitle>
         <DialogContent>
             {index !== undefined &&
                 <div>

packages/collection_editor/src/ui/collection_editor/GetCodeDialog.tsx

@@ -1,5 +1,5 @@
 import { EntityCollection, isEmptyObject, useSnackbarController } from "@firecms/core";
-import { Button, ContentCopyIcon, Dialog, DialogActions, DialogContent, Typography, } from "@firecms/ui";
+import { Button, ContentCopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, Typography, } from "@firecms/ui";
 import React from "react";
 import JSON5 from "json5";
 import { Highlight, themes } from "prism-react-renderer"
@@ -20,10 +20,9 @@ export function GetCodeDialog({
     return <Dialog open={open}
                    onOpenChange={onOpenChange}
                    maxWidth={"4xl"}>
+        <DialogTitle variant={"h6"}>Code for {collection.name}</DialogTitle>
         <DialogContent>
-            <Typography variant={"h6"} className={"my-4"}>
-                Code for {collection.name}
-            </Typography>
+
             <Typography variant={"body2"} className={"my-4 mb-8"}>
                 If you want to customise the collection in code, you can add this collection code to your CMS
                 app configuration.

packages/collection_editor/src/ui/collection_editor/PropertyEditView.tsx

@@ -275,7 +275,9 @@ export function PropertyFormDialog({
                   e.stopPropagation();
                   formexRef.current?.handleSubmit(e)
               }}>
+            <DialogTitle hidden>Property edit view</DialogTitle>
             <DialogContent>
+
                 <PropertyForm {...formProps}
                               onDismiss={onCancel}
                               onPropertyChanged={(params) => {

packages/collection_editor/src/ui/collection_editor/UnsavedChangesDialog.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 
 export interface UnsavedChangesDialogProps {
     open: boolean;
@@ -24,11 +24,9 @@ export function UnsavedChangesDialog({
             aria-labelledby="alert-dialog-title"
             aria-describedby="alert-dialog-description"
         >
-            <DialogContent>
-                <Typography variant={"h6"}>
-                    {title ?? "Unsaved changes"}
-                </Typography>
 
+            <DialogTitle>{title ?? "Unsaved changes"}</DialogTitle>
+            <DialogContent>
                 {body && <Typography>
                     {body}
                 </Typography>}

packages/data_export/src/export/BasicExportAction.tsx

@@ -8,6 +8,7 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
     GetAppIcon,
     IconButton,
     Tooltip,
@@ -70,9 +71,10 @@ export function BasicExportAction({
             open={open}
             onOpenChange={setOpen}
             maxWidth={"xl"}>
-            <DialogContent className={"flex flex-col gap-4 my-4"}>
 
-                <Typography variant={"h6"}>Export data</Typography>
+            <DialogTitle variant={"h6"}>Export data</DialogTitle>
+
+            <DialogContent className={"flex flex-col gap-4 my-4"}>
 
                 <div>Download the the content of this table as a CSV</div>