[Accessibility] Ensure error messages are associated with form fields

[magic-peach]

Overview

Error messages for form fields (like invalid trim values) should be programmatically associated with their fields using aria-describedby so screen readers announce them.

Implementation

// TrimControl example
<input
  id="trim-start"
  aria-describedby="trim-start-error"
  aria-invalid={hasError}
/>
<p id="trim-start-error" role="alert" hidden={!hasError}>
  {errorMessage}
</p>

Acceptance Criteria

• All validation errors linked to fields with aria-describedby
• Error messages use role='alert'
• aria-invalid set on errored inputs

[nan341]

Hi, I would like to work on this issue under GSSoC 2026. Could you please assign it to me?

[MansimranKaurBedi0]

Hi @maintainers, I would like to work on this issue under GSSoC'26. This aligns with full-stack development interest. Please assign it to me.

[mahema-14]

Hey @magic-peach!
I would love to take this one up for GSSoC'26!. I went through the code and here's what I'm planning :
-Link each input to its error message using aria-describedby.
-Mark errored inputs with aria-invalid={hasError}.
-Add role="alert" on the error

tags so screen readers pick them up instantly. Planning to check all form fields across the app and not just TrimControl.

Please assign it to me, thanks!
@mahema-14

[Lathika226]

Hi @magic-peach, I’d like to work on this accessibility issue under GSSoC’26.

I reviewed the current form interaction patterns and noticed some validation/error handling flows may not fully associate error messages with their corresponding form fields in an accessible way. This can make it difficult for screen-reader users and keyboard-only users to understand validation feedback clearly.

I’d like to improve the accessibility of form validation and error messaging throughout the application.

Implementation plan:

• Audit all form inputs and validation/error states across the app
• Properly associate error messages with corresponding fields using accessible attributes such as aria-describedby and related form semantics
• Ensure validation messages are announced correctly by screen readers
• Improve focus behavior for invalid fields where necessary
• Maintain clear visual feedback alongside accessible announcements
• Test accessibility behavior using keyboard navigation and screen-reader tools
• Verify consistency across different browsers and form components

I’ll ensure the fixes integrate cleanly with the existing component structure and preserve the current UX while improving accessibility compliance.

Please assign this issue to me. Thank you!

[Pranav-IIITM]

Hi, I would like to work on this security issue under GSSoC’26. Please assign it to me.

[Prince2301p]

Hi,
I would like to work on resolving this issue. Please assign it to me. I’m a participant in GSSoC 2026 and would be happy to contribute.
Looking forward to collaborating with you.