WSTEAM1-1017: Initiate journey across Uploader states

[Isabella-Mitchell]

Resolves JIRA WSTEAM1-1017 - Configure functionality for the journey across states (Form, uploading & Success)

Overall changes

Supporting the users journey across the various states of the uploader form. Default > Uploading > Success/ Error. Default > Validation Errors > Uploading > Success/ Error.

Code changes

• Keep Uploading state on screen for min 3 seconds (have implemented a basic approach using 3 second timeout).
• Prefix page title with 'Uploading' on screen change. Remove on Success screen. (We already do this on the Error screen).
• Use useRef to take users focus to top of page on screen change
• Add forwardRef to Heading/ Text component to allow this.

Note I have added some basic unit tests to the Form. I'm looking at adding unit tests to the Form Context Provider though I don't think this should hold up the progress of this ticket.

Testing

1. Run PR locally
2. Visit http://localhost.bbc.com:7081/somali/send/u130092370?renderer_env=test
3. Check form does not submit when empty
4. Check form does not submit with errors, and form content is not wiped
5. Check form goes to Uploading screen if there are no validation errors
6. Check that Page (tab) title updates on screen change
7. Check the process with a screen reader and check that 'Uploading' 'Error and 'Success' heading is announced on screen change.
   (Note the form submission will error - check Slack for instructions on how to get form to submit successfully)

Helpful Links

Add Links to useful resources related to this PR if applicable.

Coding Standards

Repository use guidelines

[amoore108]

Looks great 👍

Just as a small tidy up, could this bit be removed:

simorgh/ws-nextjs-app/pages/[service]/send/[id]/FormScreen/index.tsx

Lines 73 to 79 in 2cfaad1

	{submissionError && (
	<div css={styles.submissionError}>
	{`Error: ${submissionError.status} - ${submissionError.code} - ${submissionError.message}`}
	<br />
	{`Recoverable: ${submissionError.isRecoverable}`}
	</div>
	)}

Don't think we'll need this, at least for now as it was more for debugging.

[greenc05]

"Prefix page title with 'Uploading' on screen change. Remove on Success screen. (We already do this on the Error screen)." Do we add something on the success screen so the title is different to the start page? @Isabella-Mitchell

[amoore108]

"Prefix page title with 'Uploading' on screen change. Remove on Success screen. (We already do this on the Error screen)." Do we add something on the success screen so the title is different to the start page? @Isabella-Mitchell

I've updated this to use the confirmationStepTitle value from the translations, which is the same value used on the H1 for the success screen.