Warn instead of error

[RobinMalfait]

Currently the FocusTrap will throw an error when there are no focusable elements found. While this error is still important, we will now use console.warn instead of actually throwing an error. You can think of it as a progressive enhancement.

However, if you have this warning, there is a good chance hat there is still something wrong in the code. Having a focusable element is important for screenreaders and other assistive technology.

That said, we have some ideas how we can ensure that the console.warn goes away even if you don't have focusable elements while keeping the whole Dialog component accessible. This is a bigger issue to work on, and will be added in the future. But for now, the warning approach is a good first step.

If you were bitten by this issue, please double check that you actually have focusable elements.

Closes: #774
Fixes: #407

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

headlessui-react – ./packages/@headlessui-react

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/4mwTBn4BRBwiCmXUML3h5oVuNQEu
✅ Preview: https://headlessui-react-git-warn-instead-of-error-tailwindlabs.vercel.app

headlessui-vue – ./packages/@headlessui-vue

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/BECYq9hXYPj7UFqumQLqK9LZSPGY
✅ Preview: https://headlessui-vue-git-warn-instead-of-error-tailwindlabs.vercel.app

[Krystofee]

I was frustrated by that opened #407 without any resolution. Thank you very much for finally resolving this issue 🙂

[robertlemke]

If someone stumbles over this warning using React 18 alpha, this is possibly related to using StrictMode, see: #681