Allow setting tabIndex on the Tab.Panel

[RobinMalfait]

This PR adds the ability to override the tabIndex of the Tab.Panel.

The problem:

Right now the Tab.Panel will always be focusable this allows assistive technology to know that the moment you press tab that you are in a tabpanel container.

However, it can be that your Tab.Panel only consists of focusable elements (like links, buttons, ...), which means that you have to tab twice to get to the first focusable element. Sometimes you don't want this behaviour and just want to go straight to the first item, even if this means that we potentially skip elements (like paragraphs, images, ...).

Potential solutions:

• Keep the current implementation, this will require you to tab twice. But assistive technology will still know the proper boundaries.
• Automatically focus the first focusable element if the Tab.Panel includes focusable elements and make the Tab.Panel itself have a tabIndex=-1. The downside here is that you potentially skip a lot of information (like paragraphs). This is what React Aria does (https://react-spectrum.adobe.com/react-aria/useTabList.html#focusable-content), but for us that will technically result in a breaking change.
• Allow to set the tabIndex and opt-in this behaviour and skip the focus of the Tab.Panel itself.

We currently implemented the 3rd option where it is opt-in using the tabIndex prop. This way you can technically break accessibility if you have important paragraphs before the first focusable element.

Resolves: #2110

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 26, 2023 at 4:11PM (UTC)
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 26, 2023 at 4:11PM (UTC)