-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(toggle): fixes disabled issue and adds test #13958
feat(toggle): fixes disabled issue and adds test #13958
Conversation
✅ Deploy Preview for carbon-components-react ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
I'm also seeing some focus styles being applied when clicking on the I was able to remove those styles locally by changing the selector to this on .#{$prefix}--toggle__button:not(:disabled):focus
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__switch,
.#{$prefix}--toggle__button:not(:disabled):active
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__switch,
.#{$prefix}--toggle:not(.#{$prefix}--toggle--disabled):active
.#{$prefix}--toggle__switch { Seems like the |
I went ahead and added the changes. I removed the CSS that shows focus and active states when the toggle is disabled. In terms of keyboard navigation should the toggle still have focus even thought it's disabled? |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
@AlexanderMelox it seems like something is still in the tab order... it goes from the link in the top right, presumably something inside the toggle (but with no focus state), and then to the controls toggle in the storybook panel. I think we should remove the tab stop rather than add focus when disabled. But it doesn't show up when using voiceover, so I'm not sure where the focus is going. Might be a storybook issue? Styles look great 👍🏻 |
@tw15egan It's just focusing the selector tab at the bottom! So the disabled Toggle is not in the Tab Order :) Screen.Recording.2023-06-09.at.10.33.05.AM.mov |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM but seems like 1 tab stop is getting lost, I have to tab twice from the top panel to get to the bottom and it's not clear where the focus is on that "ghost" tab stop
Screen.Recording.2023-06-09.at.10.40.50.AM.mov
@AlexanderMelox weird, even setting the |
If we find a solution let me know, I have other things to work on. Thought this would be a quick fix. |
@AlexanderMelox @francinelucca 🙃 figured it out, it's the storybook Fixed an issue with linting on the test, the rest looks great. Thanks for contributing! |
7c57996
to
41949f7
Compare
The tests are oddly failing |
Closes #13956
Before
https://github.com/carbon-design-system/carbon/assets/12755042/071a7579-fc21-4b48-b101-2ef6382667a6
After
Screen.Recording.2023-06-08.at.12.04.25.PM.mov
This PR fixes the issue where you are able to still toggle when the Toggle is disabled.
Changelog
Changed
Testing / Reviewing
Checked on storybook if you are able to toggle while disabled. Added test to make sure you are not able to toggle when disabled.