From 34d34dbb284b702193e19afd9e796961e054fa45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Tue, 2 Apr 2024 12:37:15 +0100
Subject: [PATCH 1/5] fix: Move back button out of main container

---
 .../src/pages/Preview/Questions.tsx           | 36 ++++++++++---------
 .../src/pages/layout/PublicLayout.tsx         | 10 +++---
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/editor.planx.uk/src/pages/Preview/Questions.tsx b/editor.planx.uk/src/pages/Preview/Questions.tsx
index f9a10c74ec..0870daafb2 100644
--- a/editor.planx.uk/src/pages/Preview/Questions.tsx
+++ b/editor.planx.uk/src/pages/Preview/Questions.tsx
@@ -130,22 +130,22 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => {
 
   const handleSubmit =
     (id: string): handleSubmit =>
-    (userData) => {
-      const {
-        data = undefined,
-        answers = [],
-        auto = false,
-      } = (() => {
-        try {
-          const { answers = [], data, auto } = userData as any;
-          return { answers: answers.filter(Boolean), data, auto };
-        } catch (err) {
-          return {};
-        }
-      })();
-
-      record(id, { answers, data, auto });
-    };
+      (userData) => {
+        const {
+          data = undefined,
+          answers = [],
+          auto = false,
+        } = (() => {
+          try {
+            const { answers = [], data, auto } = userData as any;
+            return { answers: answers.filter(Boolean), data, auto };
+          } catch (err) {
+            return {};
+          }
+        })();
+
+        record(id, { answers, data, auto });
+      };
 
   const goBack = useCallback(() => {
     const previous = previousCard(node);
@@ -166,7 +166,7 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => {
   );
 
   return (
-    <Box width="100%" role="main">
+    <Box width="100%" >
       <BackBar hidden={!showBackBar}>
         <Container maxWidth={false}>
           <BackButton
@@ -183,6 +183,8 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => {
       {node && (
         <ErrorBoundary FallbackComponent={ErrorFallback}>
           <Node
+            id="main-content"
+            role="main"
             node={node}
             key={node.id}
             handleSubmit={handleSubmit(node.id!)}
diff --git a/editor.planx.uk/src/pages/layout/PublicLayout.tsx b/editor.planx.uk/src/pages/layout/PublicLayout.tsx
index b22d450c1d..bb854c417e 100644
--- a/editor.planx.uk/src/pages/layout/PublicLayout.tsx
+++ b/editor.planx.uk/src/pages/layout/PublicLayout.tsx
@@ -52,10 +52,10 @@ const PublicFooter: React.FC = () => {
 
   const globalFooterItems = globalSettings?.footerContent
     ? Object.entries(globalSettings?.footerContent).map(([slug, item]) => ({
-        title: item.heading,
-        content: item.content,
-        href: makeHref(slug),
-      }))
+      title: item.heading,
+      content: item.content,
+      href: makeHref(slug),
+    }))
     : [];
 
   const footerItems = [...flowSettingsContent, ...globalFooterItems].filter(
@@ -96,7 +96,7 @@ const PublicLayout: React.FC<PropsWithChildren> = ({ children }) => {
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={teamMUITheme}>
         <Header />
-        <MainContainer id="main-content">
+        <MainContainer>
           <ErrorBoundary FallbackComponent={ErrorFallback}>
             {children}
           </ErrorBoundary>

From 812524d122ee9a9c815e9d48ad4f4974c93b2719 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Tue, 2 Apr 2024 12:37:46 +0100
Subject: [PATCH 2/5] fix: Favour main element of main role

---
 editor.planx.uk/src/pages/Preview/ResumePage.tsx    | 2 +-
 editor.planx.uk/src/pages/Preview/SaveAndReturn.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor.planx.uk/src/pages/Preview/ResumePage.tsx b/editor.planx.uk/src/pages/Preview/ResumePage.tsx
index f06c14bca0..35db51f147 100644
--- a/editor.planx.uk/src/pages/Preview/ResumePage.tsx
+++ b/editor.planx.uk/src/pages/Preview/ResumePage.tsx
@@ -60,7 +60,7 @@ export const EmailRequired: React.FC<{ setEmail: (email: string) => void }> = ({
   });
 
   return (
-    <Box width="100%" role="main">
+    <Box width="100%" component="main">
       <Card handleSubmit={formik.handleSubmit}>
         <QuestionHeader
           title="Resume your application"
diff --git a/editor.planx.uk/src/pages/Preview/SaveAndReturn.tsx b/editor.planx.uk/src/pages/Preview/SaveAndReturn.tsx
index fc5757f06b..4adeb11358 100644
--- a/editor.planx.uk/src/pages/Preview/SaveAndReturn.tsx
+++ b/editor.planx.uk/src/pages/Preview/SaveAndReturn.tsx
@@ -33,7 +33,7 @@ export const ConfirmEmail: React.FC<{
   });
 
   return (
-    <Box width="100%" role="main">
+    <Box width="100%" component="main">
       <Card handleSubmit={formik.handleSubmit}>
         <QuestionHeader
           title="Enter your email address"

From 3153a02971107a208969b3074abbcd3e62360d44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Tue, 2 Apr 2024 12:38:05 +0100
Subject: [PATCH 3/5] fix: Single main role

---
 .../src/@planx/components/shared/Preview/MoreInfo.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfo.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfo.tsx
index 4d06afe640..45c8768c11 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfo.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfo.tsx
@@ -92,7 +92,7 @@ const MoreInfo: React.FC<IMoreInfo> = ({ open, children, handleClose }) => (
         <CloseIcon />
       </IconButton>
     </CloseButton>
-    <Container maxWidth={false} role="main" sx={{ bgcolor: "white" }}>
+    <Container maxWidth={false} sx={{ bgcolor: "white" }}>
       <DrawerContent>{children}</DrawerContent>
     </Container>
     <MoreInfoFeedbackComponent />

From b00d982cabf70c038afa0edfe2e40241b0acdf4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Tue, 2 Apr 2024 15:02:46 +0100
Subject: [PATCH 4/5] test: Fix failing e2e test

---
 e2e/tests/ui-driven/src/create-flow/create-flow.spec.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/e2e/tests/ui-driven/src/create-flow/create-flow.spec.ts b/e2e/tests/ui-driven/src/create-flow/create-flow.spec.ts
index 6d7229a71c..b098fc520e 100644
--- a/e2e/tests/ui-driven/src/create-flow/create-flow.spec.ts
+++ b/e2e/tests/ui-driven/src/create-flow/create-flow.spec.ts
@@ -199,10 +199,7 @@ test.describe("Navigation", () => {
       page.locator("h3", { hasText: "Yes! this is a test" }),
     ).toBeVisible();
 
-    await page
-      .locator("#main-content")
-      .getByRole("button", { name: "Back" })
-      .click();
+    await page.getByTestId("backButton").click();
 
     await answerQuestion({ page, title: "Is this a test?", answer: "No" });
     await clickContinue({ page });

From 0f01730b33ba909b525e74f9d7e0bc31d74ac2f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Thu, 4 Apr 2024 08:32:47 +0100
Subject: [PATCH 5/5] fix: Ensure main component is always rendered

---
 .../src/pages/Preview/Questions.tsx           | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/editor.planx.uk/src/pages/Preview/Questions.tsx b/editor.planx.uk/src/pages/Preview/Questions.tsx
index 0870daafb2..4aaaaf490c 100644
--- a/editor.planx.uk/src/pages/Preview/Questions.tsx
+++ b/editor.planx.uk/src/pages/Preview/Questions.tsx
@@ -130,22 +130,22 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => {
 
   const handleSubmit =
     (id: string): handleSubmit =>
-      (userData) => {
-        const {
-          data = undefined,
-          answers = [],
-          auto = false,
-        } = (() => {
-          try {
-            const { answers = [], data, auto } = userData as any;
-            return { answers: answers.filter(Boolean), data, auto };
-          } catch (err) {
-            return {};
-          }
-        })();
-
-        record(id, { answers, data, auto });
-      };
+    (userData) => {
+      const {
+        data = undefined,
+        answers = [],
+        auto = false,
+      } = (() => {
+        try {
+          const { answers = [], data, auto } = userData as any;
+          return { answers: answers.filter(Boolean), data, auto };
+        } catch (err) {
+          return {};
+        }
+      })();
+
+      record(id, { answers, data, auto });
+    };
 
   const goBack = useCallback(() => {
     const previous = previousCard(node);
@@ -166,7 +166,7 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => {
   );
 
   return (
-    <Box width="100%" >
+    <Box width="100%">
       <BackBar hidden={!showBackBar}>
         <Container maxWidth={false}>
           <BackButton
@@ -181,15 +181,15 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => {
       </BackBar>
 
       {node && (
-        <ErrorBoundary FallbackComponent={ErrorFallback}>
-          <Node
-            id="main-content"
-            role="main"
-            node={node}
-            key={node.id}
-            handleSubmit={handleSubmit(node.id!)}
-          />
-        </ErrorBoundary>
+        <Box component="main" id="main-content">
+          <ErrorBoundary FallbackComponent={ErrorFallback}>
+            <Node
+              node={node}
+              key={node.id}
+              handleSubmit={handleSubmit(node.id!)}
+            />
+          </ErrorBoundary>
+        </Box>
       )}
     </Box>
   );