[Checkbox, Menu, Switch] Audit focus states on disabled components #734
Conversation
onehanddev
requested review from
atomiks,
colmtuite and
michaldudak
as code owners
Netlify deploy preview |
onehanddev
changed the title
| @@ -98,6 +98,7 @@ const CheckboxRoot = React.forwardRef(function CheckboxRoot( | |||
| extraProps: { | |||
| ...otherProps, | |||
| ...otherGroupProps, | |||
| disabled, | |||
There was a problem hiding this comment.
Instead of passing disabled here, it should be set by useCheckboxRoot's getButtonProps. You can remove aria-disabled and have just disabled prop returned from there.
Same with the Switch.
There was a problem hiding this comment.
Thank you for pointing that out! 🙏 I’ve updated the code.
Please let me know if there are any further changes needed. 😊
There was a problem hiding this comment.
It appears that removing aria-disabled is causing CircleCI’s browser tests to fail. Do you think we should reintroduce aria-disabled alongside the disabled prop?
There was a problem hiding this comment.
Based on the various a11y resources, we are not required to use aria-disabled if we already are using native form elements like button with appropriate roles like switch or checkbox. what do you think @michaldudak ?
There was a problem hiding this comment.
No, having just the disabled attribute is enough. Using both disabled and aria-disabled is redundant and may trigger warnings in some a11y validators.
IMO the way to go would be updating the tests to expect the disabled attribute.
There was a problem hiding this comment.
@michaldudak I have fixed the tests, Please review it again. Thanks !
…ove 'aria-disabled'. Applied the same update to Switch component.
…led for Switch and Checkbox components.
michaldudak
added
component: switch
michaldudak
changed the title
…ui#734) Co-authored-by: hakimuddinhh <[email protected]>
Changes -
[] I have followed (at least) the PR section of the contributing guide.
closes #656