Input/Dropdown/Button should not have tab stops when disabled

[levithomason]

Steps

1. Create a disabled Input, disabled search Dropdown, disabled Button
2. Use the tab key to navigate to the Input, Dropdown, or Button

Expected Result

The tab key should skip focus for disabled Inputs, Dropdowns, and Buttons. The text should not be selected, neither should there be a tab stop here.

Actual Result

Even though the user can not enter text into the controls, there is a tab stop for them. The text is highlighted and the active blue border is applied. This is against the native behavior of HTML elements.

Version

60.1.8

Testcase

http://codepen.io/levithomason/pen/QGOPPG
Updated to add button: http://codepen.io/jeffcarbs/pen/QGQgPJ

[jeffcarbs]

Added Button as well and updated the codepen.

Also, if we use the tabIndex={-1} to solve this we need to make sure that a user can override this. I can imagine wanting to allow a user to tab to a disabled element and display a tooltip explaining why it's disabled.

Currently a user cannot set tabIndex on Input or Button, so we should enable that with this work as well.

[levithomason]

Thanks much!

[UnbrandedTech]

Right now, if the dropdown is disabled or a search the tabIndex = undefined, is this the expected result? I think this Issue is meant to change the case of disabled to tabIndex = -1

[levithomason]

Gonna tackle this as.

[levithomason]

PR up #1100

[levithomason]

Released in [email protected].