From 02d6b6e7719ef0016cde109aaa0344381affeaf1 Mon Sep 17 00:00:00 2001
From: Kar Rui <karrui.lau@gmail.com>
Date: Wed, 21 Sep 2022 16:49:27 +0800
Subject: [PATCH] feat: read out submission confirmation for screen readers on
 success

---
 .../BuilderAndDesignContent/EndPageView.tsx   |  1 +
 .../EditEndPageDrawer/EditEndPage.tsx         |  5 ++-
 .../components/FormEndPage/FormEndPage.tsx    |  7 +++-
 .../FormEndPage/FormEndPageContainer.tsx      |  1 +
 .../FormEndPage/components/EndPageBlock.tsx   | 34 ++++++++++++++++---
 5 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/EndPageView.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/EndPageView.tsx
index 2782ffecf7..7319b4b04e 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/EndPageView.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/EndPageView.tsx
@@ -66,6 +66,7 @@ export const EndPageView = ({ ...props }: FlexProps): JSX.Element => {
           w="100%"
         >
           <EndPageBlock
+            formTitle={form?.title}
             endPage={endPage ?? { title: '', buttonText: '' }}
             submissionData={{
               id: form?._id ?? 'Submission ID',
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditEndPageDrawer/EditEndPage.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditEndPageDrawer/EditEndPage.tsx
index 0881c2e6cc..706079383b 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditEndPageDrawer/EditEndPage.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditEndPageDrawer/EditEndPage.tsx
@@ -125,7 +125,10 @@ export const EndPageBuilderInput = ({
           isInvalid={!!errors.title}
         >
           <FormLabel isRequired>Title</FormLabel>
-          <Input {...register('title', { required: REQUIRED_ERROR })} />
+          <Input
+            autoFocus
+            {...register('title', { required: REQUIRED_ERROR })}
+          />
           <FormErrorMessage>{errors.title?.message}</FormErrorMessage>
         </FormControl>
         <FormControl
diff --git a/frontend/src/features/public-form/components/FormEndPage/FormEndPage.tsx b/frontend/src/features/public-form/components/FormEndPage/FormEndPage.tsx
index 87ed247a62..798dea40e8 100644
--- a/frontend/src/features/public-form/components/FormEndPage/FormEndPage.tsx
+++ b/frontend/src/features/public-form/components/FormEndPage/FormEndPage.tsx
@@ -9,6 +9,7 @@ import { FeedbackBlock, FeedbackFormInput } from './components/FeedbackBlock'
 import { ThankYouSvgr } from './components/ThankYouSvgr'
 
 export interface FormEndPageProps {
+  formTitle: FormDto['title']
   endPage: FormDto['endPage']
   submissionData: SubmissionData
   handleSubmitFeedback: (inputs: FeedbackFormInput) => void
@@ -34,7 +35,11 @@ export const FormEndPage = ({
           w="100%"
           divider={<StackDivider />}
         >
-          <EndPageBlock {...endPageProps} colorTheme={colorTheme} />
+          <EndPageBlock
+            focusOnMount
+            {...endPageProps}
+            colorTheme={colorTheme}
+          />
           {isFeedbackSubmitted ? null : (
             <FeedbackBlock
               colorTheme={colorTheme}
diff --git a/frontend/src/features/public-form/components/FormEndPage/FormEndPageContainer.tsx b/frontend/src/features/public-form/components/FormEndPage/FormEndPageContainer.tsx
index 7317f8a39c..8d00660139 100644
--- a/frontend/src/features/public-form/components/FormEndPage/FormEndPageContainer.tsx
+++ b/frontend/src/features/public-form/components/FormEndPage/FormEndPageContainer.tsx
@@ -65,6 +65,7 @@ export const FormEndPageContainer = ({
       <FormEndPage
         colorTheme={form.startPage.colorTheme}
         submissionData={submissionData}
+        formTitle={form.title}
         endPage={form.endPage}
         isFeedbackSubmitted={isFeedbackSubmitted}
         handleSubmitFeedback={handleSubmitFeedback}
diff --git a/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx b/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx
index e6c8576521..2ab9f88400 100644
--- a/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx
+++ b/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx
@@ -1,4 +1,5 @@
-import { Box, Flex, Stack, Text } from '@chakra-ui/react'
+import { useEffect, useMemo, useRef } from 'react'
+import { Box, Flex, Stack, Text, VisuallyHidden } from '@chakra-ui/react'
 
 import { FormColorTheme, FormDto } from '~shared/types/form'
 
@@ -7,22 +8,45 @@ import Button from '~components/Button'
 import { SubmissionData } from '~features/public-form/PublicFormContext'
 
 export interface EndPageBlockProps {
+  formTitle: FormDto['title'] | undefined
   endPage: FormDto['endPage']
   submissionData: SubmissionData
   colorTheme?: FormColorTheme
+  focusOnMount?: boolean
 }
 
 export const EndPageBlock = ({
+  formTitle,
   endPage,
   submissionData,
   colorTheme = FormColorTheme.Blue,
+  focusOnMount,
 }: EndPageBlockProps): JSX.Element => {
+  const focusRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (focusOnMount) {
+      focusRef.current?.focus()
+    }
+  }, [focusOnMount])
+
+  const submittedAriaText = useMemo(() => {
+    if (formTitle) {
+      return `You have successfully submitted your response for ${formTitle}.`
+    }
+    return 'You have successfully submitted your response.'
+  }, [formTitle])
+
   return (
     <Flex flexDir="column">
-      <Stack spacing="1rem">
-        <Text as="h2" textStyle="h2" textColor="secondary.700">
-          {endPage.title}
-        </Text>
+      <Stack tabIndex={-1} ref={focusRef} spacing="1rem">
+        <Box>
+          <VisuallyHidden aria-live="assertive">
+            {submittedAriaText}
+          </VisuallyHidden>
+          <Text as="h2" textStyle="h2" textColor="secondary.700">
+            {endPage.title}
+          </Text>
+        </Box>
         {endPage.paragraph ? (
           <Text
             color="secondary.500"