Frontify / fondue

Design System of Frontify
https://fondue-components.frontify.com/
20 stars 4 forks source link

Checkbox stories have accessibility violations #960

Closed snowystinger closed 11 months ago

snowystinger commented 1 year ago

Hey! Saw you were using react-aria/stately. Awesome and thank you so much. I hope you don't mind, but I was perusing the components you've built and noticed that the Checkbox has a few accessibility violations in the storybook. https://fondue-components.frontify.com/?path=/story/components-checkbox--checkbox

As well as a few that AXE didn't pick up on No buttons inside a label - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#interactive_content No nesting of labels - https://www.w3.org/TR/2013/CR-html5-20130806/forms.html#the-label-element (see "Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements.)

ryancarville commented 11 months ago

Hey @snowystinger! 👋

Thank you for the feedback! We are currently re-working our checkbox component and will be sure to keep these accessibility violation in mind. I will close this issue now, but please let us know if you see anything else that will help us make it a great UX for all our users!