New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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 this issue Sep 26, 2024 · 0 comments

vallurirajesh commented Sep 26, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment