Improve demo mode for `Dialog` component in Safari

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

Improve demo mode for `Dialog` component in Safari #3227

Closed RobinMalfait closed 4 months ago

RobinMalfait commented 4 months ago

When you have a role="dialog" and an aria-modal="true" at the same time, then Safari will focus the first focusable element inside the dialog.

This is not ideal, because in demo mode this means that the focus is moved around to various DOM elements.

This PR ensures that while demo mode is active, that the aria-modal attribute is not applied which means that focus is not automatically applied in Safari.

vercel[bot] commented 4 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	May 22, 2024 0:56am
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 22, 2024 0:56am