Request for Adding aria-hidden to Checkbox Component's SVG for Screen Reader Compatibility #5202
Labels
Fixed patch
Completed issues that will be published with next patch (1.0.X)
Comments
rtivital
added a commit
that referenced
this issue
Nov 7, 2023
…ent them being announced by screen readers (#5202)
rtivital
added
the
Fixed patch
|
Fixed in 7.2.1. Now Checkbox icon has |
Thank you for this prompt fix! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What package has an issue?
@mantine/core
Describe the bug
When using the Checkbox component, the SVG inside it is not hidden from screen readers, affecting the accessibility of the page when read by a screen readers, as the control first reaches the input and then the SVG, interrupting the flow of interaction and comprehension.
This is how it's rendered no:
<input id="mantine-90q2t4cqu" type="checkbox" class="mantine-6z0c4w checked:bg-accent checked:border-accent mantine-Checkbox-input" aria-label="some text"> <svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="___ref-icon mantine-q9qwbl mantine-Checkbox-icon"><path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)
6.0.21
If possible, please include a link to a codesandbox with a minimal reproduction
No response
Do you know how to fix the issue
None
Do you want to send a pull request with a fix?
None
Possible fix
Give access so that we can set aria-hidden="true" to the SVG element to ensure it is not announced by screen readers, improving the accessibility of the Checkbox component
The text was updated successfully, but these errors were encountered: