[go: up one dir, main page]

Skip to content

Fix form field accessibility validation 511716

What does this MR do and why?

What: This MR fixes a critical accessibility issue where form validation errors were not properly associated with their corresponding input fields, making it difficult for screen reader users to understand which field had an error.

Why: The form validation was displaying generic error messages like "This field is required" without programmatically linking them to the specific fields (Group name, Project name) that had errors. This violates WCAG 2.1 Success Criteria 3.3.1 (Error Identification) and prevents users with assistive technologies from understanding and recovering from form errors.

Changes made:

  • Added proper ARIA attributes (aria-describedby, aria-invalid) to form inputs
  • Implemented field-specific error messages that include the field name ("Group name is required")
  • Added role="alert" to error containers for immediate screen reader announcement
  • Enhanced client-side validation to trigger accessibility-compliant error states

References

Issue reference: 511716

Screenshots or screen recordings

Before After

image.png

image.png

Detailed view of accessibility tab:

image.png

Video recording of functionality:

Screen Recording 2025-07-28 at 7.31.29 AM.mov

How to set up and validate locally

  1. Ensure GDK is running in SaaS mode (https://docs.gitlab.com/ee/development/ee_features.html#simulate-a-saas-instance)
  2. Sign in as admin and ensure that signs ups are enabled, admins are not required to confirm new users and import settings are allowed:
    1. select Admin
      • Select Settings > General
      • Expand the Import and export settings section
    2. 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
  3. Reload your GDK
  4. At the login screen sign up for a new user account ( click "register")
  5. Enter in the new user information
  6. Complete screen at http://localhost:3000/users/sign_up/welcome and select "create a new project"
  7. The next screen should bring up the "Create or import your first project"
  8. Select the Import Tab
  9. 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.

Edited by Lina Fowler

Merge request reports

Loading