Popover enabling `:focus-visible` state on mouse interaction

What package within Headless UI are you using?

@headlessui/react @headlessui/vue

What version of that package are you using?

v1.6.6

What browser are you using?

Chrome

Reproduction URL

https://headlessui.com/react/popover https://stackblitz.com/edit/vitejs-vite-93uk6f?file=src/App.jsx

Describe your issue

When I click Popover.Button it enables :focus-visible state. AFAIK it should do that only with keyboard interactions. At least that’s how regular HTML buttons work.

[sibbng]

Removing the following lines fixes the issue. In my opinion these manual focus calls are unnecessary. If I click somewhere with my mouse, I know where my focus is going to.

https://github.com/tailwindlabs/headlessui/blob/5af3bd4b7164a0205ac70c179d8e9651afbb0a72/packages/%40headlessui-react/src/components/popover/popover.tsx#L266-L269 https://github.com/tailwindlabs/headlessui/blob/5af3bd4b7164a0205ac70c179d8e9651afbb0a72/packages/%40headlessui-react/src/components/popover/popover.tsx#L422

Also there are similar focus related issues with other components too.

Modal component:

1. Click “Open Dialog”
2. Press Tab on your keyboard, “Got it, thanks!” button will get its focus-visible styles as expected
3. Click outside
4. Unexpectedly “Open Dialog” button has focus-visible styles despite closing the modal with mouse.

Tabs component:

• Clicking on the second tab will cause focus flash around the tab.

[adamwathan]

Hoping we can improve this but it might be out of our hands — we do need to programmatically focus things a lot in Headless UI for accessibility reasons and often the browser treats that programmatic focusing as if it were keyboard driven and triggers a focus indicator even though I totally agree that we don’t want it to.

On our own sites we use the PostCSS focus-visible polyfill still and not the native :focus-visible pseudo class because it behaves better in this way. Fingers crossed there’s some trick we can come up with that works though — hate seeing focus styles when using the mouse.