Support <summary> as a focusable element (#3389)

-
[`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
is a built-in heading tag that is nested inside a
[`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
tag to toggle its contents. It's keyboard tab-able by default and not
currently recognized by Headless UI.
- There are no attributes that disable a summary tag, and adding
`tabindex="-1"` makes it behave like any other normally-tab-able
element.
- I didn't spot any tests that specifically check for tab-ability of
elements outside of buttons and inputs. Let me know if I missed
anything.

---------

Co-authored-by: Sheng Slogar <[email protected]>
Co-authored-by: Robin Malfait <[email protected]>

Author: 3 people

packages/@headlessui-react/CHANGELOG.md

@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Ensure we are not freezing data when the `static` prop is used ([#3779](https://github.com/tailwindlabs/headlessui/pull/3779))
 - Ensure `onChange` types are contravariant instead of bivariant ([#3781](https://github.com/tailwindlabs/headlessui/pull/3781))
+- Support `<details>` as a focusable element without `<summary>` ([#3389](https://github.com/tailwindlabs/headlessui/pull/3389))
+- Support `<summary>` as a focusable element inside `<details>` ([#3389](https://github.com/tailwindlabs/headlessui/pull/3389))
 
 ## [2.2.7] - 2025-07-30
 

packages/@headlessui-react/src/test-utils/interactions.ts

@@ -489,6 +489,8 @@ let focusableSelector = [
   'iframe',
   'input:not([disabled])',
   'select:not([disabled])',
+  'details:not(:has(> summary))',
+  'details>summary',
   'textarea:not([disabled])',
 ]
   .map(

packages/@headlessui-react/src/utils/focus-management.ts

@@ -15,6 +15,8 @@ export let focusableSelector = [
   'iframe',
   'input:not([disabled])',
   'select:not([disabled])',
+  'details:not(:has(> summary))',
+  'details>summary',
   'textarea:not([disabled])',
 ]
   .map(

packages/@headlessui-vue/CHANGELOG.md

@@ -18,6 +18,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix restoring focus to correct element when closing `Dialog` component ([#3365](https://github.com/tailwindlabs/headlessui/pull/3365))
 - Cleanup `process` in Combobox component when using virtualization ([#3495](https://github.com/tailwindlabs/headlessui/pull/3495))
 - Ensure outside click properly works when clicking SVG elements ([#3777](https://github.com/tailwindlabs/headlessui/pull/3777))
+- Support `<details>` as a focusable element without `<summary>` ([#3389](https://github.com/tailwindlabs/headlessui/pull/3389))
+- Support `<summary>` as a focusable element inside `<details>` ([#3389](https://github.com/tailwindlabs/headlessui/pull/3389))
 
 ## [1.7.22] - 2024-05-08
 

packages/@headlessui-vue/src/test-utils/interactions.ts

@@ -467,6 +467,8 @@ let focusableSelector = [
   'iframe',
   'input:not([disabled])',
   'select:not([disabled])',
+  'details:not(:has(> summary))',
+  'details>summary',
   'textarea:not([disabled])',
 ]
   .map(

packages/@headlessui-vue/src/utils/focus-management.ts

@@ -13,6 +13,8 @@ export let focusableSelector = [
   'iframe',
   'input:not([disabled])',
   'select:not([disabled])',
+  'details:not(:has(> summary))',
+  'details>summary',
   'textarea:not([disabled])',
 ]
   .map(