fix(a11y): Remove placeholders in DateInput

theopensystemslab · May 28, 2024 · 031c2ea · 031c2ea
1 parent 3c048ff
commit 031c2ea
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 24 deletions.
diff --git a/editor.planx.uk/src/@planx/components/DateInput/DateInput.stories.tsx b/editor.planx.uk/src/@planx/components/DateInput/DateInput.stories.tsx
@@ -32,17 +32,17 @@ export const FilledForm: StoryObj = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const dayInput = canvas.getByPlaceholderText("DD");
+    const dayInput = canvas.getByLabelText("Day");
     await userEvent.type(dayInput, "01", {
       delay: 100,
     });
 
-    const monthInput = canvas.getByPlaceholderText("MM");
+    const monthInput = canvas.getByLabelText("Month");
     await userEvent.type(monthInput, "03", {
       delay: 100,
     });
 
-    const yearInput = canvas.getByPlaceholderText("YYYY");
+    const yearInput = canvas.getByLabelText("Year");
     await userEvent.type(yearInput, "2030", {
       delay: 100,
     });

diff --git a/editor.planx.uk/src/@planx/components/DateInput/Editor.test.tsx b/editor.planx.uk/src/@planx/components/DateInput/Editor.test.tsx
@@ -29,9 +29,9 @@ describe("DateInputComponent - Editor Modal", () => {
       </DndProvider>,
     );
 
-    const [minDay, maxDay] = screen.getAllByPlaceholderText("DD");
-    const [minMonth, maxMonth] = screen.getAllByPlaceholderText("MM");
-    const [minYear, maxYear] = screen.getAllByPlaceholderText("YYYY");
+    const [minDay, maxDay] = screen.getAllByLabelText("Day");
+    const [minMonth, maxMonth] = screen.getAllByLabelText("Month");
+    const [minYear, maxYear] = screen.getAllByLabelText("Year");
 
     expect(screen.queryByText(minError)).toBeNull();
     expect(screen.queryByText(maxError)).toBeNull();
@@ -59,9 +59,9 @@ describe("DateInputComponent - Editor Modal", () => {
       </DndProvider>,
     );
 
-    const [minDay, maxDay] = screen.getAllByPlaceholderText("DD");
-    const [minMonth, maxMonth] = screen.getAllByPlaceholderText("MM");
-    const [minYear, maxYear] = screen.getAllByPlaceholderText("YYYY");
+    const [minDay, maxDay] = screen.getAllByLabelText("Day");
+    const [minMonth, maxMonth] = screen.getAllByLabelText("Month");
+    const [minYear, maxYear] = screen.getAllByLabelText("Year");
 
     expect(screen.queryByText(minError)).toBeNull();
     expect(screen.queryByText(maxError)).toBeNull();
@@ -91,9 +91,9 @@ describe("DateInputComponent - Editor Modal", () => {
       </DndProvider>,
     );
 
-    const [minDay, maxDay] = screen.getAllByPlaceholderText("DD");
-    const [minMonth, maxMonth] = screen.getAllByPlaceholderText("MM");
-    const [minYear, maxYear] = screen.getAllByPlaceholderText("YYYY");
+    const [minDay, maxDay] = screen.getAllByLabelText("Day");
+    const [minMonth, maxMonth] = screen.getAllByLabelText("Month");
+    const [minYear, maxYear] = screen.getAllByLabelText("Year");
 
     expect(screen.queryAllByText(invalidError)).toHaveLength(0);
 

diff --git a/editor.planx.uk/src/@planx/components/DateInput/Public.test.tsx b/editor.planx.uk/src/@planx/components/DateInput/Public.test.tsx
@@ -103,20 +103,20 @@ test("allows user to type into input field and click continue", async () => {
     <DateInput title="Enter a date" handleSubmit={handleSubmit} />,
   );
 
-  const day = screen.getByPlaceholderText("DD");
+  const day = screen.getByLabelText("Day");
 
   await user.type(day, "2");
   // Trigger blur event
   await user.tab();
 
   expect(day).toHaveValue("02");
 
-  const month = screen.getByPlaceholderText("MM");
+  const month = screen.getByLabelText("Month");
   await user.type(month, "1");
   await user.type(month, "1");
   expect(month).toHaveValue("11");
 
-  const year = screen.getByPlaceholderText("YYYY");
+  const year = screen.getByLabelText("Year");
   await user.type(year, "1");
   await user.type(year, "9");
   await user.type(year, "9");
@@ -129,9 +129,9 @@ test("allows user to type into input field and click continue", async () => {
 test("date fields have a max length set", async () => {
   setup(<DateInput title="Enter a date" />);
 
-  const day = screen.getByPlaceholderText("DD") as HTMLInputElement;
-  const month = screen.getByPlaceholderText("MM") as HTMLInputElement;
-  const year = screen.getByPlaceholderText("YYYY") as HTMLInputElement;
+  const day = screen.getByLabelText("Day") as HTMLInputElement;
+  const month = screen.getByLabelText("Month") as HTMLInputElement;
+  const year = screen.getByLabelText("Year") as HTMLInputElement;
 
   expect(day.maxLength).toBe(2);
   expect(month.maxLength).toBe(2);

diff --git a/editor.planx.uk/src/ui/shared/DateInput.tsx b/editor.planx.uk/src/ui/shared/DateInput.tsx
@@ -47,13 +47,16 @@ export default function DateInput(props: Props): FCReturn {
           </Typography>
         )}
         <Box sx={{ width: INPUT_DATE_WIDTH }}>
-          <Label variant="body1" htmlFor={`${props.id}-day`} component={"label"}>
+          <Label
+            variant="body1"
+            htmlFor={`${props.id}-day`}
+            component={"label"}
+          >
             Day
           </Label>
           <Input
             value={day || ""}
             inputProps={{ maxLength: "2" }}
-            placeholder="DD"
             bordered={props.bordered}
             id={`${props.id}-day`}
             onInput={(ev: ChangeEvent<HTMLInputElement>) => {
@@ -71,12 +74,15 @@ export default function DateInput(props: Props): FCReturn {
           />
         </Box>
         <Box sx={{ width: INPUT_DATE_WIDTH }}>
-          <Label variant="body1" htmlFor={`${props.id}-month`} component={"label"}>
+          <Label
+            variant="body1"
+            htmlFor={`${props.id}-month`}
+            component={"label"}
+          >
             Month
           </Label>
           <Input
             value={month || ""}
-            placeholder="MM"
             inputProps={{ maxLength: "2" }}
             bordered={props.bordered}
             id={`${props.id}-month`}
@@ -95,12 +101,15 @@ export default function DateInput(props: Props): FCReturn {
           />
         </Box>
         <Box sx={{ width: INPUT_YEAR_WIDTH }}>
-          <Label variant="body1" htmlFor={`${props.id}-year`} component={"label"}>
+          <Label
+            variant="body1"
+            htmlFor={`${props.id}-year`}
+            component={"label"}
+          >
             Year
           </Label>
           <Input
             value={year || ""}
-            placeholder="YYYY"
             inputProps={{ maxLength: "4" }}
             bordered={props.bordered}
             id={`${props.id}-year`}