fix(a11y): Fieldset and legend for list/map date input (#3631)

theopensystemslab · Sep 6, 2024 · 1e9757b · 1e9757b
1 parent 36a3a1b
commit 1e9757b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/DateFieldInput.tsx b/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/DateFieldInput.tsx
@@ -1,8 +1,9 @@
 import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
 import { paddedDate } from "@planx/components/DateInput/model";
 import type { DateField } from "@planx/components/shared/Schema/model";
 import React from "react";
-import InputLabel from "ui/public/InputLabel";
+import InputLegend from "ui/editor/InputLegend";
 import DateInput from "ui/shared/DateInput";
 
 import { getFieldProps, Props } from ".";
@@ -13,21 +14,24 @@ export const DateFieldInput: React.FC<Props<DateField>> = (props) => {
   const { id, errorMessage, name, value } = getFieldProps(props);
 
   return (
-    <InputLabel label={data.title} htmlFor={id}>
+    <Box component="fieldset">
+      <InputLegend>
+        <Typography variant="body1" pb={1}>
+          <strong>{data.title}</strong>
+        </Typography>
+      </InputLegend>
       {data.description && (
         <FieldInputDescription description={data.description} />
       )}
-      <Box sx={{ display: "flex", alignItems: "baseline" }}>
-        <DateInput
-          value={value?.toString()}
-          bordered
-          onChange={(newDate: string, eventType: string) => {
-            formik.setFieldValue(name, paddedDate(newDate, eventType));
-          }}
-          error={errorMessage}
-          id={id}
-        />
-      </Box>
-    </InputLabel>
+      <DateInput
+        value={value?.toString()}
+        bordered
+        onChange={(newDate: string, eventType: string) => {
+          formik.setFieldValue(name, paddedDate(newDate, eventType));
+        }}
+        error={errorMessage}
+        id={id}
+      />
+    </Box>
   );
 };
diff --git a/editor.planx.uk/src/ui/shared/DateInput.tsx b/editor.planx.uk/src/ui/shared/DateInput.tsx
@@ -20,7 +20,7 @@ const INPUT_YEAR_WIDTH = "84px";
 
 const Root = styled(Box)(({ theme }) => ({
   display: "flex",
-  alignItems: "bottom",
+  alignItems: "flex-end",
   // Adds a uniform horizontal spacing between all child elements.
   // The `* + *` selector makes sure the first element doesn't get this margin.
   "& > * + *": {
@@ -31,7 +31,7 @@ const Root = styled(Box)(({ theme }) => ({
 const Label = styled(Typography)(({ theme }) => ({
   minWidth: INPUT_DATE_WIDTH,
   alignSelf: "end",
-  marginBottom: theme.spacing(0.5),
+  marginBottom: theme.spacing(1),
   display: "inline-block",
 })) as typeof Typography;