No option to remove the slider thumb from the 'tab flow'

[moloko]

Description

If I set the disabled prop on react-slider I cannot move the thumb but I can still tab to it.

In the code sandbox I have set up you'll see I've set the disabled prop on react-slider and that it can still be tabbed to. For comparison I've included a native 'range slider' control that has the disabled attribute set - note that you cannot tab to it.

I know there is a certain amount of debate as to whether disabled controls should still be part of the 'tab flow' or not - from what I can figure out there seems to be some consensus that buttons and links should be part of the tab flow even when disabled but other form controls typically shouldn't be.

Regardless of where you stand on that, there will still always be situations when there's a good reason to remove a control from the tab flow - so if you want to argue that this shouldn't be tied into the disabled attribute but instead should be controlled separately... I'd be inclined to agree with that!

Note that removing the thumb from the tab flow doesn't prevent it from being accessed by assistive technologies like screen readers - they can still navigate to it fine.

CodeSandbox

https://codesandbox.io/s/react-slider-kybd-a11y-rcmvy6

[qroll]

I found that the thumb props contain tabIndex. I overrode this to undefined to remove the thumb from the tab sequence when the slider is disabled

renderThumb={(props, state) => (
  <div {...props} tabIndex={disabled ? undefined : props.tabIndex}>
    {state.valueNow}
  </div>
)}