search

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

I am using Dialog component in my project, when i open dialog and check for accessibility issues i always see two errors #3491

Open vallurirajesh opened 5 days ago

vallurirajesh commented 5 days ago

for the buttons data-headlessui-focus-guard="true" the site improve accessibility tool showing issues for the two buttons rendered might be used to maintain tab behavior guard to the current dialog opened (instead tab navigation go behind the dialog page elements). If you can add tabIndex=-1 for that button then our accessibility tool will not complain about it. https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/focus-trap/focus-trap.tsx May be it use Hidden component https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/internal/hidden.tsx can we add tabindex=-1 prop if the component in this case button was hidden?