mantine
mantine copied to clipboard
[@mantine/core] Checkbox: Add aria-describedby support for error and description (#8340)
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-describedbyattribute to checkbox input element - The attribute references the IDs of description and error elements
- Updated InlineInput to accept optional
descriptionIdanderrorIdprops - Added test cases to verify the accessibility improvements
How it works
When a Checkbox has an error or description:
- Generate unique IDs for description/error elements
- Set these IDs on the actual description/error elements
- 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. 🎉