useButton doesn't forward tabIndex prop

[tinleym]

🐛 Bug Report

useButton doesn't forward the tabIndex prop.

🤔 Expected Behavior

useButton returns a tabIndex when passed to it as a parameter.

😯 Current Behavior

useButton does not return a tabIndex when passed to it as a parameter.

💁 Possible Solution

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/button/src/useButton.ts

It looks like tabIndex is excluded if the elementType is the default "button". By my current understanding, this shouldn't be the case (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).

🔦 Context

I'm treating tabIndex as a special case in my Button component, which is simple enough, but it would be nice if I and others didn't have to (or debug the issue in the first place).

💻 Code Sample

https://codesandbox.io/s/polished-dust-0k2d1?file=/src/App.js

🌍 Your Environment

Software	Version(s)
react-aria	3.12.0
Browser	Chrome 97.0.4692.99
Operating System	MacOs 11.6.4

[snowystinger]

Hey! Thanks for opening the issue. Can you explain more of why you need to pass in a tabIndex?

We've found that it's pretty unnecessary and can actually lead to worse accessibility when it is used for anything other than -1 or 0. Therefore, we do not allow it in most places and instead rely on specific hooks that set one of those two values for you. For example, useDialog will set a tabIndex of -1 on the entire dialog specifically for accessibility purposes.

[devongovett]

The excludeFromTabOrder prop does allow setting the tabIndex to -1, but we don't recommend setting it to any other value. That said, you can always override the props returned by useButton yourself. e.g. <button {...buttonProps} tabIndex={whatever}>.