headlessui icon indicating copy to clipboard operation
headlessui copied to clipboard

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

Open vallurirajesh opened this issue 1 year ago • 0 comments

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?

vallurirajesh avatar Sep 26 '24 16:09 vallurirajesh