fix(a11y): continue button should always be enabled on FindProperty & DrawBoundary

editor.planx.uk/src/@planx/components/FindProperty/Public/Autocomplete.tsx

@@ -10,6 +10,7 @@ import find from "lodash/find";
 import { parse, toNormalised } from "postcode";
 import React, { useEffect, useState } from "react";
 import InputLabel from "ui/public/InputLabel";
+import { ErrorWrapperRoot } from "ui/shared/ErrorWrapper";
 import Input from "ui/shared/Input";
 
 import type { SiteAddress } from "../model";
@@ -22,7 +23,11 @@ interface Option extends SiteAddress {
 interface PickOSAddressProps {
   setAddress: React.Dispatch<React.SetStateAction<SiteAddress | undefined>>;
   initialPostcode?: string;
+  showPostcodeError: boolean;
+  setShowPostcodeError: React.Dispatch<React.SetStateAction<boolean>>;
   initialSelectedAddress?: Option;
+  showAddressSelectError: boolean;
+  setShowAddressSelectError: React.Dispatch<React.SetStateAction<boolean>>;
   id?: string;
   description?: string;
 }
@@ -55,7 +60,6 @@ export default function PickOSAddress(props: PickOSAddressProps): FCReturn {
   const [selectedOption, setSelectedOption] = useState<Option | undefined>(
     props.initialSelectedAddress ?? undefined,
   );
-  const [showPostcodeError, setShowPostcodeError] = useState<boolean>(false);
 
   // Fetch blpu_codes records so that we can join address CLASSIFICATION_CODE to planx variable
   const { data: blpuCodes } = useQuery(FETCH_BLPU_CODES, {
@@ -123,7 +127,7 @@ export default function PickOSAddress(props: PickOSAddressProps): FCReturn {
   }, [sanitizedPostcode, selectedOption]);
 
   const handleCheckPostcode = () => {
-    if (!sanitizedPostcode) setShowPostcodeError(true);
+    if (!sanitizedPostcode) props.setShowPostcodeError(true);
   };
 
   // XXX: If you press a key on the keyboard, you expect something to show up on the screen,
@@ -159,7 +163,7 @@ export default function PickOSAddress(props: PickOSAddressProps): FCReturn {
           id="postcode-input"
           value={postcode || ""}
           errorMessage={
-            showPostcodeError && !sanitizedPostcode
+            props.showPostcodeError && !sanitizedPostcode
               ? "Enter a valid UK postcode"
               : ""
           }
@@ -173,7 +177,7 @@ export default function PickOSAddress(props: PickOSAddressProps): FCReturn {
             maxLength: 8,
             "aria-describedby": [
               props.description ? DESCRIPTION_TEXT : "",
-              showPostcodeError && !sanitizedPostcode
+              props.showPostcodeError && !sanitizedPostcode
                 ? `${ERROR_MESSAGE}-${props.id}`
                 : "",
             ]
@@ -183,16 +187,28 @@ export default function PickOSAddress(props: PickOSAddressProps): FCReturn {
         />
       </InputLabel>
       {sanitizedPostcode && (
-        /* @ts-ignore */
-        <address-autocomplete
-          id="address-autocomplete"
-          data-testid="address-autocomplete-web-component"
-          postcode={sanitizedPostcode}
-          initialAddress={selectedOption?.title || ""}
-          osProxyEndpoint={`${process.env.REACT_APP_API_URL}/proxy/ordnance-survey`}
-          arrowStyle="light"
-          labelStyle="static"
-        />
+        <ErrorWrapperRoot
+          error={
+            !selectedOption && props.showAddressSelectError
+              ? "Select an address to continue"
+              : undefined
+          }
+          role="alert"
+          data-testid="autocomplete-error-wrapper"
+        >
+          {
+            /* @ts-ignore */
+            <address-autocomplete
+              id="address-autocomplete"
+              data-testid="address-autocomplete-web-component"
+              postcode={sanitizedPostcode}
+              initialAddress={selectedOption?.title || ""}
+              osProxyEndpoint={`${process.env.REACT_APP_API_URL}/proxy/ordnance-survey`}
+              arrowStyle="light"
+              labelStyle="static"
+            />
+          }
+        </ErrorWrapperRoot>
       )}
     </AutocompleteWrapper>
   );

editor.planx.uk/src/@planx/components/FindProperty/Public/Map.tsx

@@ -27,6 +27,8 @@ interface PlotNewAddressProps {
   id?: string;
   description?: string;
   descriptionLabel?: string;
+  showSiteDescriptionError: boolean;
+  setShowSiteDescriptionError: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 type Coordinates = {
@@ -55,8 +57,6 @@ export default function PlotNewAddress(props: PlotNewAddressProps): FCReturn {
   const [siteDescription, setSiteDescription] = useState<string | null>(
     props.initialProposedAddress?.title ?? null,
   );
-  const [showSiteDescriptionError, setShowSiteDescriptionError] =
-    useState<boolean>(false);
 
   const [environment, boundaryBBox] = useStore((state) => [
     state.previewEnvironment,
@@ -99,7 +99,7 @@ export default function PlotNewAddress(props: PlotNewAddressProps): FCReturn {
   }, [coordinates, siteDescription]);
 
   const handleSiteDescriptionCheck = () => {
-    if (!siteDescription) setShowSiteDescriptionError(true);
+    if (!siteDescription) props.setShowSiteDescriptionError(true);
   };
 
   const handleSiteDescriptionInputChange = (
@@ -170,7 +170,7 @@ export default function PlotNewAddress(props: PlotNewAddressProps): FCReturn {
             id={`${props.id}-siteDescription`}
             value={siteDescription || ""}
             errorMessage={
-              showSiteDescriptionError && !siteDescription
+              props.showSiteDescriptionError && !siteDescription
                 ? `Enter a site description such as "Land at..."`
                 : ""
             }
@@ -182,7 +182,7 @@ export default function PlotNewAddress(props: PlotNewAddressProps): FCReturn {
             inputProps={{
               "aria-describedby": [
                 props.description ? DESCRIPTION_TEXT : "",
-                showSiteDescriptionError && !siteDescription
+                props.showSiteDescriptionError && !siteDescription
                   ? `${ERROR_MESSAGE}-${props.id}`
                   : "",
               ]

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

@@ -310,6 +310,10 @@ describe("picking an OS address", () => {
 
     await user.type(await screen.findByLabelText("Postcode"), "SE5{enter}");
     expect(screen.getByText("Enter a valid UK postcode")).toBeInTheDocument();
+    expect(screen.getByTestId("error-wrapper")).toHaveAttribute(
+      "role",
+      "alert",
+    );
   });
 
   it("updates the address-autocomplete props when the postcode is changed", async () => {
@@ -413,6 +417,10 @@ describe("plotting a new address that does not have a uprn yet", () => {
     expect(
       screen.getByText(`Enter a site description such as "Land at..."`),
     ).toBeInTheDocument();
+    expect(screen.getByTestId("error-wrapper")).toHaveAttribute(
+      "role",
+      "alert",
+    );
 
     // expect continue to be disabled because we have incomplete address details
     expect(screen.getByTestId("continue-button")).toBeDisabled();

editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx

@@ -56,6 +56,15 @@ function Component(props: Props) {
   const [titleBoundary, setTitleBoundary] = useState<Feature | undefined>();
   const [boundary, setBoundary] = useState<GeoJSONObject | undefined>();
 
+  const [showPostcodeError, setShowPostcodeError] = useState<boolean>(false);
+  const [showAddressSelectError, setShowAddressSelectError] =
+    useState<boolean>(false);
+  const [showDataFetchingError, setShowDataFetchingError] =
+    useState<boolean>(false);
+  const [showMapError, setShowMapError] = useState<boolean>(false);
+  const [showSiteDescriptionError, setShowSiteDescriptionError] =
+    useState<boolean>(false);
+
   const teamSettings = useStore((state) => state.teamSettings);
 
   // Use the address point to fetch the Local Authority District(s) & region via Digital Land
@@ -142,6 +151,8 @@ function Component(props: Props) {
             id={props.id}
             description={props.newAddressDescription || ""}
             descriptionLabel={props.newAddressDescriptionLabel || ""}
+            showSiteDescriptionError={showSiteDescriptionError}
+            setShowSiteDescriptionError={setShowSiteDescriptionError}
           />
         </>
       );
@@ -159,10 +170,14 @@ function Component(props: Props) {
               previouslySubmittedData?._address?.source === "os" &&
               previouslySubmittedData?._address.postcode
             }
+            showPostcodeError={showPostcodeError}
+            setShowPostcodeError={setShowPostcodeError}
             initialSelectedAddress={
               previouslySubmittedData?._address?.source === "os" &&
               previouslySubmittedData?._address
             }
+            showAddressSelectError={showAddressSelectError}
+            setShowAddressSelectError={setShowAddressSelectError}
             id={props.id}
             description={props.description || ""}
           />
@@ -198,8 +213,29 @@ function Component(props: Props) {
 
   return (
     <Card
-      isValid={Boolean(address) && !isValidating}
+      isValid
       handleSubmit={() => {
+        // Handle validation (eventually formalise with yup schema?)
+        if (page === "os-address") {
+          if (!address) {
+            setShowPostcodeError(true);
+            setShowAddressSelectError(true);
+            return;
+          } else if (!localAuthorityDistricts) {
+            setShowDataFetchingError(true);
+            return;
+          }
+        } else if (page === "new-address") {
+          if (!address?.x || !address.y) {
+            setShowMapError(true);
+            return;
+          } else if (!address?.title) {
+            setShowSiteDescriptionError(true);
+            return;
+          }
+        }
+
+        // Format passport data
         if (address) {
           const newPassportData: Store.userData["data"] = {};
           newPassportData["_address"] = address;

editor.planx.uk/src/ui/shared/ErrorWrapper.tsx

@@ -15,7 +15,7 @@ export interface Props {
   role?: "alert" | "status";
 }
 
-const Root = styled(Box, {
+export const ErrorWrapperRoot = styled(Box, {
   shouldForwardProp: (prop) => prop !== "error",
 })<BoxProps & { error: Props["error"] }>(({ theme, error }) => ({
   ...(error && {
@@ -52,11 +52,11 @@ export default function ErrorWrapper({
   }, [error, trackEvent]);
 
   return (
-    <Root error={error} role={role} data-testid="error-wrapper">
+    <ErrorWrapperRoot error={error} role={role} data-testid="error-wrapper">
       <ErrorText id={inputId} data-testid={inputId} variant="body1">
         {error && error}
       </ErrorText>
       {children || null}
-    </Root>
+    </ErrorWrapperRoot>
   );
 }