Elements always receiving focus & outline on Safari

[sgrund14]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

@headlessui/react: v1.7.14
@headlessui/tailwindcss: v0.1.3

What browser are you using?

Safari

Describe your issue

In safari, desktop and mobile, my headless ui elements are receiving focus-visible and the associated styling (outline) whenever i trigger them. This doesn't happen on chrome. Here's an example:

on safari

Screen.Recording.2023-04-27.at.12.01.34.PM.mov

on chrome (desired behavior)

Screen.Recording.2023-04-27.at.12.02.59.PM.mov

any help / thoughts ? The same is happening with modal components (first focusable elements gets outline) and tabs (tab list items get an outline)

[sgrund14]

or do I just have to add focus:outline-none wherever i don't want this behavior.. but wouldn't that mess with accessibility? I like having the outline there when I tab to it

[pushchris]

Also experiencing this and would be curious what others are doing

[adamwathan]

Hey! This has been discussed previously in #1694, and you can learn about the solution we ended up going with in #2347 👍

Basically because we need to imperatively handle focus in a lot of cases for accessibility reasons, focus-visible styles are triggered by the browser when you might not want them and there's just literally zero we can do to stop the browser from doing it. So instead we've exposed our own internal state that tracks whether we believe focus should be visible using a data attribute we add to the document that you can use to style focus visible states instead of relying on the actual :focus-visible pseudo class. Not the solution I really want but the best option at the moment I'm afraid, and is at least very reliable and gives you a lot of control.

Hope that helps!

[sgrund14]

hey @adamwathan, thanks for the reply here

I think I'm now running into an issue similar to the one here tailwindlabs/tailwindcss#3842 (comment)

I have important: 'html set on my tailwind config file, which is preventing the data-headlessui-focus-visible attribute from being detected. generated rule comes out like this

html :where([data-headlessui-focus-visible]) .ui-focus-visible\:ring-black:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
}

is there a way to set the attribute lower down the component tree? or do I just need not use the important setting 🤔 but then the thing is that it's really useful for overriding default styles in react native components (which I'm using nativewind for)