Allow setting tabIndex on the Tab.Panel (#2214)

* allow setting `tabIndex` on the `Tab.Panel` * update changelog
tailwindlabs · Jan 26, 2023 · 2f13496 · 2f13496
1 parent e2294f5
commit 2f13496
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -21,6 +21,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix `FocusTrap` in `Dialog` when there is only 1 focusable element ([#2172](https://github.com/tailwindlabs/headlessui/pull/2172))
 - Improve `Tabs` wrapping around when controlling the component and overflowing the `selectedIndex` ([#2213](https://github.com/tailwindlabs/headlessui/pull/2213))
 
+### 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-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx
@@ -520,7 +520,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>(
@@ -529,7 +529,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')
@@ -556,7 +556,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/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
@@ -22,6 +22,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix `FocusTrap` in `Dialog` when there is only 1 focusable element ([#2172](https://github.com/tailwindlabs/headlessui/pull/2172))
 - Improve `Tabs` wrapping around when controlling the component and overflowing the `selectedIndex` ([#2213](https://github.com/tailwindlabs/headlessui/pull/2213))
 
+### 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/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts
@@ -483,6 +483,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')
@@ -514,13 +515,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) {