Impossible to pass tabIndex to Button

[davidalvarezr]

Provide a general summary of the issue here

I have a modal component with a close button.

In the DOM, the close button appears before the contente.

I want the close button to be the last focusable element, by passing tabIndex={999}, but the prop is not available.

🤔 Expected Behavior?

I should be able to write this:
<Button tabIndex={999}>Last</Button><Button>First</Button>

😯 Current Behavior

I tried passing tabindex, tabIndex and tab-index but the rendered HTML is always <button tabindex="0">Last</button>

💁 Possible Solution

Make tabIndex prop available

🔦 Context

https://codesandbox.io/p/sandbox/sharp-mirzakhani-zrdjkn

🖥️ Steps to Reproduce

Check codesandbox link

Version

react-aria-components: 1.15.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

react-aria-components

🕷 Tracking Issue

No response

[nwidynski]

Using values other than 0 and -1 is highly discouraged, which is why this library only supports excludeFromTabOrder.

[snowystinger]

Thanks @nwidynski that's correct. There's some more information here as well useButton doesn't forward tabIndex prop

You can use autoFocus as well to set focus somewhere on mount, then it will have a focus ring so users know they are somewhere farther along in the document than they might otherwise expect.
You can also use a keyboard handler for tab to move it in a different order, or a FocusManager since modals have a FocusScope around them.