fix(a11y): Remove placeholders in DateInput

theopensystemslab · May 28, 2024 · 0be7ddf · 0be7ddf
1 parent 3c048ff
commit 0be7ddf
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 44 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
@@ -4,7 +4,7 @@ import React from "react";
 import { axe, setup } from "testUtils";
 
 import { ERROR_MESSAGE } from "../shared/constants";
-import { fillInFieldsUsingPlaceholder } from "../shared/testHelpers";
+import { fillInFieldsUsingLabel } from "../shared/testHelpers";
 import DateInput from "./Public";
 
 test("submits a date", async () => {
@@ -21,10 +21,10 @@ test("submits a date", async () => {
 
   expect(screen.getByRole("heading")).toHaveTextContent("Pizza Day");
 
-  await fillInFieldsUsingPlaceholder(user, {
-    DD: "22",
-    MM: "05",
-    YYYY: "2010",
+  await fillInFieldsUsingLabel(user, {
+    Day: "22",
+    Month: "05",
+    Year: "2010",
   });
 
   await user.click(screen.getByTestId("continue-button"));
@@ -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/@planx/components/shared/testHelpers.ts b/editor.planx.uk/src/@planx/components/shared/testHelpers.ts
@@ -1,21 +1,6 @@
 import { screen } from "@testing-library/react";
 import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
 
-export const typeUsingPlaceholder = async (
-  user: UserEvent,
-  placeholder: string,
-  text: string,
-) => await user.type(screen.getByPlaceholderText(placeholder), text);
-
-export const fillInFieldsUsingPlaceholder = async (
-  user: UserEvent,
-  ob: Record<string, string>,
-) => {
-  for (const [placeholder, text] of Object.entries(ob)) {
-    await typeUsingPlaceholder(user, placeholder, text);
-  }
-};
-
 export const typeUsingLabel = async (
   user: UserEvent,
   label: string,

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`}