From f995c017fdf2f32dee7a27577d99589f1e329c1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Thu, 28 Mar 2024 11:38:37 +0000 Subject: [PATCH 1/2] fix: Add labels to all feeback form inputs --- .../Feedback/FeedbackForm.stories.tsx | 4 +- .../components/Feedback/FeedbackForm.test.tsx | 70 +------------------ .../src/components/Feedback/FeedbackForm.tsx | 24 ++----- .../components/Feedback/MoreInfoFeedback.tsx | 3 +- .../src/components/Feedback/index.tsx | 11 +-- 5 files changed, 19 insertions(+), 93 deletions(-) diff --git a/editor.planx.uk/src/components/Feedback/FeedbackForm.stories.tsx b/editor.planx.uk/src/components/Feedback/FeedbackForm.stories.tsx index 6a5bcdcf72..325117d148 100644 --- a/editor.planx.uk/src/components/Feedback/FeedbackForm.stories.tsx +++ b/editor.planx.uk/src/components/Feedback/FeedbackForm.stories.tsx @@ -26,7 +26,9 @@ export const EmptyLabelledForm: Story = { export const EmptyUnlabelledForm: Story = { args: { - inputs: [{ id: "userComment", name: "userComment" }], + inputs: [ + { id: "userComment", name: "userComment", label: "What's your comment?" }, + ], handleSubmit: async (values) => { console.log(values); }, diff --git a/editor.planx.uk/src/components/Feedback/FeedbackForm.test.tsx b/editor.planx.uk/src/components/Feedback/FeedbackForm.test.tsx index 351462efaf..41fdd220d3 100644 --- a/editor.planx.uk/src/components/Feedback/FeedbackForm.test.tsx +++ b/editor.planx.uk/src/components/Feedback/FeedbackForm.test.tsx @@ -6,13 +6,6 @@ import FeedbackForm from "./FeedbackForm"; const mockHandleSubmit = jest.fn(); -const mockUnlabelledInput: FeedbackFormInput[] = [ - { - name: "userComment", - ariaDescribedBy: "comment-title", - }, -]; - const mockLabelledInputs: FeedbackFormInput[] = [ { name: "userContext", id: "userContext", label: "User Context" }, { name: "userComment", id: "userComment", label: "User Comment" }, @@ -23,18 +16,7 @@ describe("FeedbackForm functionality", () => { jest.clearAllMocks(); }); - test("renders unlabelled input correctly", () => { - const { getByLabelText } = setup( - , - ); - const renderedInput = getByLabelText("Leave your feedback"); - expect(renderedInput).toBeInTheDocument(); - }); - - test("renders labelled inputs correctly", () => { + test("renders inputs correctly", () => { const { getByLabelText } = setup( { expect(commentInput).toBeInTheDocument(); }); - test("renders the feedback disclaimer with the input", () => { - const { getByText } = setup( - , - ); - expect( - getByText( - /Do not share personal or financial information in your feedback./i, - ), - ).toBeInTheDocument(); - }); - - test("can submit an unlabelled input", async () => { - const { getByLabelText, getByText, user } = setup( - , - ); - await user.type( - getByLabelText("Leave your feedback"), - "This is a test comment", - ); - await user.click(getByText("Send feedback")); - - expect(mockHandleSubmit).toHaveBeenCalledWith( - expect.objectContaining({ - userComment: "This is a test comment", - }), - expect.any(Object), - ); - }); - - test("can submit labelled inputs", async () => { + test("can submit inputs", async () => { const { getByLabelText, getByText, user } = setup( { jest.clearAllMocks(); }); - test("renders unlabelled inputs with no accessibility violations", async () => { - const { container } = setup( - , - ); - const results = await axe(container); - expect(results).toHaveNoViolations(); - }); - - test("renders labelled inputs with no accessibility violations", async () => { + test("renders inputs with no accessibility violations", async () => { const { container } = setup( - {input.label ? ( - - - - ) : ( + - )} + ))} diff --git a/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx b/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx index bc8a2e763f..c890b84dcd 100644 --- a/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx +++ b/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx @@ -94,7 +94,8 @@ const MoreInfoFeedbackComponent: React.FC = () => { const commentFormInputs: FeedbackFormInput[] = [ { name: "userComment", - ariaDescribedBy: "comment-title", + label: "What's your feedback?", + id: "feedback-input", }, ]; diff --git a/editor.planx.uk/src/components/Feedback/index.tsx b/editor.planx.uk/src/components/Feedback/index.tsx index 361e734f86..ac2ff82ea0 100644 --- a/editor.planx.uk/src/components/Feedback/index.tsx +++ b/editor.planx.uk/src/components/Feedback/index.tsx @@ -76,9 +76,8 @@ export interface FormProps { export type FeedbackFormInput = { name: keyof UserFeedback; - label?: string; - id?: string; - ariaDescribedBy?: string; + label: string; + id: string; }; const Feedback: React.FC = () => { @@ -331,7 +330,8 @@ const Feedback: React.FC = () => { const shareFormInputs: FeedbackFormInput[] = [ { name: "userComment", - ariaDescribedBy: "idea-title", + label: "What's your idea?", + id: "share-idea-input", }, ]; @@ -362,7 +362,8 @@ const Feedback: React.FC = () => { const commentFormInputs: FeedbackFormInput[] = [ { name: "userComment", - ariaDescribedBy: "comment-title", + label: "What's you comment?", + id: "comment-input", }, ]; From bfe9634e53c02318f55c38a59cdda46a329837f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Tue, 2 Apr 2024 15:25:56 +0100 Subject: [PATCH 2/2] fix(storybook): Tidy up redundant unlabelled stories --- .../Feedback/FeedbackForm.stories.tsx | 50 +++---------------- 1 file changed, 6 insertions(+), 44 deletions(-) diff --git a/editor.planx.uk/src/components/Feedback/FeedbackForm.stories.tsx b/editor.planx.uk/src/components/Feedback/FeedbackForm.stories.tsx index 325117d148..2d60bd235e 100644 --- a/editor.planx.uk/src/components/Feedback/FeedbackForm.stories.tsx +++ b/editor.planx.uk/src/components/Feedback/FeedbackForm.stories.tsx @@ -12,7 +12,7 @@ type Story = StoryObj; export default meta; -export const EmptyLabelledForm: Story = { +export const EmptyForm: Story = { args: { inputs: [ { id: "userContext", name: "userContext", label: "What were you doing?" }, @@ -24,19 +24,8 @@ export const EmptyLabelledForm: Story = { }, }; -export const EmptyUnlabelledForm: Story = { - args: { - inputs: [ - { id: "userComment", name: "userComment", label: "What's your comment?" }, - ], - handleSubmit: async (values) => { - console.log(values); - }, - }, -}; - -export const SuccessfulLabelledFormSubmit: Story = { - ...EmptyLabelledForm, +export const SuccessfulFormSubmit: Story = { + ...EmptyForm, play: async ({ canvasElement }) => { const canvas = within(canvasElement); @@ -57,8 +46,8 @@ export const SuccessfulLabelledFormSubmit: Story = { }, }; -export const MissingInputLabelledForm: Story = { - ...EmptyLabelledForm, +export const MissingInputForm: Story = { + ...EmptyForm, play: async ({ canvasElement }) => { const canvas = within(canvasElement); @@ -70,31 +59,4 @@ export const MissingInputLabelledForm: Story = { const submitButton = canvas.getByRole("button", { name: "Send feedback" }); await userEvent.click(submitButton); }, -}; - -export const SuccessfulUnlabelledFormSubmit: Story = { - ...EmptyUnlabelledForm, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - const commentInput = canvas.getByLabelText("Leave your feedback"); - await userEvent.type( - commentInput, - "It said I own a house but it's actually a flat.", - { delay: 100 }, - ); - - const submitButton = canvas.getByRole("button", { name: "Send feedback" }); - await userEvent.click(submitButton); - }, -}; - -export const MissingInputUnlabelledFormSubmit: Story = { - ...EmptyUnlabelledForm, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - - const submitButton = canvas.getByRole("button", { name: "Send feedback" }); - await userEvent.click(submitButton); - }, -}; +}; \ No newline at end of file