From f4a28eb4e35f4e6708c307928c81cbe29eb75133 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 26 Jan 2023 16:54:19 +0100
Subject: [PATCH 1/2] allow setting `tabIndex` on the `Tab.Panel`

---
 packages/@headlessui-react/src/components/tabs/tabs.tsx | 6 +++---
 packages/@headlessui-vue/src/components/tabs/tabs.ts    | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx
index 4d384fc2c9..1bea2c0a56 100644
--- a/packages/@headlessui-react/src/components/tabs/tabs.tsx
+++ b/packages/@headlessui-react/src/components/tabs/tabs.tsx
@@ -495,7 +495,7 @@ let DEFAULT_PANEL_TAG = 'div' as const
 interface PanelRenderPropArg {
   selected: boolean
 }
-type PanelPropsWeControl = 'role' | 'aria-labelledby' | 'tabIndex'
+type PanelPropsWeControl = 'role' | 'aria-labelledby'
 let PanelRenderFeatures = Features.RenderStrategy | Features.Static
 
 let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
@@ -504,7 +504,7 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
   ref: Ref<HTMLElement>
 ) {
   let internalId = useId()
-  let { id = `headlessui-tabs-panel-${internalId}`, ...theirProps } = props
+  let { id = `headlessui-tabs-panel-${internalId}`, tabIndex = 0, ...theirProps } = props
   let { selectedIndex, tabs, panels } = useData('Tab.Panel')
   let actions = useActions('Tab.Panel')
   let SSRContext = useSSRTabsCounter('Tab.Panel')
@@ -531,7 +531,7 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
     id,
     role: 'tabpanel',
     'aria-labelledby': tabs[myIndex]?.current?.id,
-    tabIndex: selected ? 0 : -1,
+    tabIndex: selected ? tabIndex : -1,
   }
 
   if (!selected && (theirProps.unmount ?? true) && !(theirProps.static ?? false)) {
diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts
index d903939a08..cf28b4f484 100644
--- a/packages/@headlessui-vue/src/components/tabs/tabs.ts
+++ b/packages/@headlessui-vue/src/components/tabs/tabs.ts
@@ -431,6 +431,7 @@ export let TabPanel = defineComponent({
     static: { type: Boolean, default: false },
     unmount: { type: Boolean, default: true },
     id: { type: String, default: () => `headlessui-tabs-panel-${useId()}` },
+    tabIndex: { type: Number, default: 0 },
   },
   setup(props, { attrs, slots, expose }) {
     let api = useTabsContext('TabPanel')
@@ -462,13 +463,13 @@ export let TabPanel = defineComponent({
 
     return () => {
       let slot = { selected: selected.value }
-      let { id, ...theirProps } = props
+      let { id, tabIndex, ...theirProps } = props
       let ourProps = {
         ref: internalPanelRef,
         id,
         role: 'tabpanel',
         'aria-labelledby': dom(api.tabs.value[myIndex.value])?.id,
-        tabIndex: selected.value ? 0 : -1,
+        tabIndex: selected.value ? tabIndex : -1,
       }
 
       if (!selected.value && props.unmount && !props.static) {

From 2714bd42e756b594907eee4bc098566864d15eac Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 26 Jan 2023 17:08:50 +0100
Subject: [PATCH 2/2] update changelog

---
 packages/@headlessui-react/CHANGELOG.md | 4 ++++
 packages/@headlessui-vue/CHANGELOG.md   | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index b77c78893a..62006b1947 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -20,6 +20,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix crash when reading `headlessuiFocusGuard` of `relatedTarget` in the `FocusTrap` component ([#2203](https://github.com/tailwindlabs/headlessui/pull/2203))
 - Fix `FocusTrap` in `Dialog` when there is only 1 focusable element ([#2172](https://github.com/tailwindlabs/headlessui/pull/2172))
 
+### Added
+
+- Allow setting `tabIndex` on the `Tab.Panel` ([#2214](https://github.com/tailwindlabs/headlessui/pull/2214))
+
 ## [1.7.7] - 2022-12-16
 
 ### Fixed
diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
index cf7fb2aad8..e8f9be5bfa 100644
--- a/packages/@headlessui-vue/CHANGELOG.md
+++ b/packages/@headlessui-vue/CHANGELOG.md
@@ -21,6 +21,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix crash when reading `headlessuiFocusGuard` of `relatedTarget` in the `FocusTrap` component ([#2203](https://github.com/tailwindlabs/headlessui/pull/2203))
 - Fix `FocusTrap` in `Dialog` when there is only 1 focusable element ([#2172](https://github.com/tailwindlabs/headlessui/pull/2172))
 
+### Added
+
+- Allow setting `tabIndex` on the `Tab.Panel` ([#2214](https://github.com/tailwindlabs/headlessui/pull/2214))
+
 ## [1.7.7] - 2022-12-16
 
 ### Fixed