fix(a11y): require title for all @planx components (#2870)

theopensystemslab · Mar 8, 2024 · b6d4156 · b6d4156
1 parent 66a3850
commit b6d4156
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 9 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
@@ -28,6 +28,7 @@ import type { Checklist, Group } from "./model";
 import { toggleExpandableChecklist } from "./model";
 
 interface ChecklistProps extends Checklist {
+  text: string;
   handleSubmit?: Function;
   node?: {
     data?: {
@@ -41,7 +42,7 @@ interface ChecklistProps extends Checklist {
       info?: string;
       notes?: string;
       policyRef?: string;
-      text?: string;
+      text: string;
     };
   };
 }
@@ -362,6 +363,7 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
                 placeholder="Text"
                 onChange={formik.handleChange}
                 inputRef={focusRef}
+                required
               />
 
               <ImgInput
@@ -383,7 +385,6 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
 
             <InputRow>
               <Input
-                // required
                 format="data"
                 name="fn"
                 value={formik.values.fn}

diff --git a/editor.planx.uk/src/@planx/components/Checklist/model.ts b/editor.planx.uk/src/@planx/components/Checklist/model.ts
@@ -1,4 +1,5 @@
 import { MoreInformation, Option } from "../shared";
+
 export interface Group<T> {
   title: string;
   children: Array<T>;

diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.fixture.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.fixture.tsx
@@ -8,6 +8,7 @@ export default function Fixture() {
       handleSubmit={console.log}
       title="Pay"
       description=""
+      fn="fee"
       color="#efefef"
     />
   );

diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx
@@ -85,7 +85,13 @@ describe("Pay component when fee is undefined or £0", () => {
       data: { "application.fee.payable": ["0"] },
     });
 
-    setup(<Pay fn="application.fee.typo" handleSubmit={handleSubmit} />);
+    setup(
+      <Pay
+        title="Pay for your application"
+        fn="application.fee.typo"
+        handleSubmit={handleSubmit}
+      />,
+    );
 
     // handleSubmit has NOT been called (not skipped), Pay shows error instead
     expect(handleSubmit).not.toHaveBeenCalled();
@@ -103,7 +109,13 @@ describe("Pay component when fee is undefined or £0", () => {
       data: { "application.fee.payable": ["0"] },
     });
 
-    setup(<Pay fn="application.fee.payable" handleSubmit={handleSubmit} />);
+    setup(
+      <Pay
+        title="Pay for your application"
+        fn="application.fee.payable"
+        handleSubmit={handleSubmit}
+      />,
+    );
 
     // handleSubmit is called to auto-answer Pay (aka "skip" in card sequence)
     expect(handleSubmit).toHaveBeenCalled();

diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx
@@ -20,7 +20,6 @@ import Confirm from "./Confirm";
 export default Component;
 interface Props extends Pay {
   handleSubmit: handleSubmit;
-  fn?: string;
 }
 
 type ComponentState =

diff --git a/editor.planx.uk/src/@planx/components/Pay/model.ts b/editor.planx.uk/src/@planx/components/Pay/model.ts
@@ -5,11 +5,11 @@ import { boolean, object, string } from "yup";
 import type { MoreInformation } from "../shared";
 
 export interface Pay extends MoreInformation {
-  title?: string;
+  title: string;
   bannerTitle?: string;
   description?: string;
   color?: string;
-  fn?: string;
+  fn: string;
   instructionsTitle?: string;
   instructionsDescription?: string;
   hidePay?: boolean;

diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -26,7 +26,7 @@ interface Props {
       info?: string;
       notes?: string;
       policyRef?: string;
-      text?: string;
+      text: string;
       type?: string;
     };
   };

diff --git a/editor.planx.uk/src/@planx/components/TaskList/Public.test.tsx b/editor.planx.uk/src/@planx/components/TaskList/Public.test.tsx
@@ -9,6 +9,7 @@ test("renders correctly", async () => {
 
   const { user } = setup(
     <TaskList
+      title="to do"
       tasks={[
         { title: "buy land", description: "" },
         { title: "build house", description: "" },
@@ -24,6 +25,7 @@ test("renders correctly", async () => {
 it("should not have any accessibility violations", async () => {
   const { container } = setup(
     <TaskList
+      title="to do"
       tasks={[
         { title: "buy land", description: "" },
         { title: "build house", description: "" },

diff --git a/editor.planx.uk/src/@planx/components/TaskList/model.ts b/editor.planx.uk/src/@planx/components/TaskList/model.ts
@@ -2,7 +2,7 @@ import type { MoreInformation } from "../shared";
 import { parseMoreInformation } from "../shared";
 
 export interface TaskList extends MoreInformation {
-  title?: string;
+  title: string;
   description?: string;
   tasks: Array<Task>;
 }