fix(a11y): DrawBoundary link to switch between map and upload should always be enabled

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

@@ -370,3 +370,86 @@ test("appends to existing '_requestedFiles' value", async () => {
   expect(recommended).toEqual(["elevations.existing"]);
   expect(optional).toHaveLength(0);
 });
+
+test("submits data based on the page you continue onwards from", async () => {
+  // Context - Planning Officers don't want to receive both geojson and an uploaded locationPlan, only one or the other
+  //   But accessibility auditing says a user should always be able to toggle between draw & upload pages with their previous inputs retained
+
+  const handleSubmit = jest.fn();
+
+  // Setup file mock
+  const mockFileName = "test.png";
+  const mockFileURL =
+    "https://api.editor.planx.dev/file/private/gws7l5d1/test.png";
+
+  const file = new File(["test"], mockFileName, { type: "image/png" });
+
+  const mockedPost = mockedAxios.post.mockResolvedValueOnce({
+    data: {
+      fileType: "image/png",
+      fileUrl: mockFileURL,
+    },
+  });
+
+  // Previously submitted data is a good proxy for having previously fetched a title boundary and arriving to Draw with geojson in passport !
+  const previouslySubmittedData = {
+    "property.boundary.site": {
+      type: "Feature",
+      properties: {},
+      geometry: {
+        type: "Polygon",
+        coordinates: [
+          [
+            [-0.07643975531307334, 51.485847769536015],
+            [-0.0764006164494183, 51.4855918619739],
+            [-0.07587615567891393, 51.48561867140494],
+            [-0.0759899845402056, 51.48584045791162],
+            [-0.07643975531307334, 51.485847769536015],
+          ],
+        ],
+      },
+    },
+  };
+
+  const { user } = setup(
+    <DrawBoundary
+      dataFieldBoundary="property.boundary.site"
+      dataFieldArea="property.area.site"
+      description=""
+      descriptionForUploading=""
+      title="Draw a boundary"
+      titleForUploading="Upload a file"
+      handleSubmit={handleSubmit}
+      previouslySubmittedData={{
+        data: previouslySubmittedData,
+      }}
+    />,
+  );
+
+  // Toggle to file upload mode
+  await user.click(screen.getByTestId("upload-file-button"));
+
+  // Upload file
+  const input = screen.getByTestId("upload-input");
+  await user.upload(input, file);
+  expect(mockedPost).toHaveBeenCalled();
+
+  // Toggle back to map view after uploading
+  await user.click(screen.getByTestId("use-map-button"));
+
+  // Click "continue" from map page
+  await user.click(screen.getByTestId("continue-button"));
+  expect(handleSubmit).toHaveBeenCalledTimes(1);
+
+  // Confirm that file is NOT saved to passport, but geojson is
+  const submitted = handleSubmit.mock.calls[0][0];
+  expect(submitted.data).not.toHaveProperty(PASSPORT_UPLOAD_KEY);
+  expect(submitted.data["property.boundary.site"]).toEqual(
+    previouslySubmittedData["property.boundary.site"],
+  );
+
+  // DrawBoundary action captured correctly based on page
+  expect(submitted.data[PASSPORT_COMPONENT_ACTION_KEY]).toEqual(
+    DrawBoundaryUserAction.Draw,
+  );
+});

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

@@ -43,7 +43,7 @@ export default function Component(props: Props) {
     passport.data?.["property.boundary.title.area"];
   const [boundary, setBoundary] = useState<Boundary>(previousBoundary);
   const [area, setArea] = useState<number | undefined>(previousArea);
-  
+
   // Buffer applied to the address point to clip this map extent
   //   and applied to the site boundary and written to the passport to later clip the map extent in overview documents
   const bufferInMeters = area && area > 15000 ? 300 : 120;
@@ -100,7 +100,7 @@ export default function Component(props: Props) {
         const newPassportData: Store.userData["data"] = {};
 
         // Used the map
-        if (boundary && props.dataFieldBoundary) {
+        if (page === "draw" && boundary && props.dataFieldBoundary) {
           newPassportData[props.dataFieldBoundary] = boundary;
           newPassportData[`${props.dataFieldBoundary}.buffered`] = buffer(
             boundary,
@@ -131,7 +131,7 @@ export default function Component(props: Props) {
         }
 
         // Uploaded a file
-        if (slots.length) {
+        if (page === "upload" && slots.length) {
           newPassportData[PASSPORT_UPLOAD_KEY] = slots;
           newPassportData[PASSPORT_COMPONENT_ACTION_KEY] =
             DrawBoundaryUserAction.Upload;
@@ -150,7 +150,14 @@ export default function Component(props: Props) {
 
         props.handleSubmit?.({ data: { ...newPassportData } });
       }}
-      isValid={props.hideFileUpload ? true : Boolean(boundary || slots[0]?.url)}
+      isValid={
+        props.hideFileUpload
+          ? true
+          : Boolean(
+              (page === "draw" && boundary) ||
+                (page === "upload" && slots[0]?.url),
+            )
+      }
     >
       {getBody(bufferInMeters)}
     </Card>
@@ -180,11 +187,9 @@ export default function Component(props: Props) {
               </p>
               {!props.hideFileUpload && (
                 <p style={visuallyHidden}>
-                  If you prefer to upload a location plan file instead of using
-                  the map, please reset the map view first to erase the
-                  pre-populated boundary. Then click the "Upload a location plan
-                  instead" link below. A location plan can only be submitted as
-                  a digital boundary or file, not both.
+                  If you prefer to upload a file instead of using the
+                  interactive map, please click "Upload a location plan instead"
+                  below to navigate to the file upload.
                 </p>
               )}
               {/* @ts-ignore */}
@@ -229,7 +234,6 @@ export default function Component(props: Props) {
                 <Link
                   component="button"
                   onClick={() => setPage("upload")}
-                  disabled={Boolean(boundary)}
                   data-testid="upload-file-button"
                 >
                   <Typography variant="body1">
@@ -257,7 +261,7 @@ export default function Component(props: Props) {
             <Link
               component="button"
               onClick={() => setPage("draw")}
-              disabled={Boolean(slots[0]?.url)}
+              data-testid="use-map-button"
             >
               <Typography variant="body2">
                 Draw the boundary on a map instead