Fix Create Group and Import form error messages
What does this MR do and why?
Fix Create Group and Import form error messages
The Create Group and Import form messages had errors that were not being announced properly by screen readers. Added a unique ID with high entropy to the form error messages, and added aria-describedby to each input when an :invalid state was detected. Also added a translated custom message for both views.
This commit also improves the error message posture on the Sign Up form, because it uses the same error routine.
Changelog: fixed
EE: true
References
MR closes https://gitlab.com/gitlab-org/gitlab/-/issues/511716
Screenshots or screen recordings
Screenshot showing the newly mapped relationship on Sign Up form
Movie showing VoiceOver testing create-project-aria-describedby
How to set up and validate locally
- Ensure GDK is running in SaaS mode (https://docs.gitlab.com/ee/development/ee_features.html#simulate-a-saas-instance)
- Sign in as admin and ensure that signs ups are enabled, admins are not required to confirm new users and import settings are allowed:
- select Admin
- Select Settings > General
- Expand the Import and export settings section
-
Enable specific import sources - In the Import and export settings section, you need to:
- Select each of the Import sources you want to allow (this determines which import options will be visible)
- Select Save changes
- select Admin
- Reload your GDK
- At the login screen sign up for a new user account ( click "register")
- Enter in the new user information
- Complete screen at http://localhost:3000/users/sign_up/welcome and select "create a new project"
- The next screen should bring up the "Create or import your first project"
- Select the Import Tab
- Delete the group name if there is one and then click off and the validation should appear.
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.