Attach the form errors to the fields that may have generated them
What does this MR do and why?
In https://gitlab.com/gitlab-org/gitlab/-/issues/519047#note_2935967470, Paulina identified some fixes we could apply to help assistive technologies.
While these form errors are already compliant with accessibility standards, indicating that the visible banner is the accessibility descriptor for the fields may help assistive technologies to properly read the error out.
References
Screenshots or screen recordings
There are no visual changes associated with this MR.
How to set up and validate locally
- In a project, use the left nav to go to Merge Requests
- Click "New merge request"
- Click "Compare branches and continue"
- Inspect the HTML to see that
aria-describedbyis on the inputs and points to the same ID as the error alert.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Note that no tests are added because everything here is standard HAML, Rails, HTML, and Vue. The existing tests are checking that these parts are rendering properly. Testing these new additions would be testing the core value-add of Rails/Vue.