fix(a11y): enforce positive numbers by default on NumberInput (#2982)

editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx

@@ -11,6 +11,7 @@ import { useFormik } from "formik";
 import React from "react";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
+import OptionButton from "ui/editor/OptionButton";
 import RichTextInput from "ui/editor/RichTextInput";
 import Input from "ui/shared/Input";
 import InputRow from "ui/shared/InputRow";
@@ -74,6 +75,19 @@ export default function NumberInputComponent(props: Props): FCReturn {
               />
             </InputRowItem>
           </InputRow>
+          <InputRow>
+            <OptionButton
+              selected={formik.values.allowNegatives}
+              onClick={() => {
+                formik.setFieldValue(
+                  "allowNegatives",
+                  !formik.values.allowNegatives,
+                );
+              }}
+            >
+              Allow negative numbers to be input
+            </OptionButton>
+          </InputRow>
         </ModalSectionContent>
       </ModalSection>
       <MoreInformation

editor.planx.uk/src/@planx/components/NumberInput/Public.test.tsx

@@ -35,6 +35,37 @@ test("allows 0 to be input as a valid number", async () => {
   expect(handleSubmit).toHaveBeenCalledWith({ data: { num: 0 } });
 });
 
+test("requires a positive number to be input by default", async () => {
+  const handleSubmit = jest.fn();
+
+  const { user } = setup(
+    <NumberInput fn="doors" title="How many doors are you adding?" handleSubmit={handleSubmit} />,
+  );
+
+  expect(screen.getByRole("heading")).toHaveTextContent("How many doors are you adding?");
+
+  await user.type(screen.getByLabelText("How many doors are you adding?"), "-1");
+  await user.click(screen.getByTestId("continue-button"));
+
+  expect(screen.getByText("Enter a positive number")).toBeInTheDocument();
+  expect(handleSubmit).toHaveBeenCalledTimes(0);
+});
+
+test("allows negative numbers to be input when toggled on by editor", async () => {
+  const handleSubmit = jest.fn();
+
+  const { user } = setup(
+    <NumberInput fn="fahrenheit" title="What's the temperature?" handleSubmit={handleSubmit} allowNegatives={true} />,
+  );
+
+  expect(screen.getByRole("heading")).toHaveTextContent("What's the temperature?");
+
+  await user.type(screen.getByLabelText("What's the temperature?"), "-10");
+  await user.click(screen.getByTestId("continue-button"));
+
+  expect(handleSubmit).toHaveBeenCalledWith({ data: { fahrenheit: -10 } });
+});
+
 test("requires a value before being able to continue", async () => {
   const handleSubmit = jest.fn();
 

editor.planx.uk/src/@planx/components/NumberInput/Public.tsx

@@ -37,11 +37,20 @@ export default function NumberInputComponent(props: Props): FCReturn {
         .required("Enter your answer before continuing")
         .test({
           name: "not a number",
-          message: "Enter a number",
+          message: (() => {
+            if (!props.allowNegatives) {
+              return "Enter a positive number";
+            }
+
+            return "Enter a number";
+          })(),
           test: (value: string | undefined) => {
             if (!value) {
               return false;
             }
+            if (!props.allowNegatives && value.startsWith("-")) {
+              return false;
+            }
             return value === "0" ? true : Boolean(parseNumber(value));
           },
         }),

editor.planx.uk/src/@planx/components/NumberInput/model.ts

@@ -5,6 +5,7 @@ export interface NumberInput extends MoreInformation {
   description?: string;
   fn?: string;
   units?: string;
+  allowNegatives?: boolean;
 }
 
 export type UserData = number;
@@ -24,5 +25,6 @@ export const parseNumberInput = (
   description: data?.description,
   fn: data?.fn || "",
   units: data?.units,
+  allowNegatives: data?.allowNegatives || false,
   ...parseMoreInformation(data),
 });