mantine icon indicating copy to clipboard operation
mantine copied to clipboard

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

Open hlongc opened this issue 2 weeks ago • 0 comments

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. 🎉

hlongc avatar Dec 09 '25 11:12 hlongc