Support `<summary>` as a focusable element

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

https://headlessui.com

MIT License

25.81k stars 1.07k forks source link

Open shengslogar opened 2 months ago

shengslogar commented 2 months ago

<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[bot] commented 2 months ago

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

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 16, 2024 11:27pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 16, 2024 11:27pm

shengslogar commented 2 months ago

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