feat(v2): read out submission confirmation for screen readers on success

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',

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

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}

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}

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"