Skip to content
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

[Tabs]: Disabled tabs are still clickable and active #2880

Closed
1 of 2 tasks
vpicone opened this issue May 29, 2019 · 5 comments · Fixed by #3201 or #4784
Closed
1 of 2 tasks

[Tabs]: Disabled tabs are still clickable and active #2880

vpicone opened this issue May 29, 2019 · 5 comments · Fixed by #3201 or #4784
Assignees
Labels
package: react carbon-components-react role: dev 🤖 severity: 1 https://ibm.biz/carbon-severity type: a11y ♿ type: bug 🐛

Comments

@vpicone
Copy link
Contributor

vpicone commented May 29, 2019

What package(s) are you using?

  • carbon-components
  • carbon-components-react

Detailed description

Describe in detail the issue you're having.

Passing the disabled prop to a tab only impacts the style, the Tabs component will still switch contents when a disabled tab is clicked

What did you expect to happen? What happened instead? What would you like to
see changed?

Disabled tabs should have no effect when clicked

Steps to reproduce the issue

  1. Go to tabs storybook
  2. Under the knobs panel of storybook enable the Disabled knob
  3. Click the tabs, they are still active and change the content of the Tabs component
@dakahn dakahn added the severity: 1 https://ibm.biz/carbon-severity label May 30, 2019
@tomkdgun
Copy link

This issue is also important for SPSS Statistics, since we have similar problem.

@abbeyhrt abbeyhrt self-assigned this Jun 26, 2019
@abbeyhrt
Copy link
Contributor

Hey! I'm gonna try and tackle this one.

@asudoh
Copy link
Contributor

asudoh commented Jun 27, 2019

Cool to see you are jumping in @abbeyhrt! One suggestion is searching for pointer-events in our codebase and see if there is something similar to this case.

@anibapat
Copy link

@abbeyhrt I was using keyboard nav, arrow keys on Tab component and it makes it active. Could you verify it?

@abbeyhrt abbeyhrt reopened this Oct 29, 2019
@abbeyhrt
Copy link
Contributor

https://codesandbox.io/s/codesandbox-vq8b6 reopening since the content is still switching to disabled tab content when using arrow keys. You also can't navigate passed the disabled tab to a third not disabled tab.

@abbeyhrt abbeyhrt added this to the Tabs - A11y Project Team milestone Nov 7, 2019
@abbeyhrt abbeyhrt removed their assignment Nov 7, 2019
@dakahn dakahn modified the milestones: Tabs - A11y Project Team, Carbon WCAG Compliance Nov 21, 2019
@emyarod emyarod self-assigned this Nov 26, 2019
@mattrosno mattrosno removed this from the ♿Carbon WCAG Compliance♿ milestone Dec 13, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: react carbon-components-react role: dev 🤖 severity: 1 https://ibm.biz/carbon-severity type: a11y ♿ type: bug 🐛
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants