headlessui icon indicating copy to clipboard operation
headlessui copied to clipboard

Support `<summary>` as a focusable element

Open shengslogar opened this issue 1 year ago • 2 comments

  • <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.

shengslogar avatar Jul 16 '24 23:07 shengslogar

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

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

vercel[bot] avatar Jul 16 '24 23:07 vercel[bot]

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

shengslogar avatar Jul 17 '24 13:07 shengslogar