Carbon: [Tabs]: Disabled tabs are still clickable and active

Created on 29 May 2019  ·  5Comments  ·  Source: carbon-design-system/carbon

What package(s) are you using?

  • [ ] carbon-components
  • [x] 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
medium react dev 🤖 1 🚨 a11y ♿ bug 🐛

Most helpful comment

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

All 5 comments

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

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

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.

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

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.

Was this page helpful?
0 / 5 - 0 ratings