Support <summary> as a focusable element

[shengslogar]

• <summary> is a built-in heading tag that is nested inside a <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.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
headlessui-react	Ready	Preview	Comment	Sep 3, 2025 11:38am
headlessui-vue	Ready	Preview	Comment	Sep 3, 2025 11:38am

[shengslogar]

Should input type="hidden" also be on this list? From what I can tell logic will automatically loop past it either way.

[RobinMalfait]

Thanks!

Made some small adjustments. I noticed that if you do this:

<details>
  Hello world
</details>

Then the details element is focusable.

If you do this:

<details>
  <summary>Hello world</summary>
</details>

Then the summary element is focusable, but the details is not focusable.

If you do this:

<details>
  <div><summary>Hello world</summary></div>
</details>

Then the details element is focusable again, but not the summary.

So I adjusted the selectors to use this instead:

- summary
+ details:not(:has(> summary))
+ details>summary

This will now make sure that the summary or the details element is focusable but not both.