fix(a11y): Add labels to all feedback form inputs

[DafyddLlyr]

What does this PR do?

• Address accessibility report issue "Label and Accessible Name" (page 43)
• Adds a label to each input used in the feedback from instead of conditionally relying on the title for this

This approach is very much up for discussion, I've hopefully explained my thought process below.

Problem

A text area was found to have an accessible name that does not match the one that is provided visually. This can be found across the service; however, this instance relates to the text area below the ‘please help us to improve the service by sharing feedback’. The visual label has not been programmatically associated with the related text area, and so the information presented visually is not relayed to screen reader users navigating out of context.

<textarea 
  aria-describedby="comment-title" 
  name="userComment" 
  required="" 
  // Hardcoded aria-label is the issue
  aria-label="Leave your feedback"
  class="MuiInputBase-input MuiInputBase-inputMultiline css-10oer18" 
  style="height: 29px; overflow: hidden;">
 </textarea>

Why I went for this approach

There are a few ways this issue could be addressed. The report suggests wrapping making the title (e.g. "Please help us to improve this service by sharing feedback" a <label> element and attaching to the input using id and for properties.

I've opted not to do this, and instead to always add a label for each input, separate from the title.

Pros

• It's consistent across all modes the feedback component can take. Currently labels are used where multiple inputs are used, but not single inputs (apart from "Report an inaccuracy").
• Relying on an external title to label our form component is quite unexpected
  • The FeedbackForm component cannot pass automated accessibility tests unless accompanied by another label component
  • We rely on all future users of this component to know and understand this
• Passing a title component into the form ends up being fairly complex / invovled
  • It needs to have different styles in different contexts (e.g. icon or no icon, font size)
  • It needs the component={label} prop (or aria-labelledby) if there is only a single input
• I think the title and label are actually two different things in reality

Cons

• More text / cruft for the user
• Bad copy written by me!

Thoughts most welcome! 😄

[github-actions]

Removed vultr server and associated DNS entries

[DafyddLlyr]

Label and accessible name [A]

[Mike-Heneghan]

This looks great, thanks for resolving the issue and for the clear reasoning behind it!

There's a small non-blocking comment around removing stories about the unlabelled input which doesn't exist any more.