WSTEAM1-975: Update ARIA Attributes

[shayneahchoon]

Resolves JIRA WSTEAM1-975

Overall changes

Updates components to populate these aria attributes dynamically:

• aria-required
• aria-describedby
• aria-invalid

Code changes

• FormContext changed to store the number of times a user has attempted a submission.
• FormField state changed to store whether a user has previously made and invalid entry.
• FormComponents updated to include said dynamic attributes.

Testing

1. List the steps used to test this PR.

Helpful Links

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

Coding Standards

Repository use guidelines

[Isabella-Mitchell]

Heya - looks good! I just checked the storybook permalink with a screen reader and it sounds good too!

There is one thing that looks to be missing - but it might be outside of the scope of this ticket. We should be indicating optional fields via the label text as per the GEL guidelines (So required fields are only known to the user on submission via an error message, but optional fields are known to the user in the default state via the label text).

Is this easy to add? Or should we flag to Harry this needs to be a follow up task?

[shayneahchoon]

Heya - looks good! I just checked the storybook permalink with a screen reader and it sounds good too!

There is one thing that looks to be missing - but it might be outside of the scope of this ticket. We should be indicating optional fields via the label text as per the GEL guidelines (So required fields are only known to the user on submission via an error message, but optional fields are known to the user in the default state via the label text).

Is this easy to add? Or should we flag to Harry this needs to be a follow up task?

Heya, yessss I was going to ask Harry about it, because the GEL Guidelines say that the optional field should be indicated in the label itself, rather than using the 'required' attribute. So I'm not sure if that's something to do with editorial instead of Simorgh itself.

[Isabella-Mitchell]

Heya - looks good! I just checked the storybook permalink with a screen reader and it sounds good too!
There is one thing that looks to be missing - but it might be outside of the scope of this ticket. We should be indicating optional fields via the label text as per the GEL guidelines (So required fields are only known to the user on submission via an error message, but optional fields are known to the user in the default state via the label text).
Is this easy to add? Or should we flag to Harry this needs to be a follow up task?

Heya, yessss I was going to ask Harry about it, because the GEL Guidelines say that the optional field should be indicated in the label itself, rather than using the 'required' attribute. So I'm not sure if that's something to do with editorial instead of Simorgh itself.

Thanks for bringing this up in standup - can see we have another subtask for this so we can cover that there. :)

[amoore108]

Great work here 🙏 Thanks for taking this on, definitely a tricky one to solve but sets us up really well for the error UX stuff!