[Tabs] When a Tab is disabled, keyboard traversal is stuck

Normally keyboard users will tab into a Tabs group, then use either Left/Right (if horizontal tab) or Up/Down (vertical) to traverse the Tabs and according to WAI aria practices, the Tabs should wrap around (last <-> first tabs); this works great right now unless a Tab is disabled, in which case it will break the traversal instead of skip the disabled Tab.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

If a Tab is in disabled state, then it acts like a hard stop in the traversal order.

Expected Behavior 🤔

Match the behavior to the way MenuItems with disabled items are traversed and just skip the disabled Tab.

Maybe you could do something in Tabs.js, handleKeyDown, around here:

case previousItemKey:
        newFocusTarget = target.previousElementSibling || tabListRef.current.lastChild;

look for disabled state

Steps to Reproduce 🕹

https://codesandbox.io/s/basictabs-material-demo-forked-sh1rd?file=/demo.js Hope I forked and saved this correctly. it’s the basic Tab example with a button for convenient focus. Tab 2 is disabled; you can tab into the Tabs group and then you can see how the arrow traversal hits a wall when it encounters disabled Tab 2.

Steps:

1. Take a look at the codesandbox link
2. If I messed that up, then just take the simple tab demo (first one) and add a disabled on any one of the Tab components

Context 🔦

a11y compliance

Your Environment 🌎

this happens on the demo code.

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

[oliviertassinari]

@anish-khanna I believe the two linked logic handle the case. It would be great.

[anish-khanna]

I’m new but if nobody else is taking a crack it this issue, I can try and get it resolved.