From 031c2ea5aced1b44c932d42ae6cc6b8aded0d47e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Tue, 28 May 2024 21:54:43 +0100 Subject: [PATCH] fix(a11y): Remove placeholders in DateInput --- .../DateInput/DateInput.stories.tsx | 6 +++--- .../components/DateInput/Editor.test.tsx | 18 ++++++++-------- .../components/DateInput/Public.test.tsx | 12 +++++------ editor.planx.uk/src/ui/shared/DateInput.tsx | 21 +++++++++++++------ 4 files changed, 33 insertions(+), 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 index 667b758699..316b7c7b64 100644 --- 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 index 4b8ac996cf..abf85e3132 100644 --- 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", () => { , ); - 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", () => { , ); - 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", () => { , ); - 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 index 52d654a1b2..6627e4780e 100644 --- a/editor.planx.uk/src/@planx/components/DateInput/Public.test.tsx +++ b/editor.planx.uk/src/@planx/components/DateInput/Public.test.tsx @@ -103,7 +103,7 @@ test("allows user to type into input field and click continue", async () => { , ); - const day = screen.getByPlaceholderText("DD"); + const day = screen.getByLabelText("Day"); await user.type(day, "2"); // Trigger blur event @@ -111,12 +111,12 @@ test("allows user to type into input field and click continue", async () => { 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(); - 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 index 17437e218f..115bfab956 100644 --- 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 { )} - - -