Skip to content

[@mantine/core] Checkbox: Add aria-describedby support for error and description (#8340)#8526

Open
hlongc wants to merge 1 commit intomantinedev:masterfrom
hlongc:fix/checkbox-error-accessibility
Open

[@mantine/core] Checkbox: Add aria-describedby support for error and description (#8340)#8526
hlongc wants to merge 1 commit intomantinedev:masterfrom
hlongc:fix/checkbox-error-accessibility

Conversation

@hlongc
Copy link

@hlongc hlongc commented Dec 9, 2025

What

Fixes #8340

Checkbox error messages are now accessible to screen readers like VoiceOver. Previously, the error and description text were not announced when focusing on the checkbox input.

Changes

  • Added aria-describedby attribute to checkbox input element
  • The attribute references the IDs of description and error elements
  • Updated InlineInput to accept optional descriptionId and errorId props
  • Added test cases to verify the accessibility improvements

How it works

When a Checkbox has an error or description:

  1. Generate unique IDs for description/error elements
  2. Set these IDs on the actual description/error elements
  3. Link the checkbox input to these elements via aria-describedby

This ensures screen readers properly announce the description and error messages when users focus on the checkbox.

Testing

All tests pass (54/54):

  • ✅ aria-describedby set correctly when only error is present
  • ✅ aria-describedby set correctly when only description is present
  • ✅ aria-describedby references both IDs when both are present
  • ✅ No aria-describedby when neither is present

Tested with Mac VoiceOver - error messages are now properly announced. 🎉

@robert-j-webb
Copy link
Contributor

I have tested this PR and it does in fact fix the problem, without the PR, the error messages are not read by mac voice over.

@rtivital
Copy link
Member

Thanks for validation!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Error message of an erroneous checkbox component is not accessible to voice readers

3 participants