fix(Tabs): add visible focus indicator on active tabs

[HigherOrderLogic]

Closes #685.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Sep 22, 2023 0:14am

[benjamincanac]

I've tried this already but unfortunately, the focus appears when clicking. This is the reason I removed it in the first place.

[HigherOrderLogic]

I've tried this already but unfortunately, the focus appears when clicking. This is the reason I removed it in the first place.

So should I close this then?

[benjamincanac]

Not sure, is there no way to achieve this without having the focus-visible on click?

[HigherOrderLogic]

Maybe this is caused by another piece of css in the component? Because the Tailwind docs state that Style an element when it has been focused using the keyboard using the focus-visible modifier.

[HigherOrderLogic]

After messing around, I found out that the outline only appears after you have moving around using Tab key.

[benjamincanac]

If you go the preview url, scroll down a bit and click on the tabs, the focus appears without having pressed any key.

[matteason]

This issue in Headless UI looks relevant: tailwindlabs/headlessui#1694

Basically a manual focus() call (probably https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-vue/src/components/tabs/tabs.ts#L405) seems to trigger the browser to think that the focus has been performed via the keyboard rather than the mouse, so focus-visible is enabled. Interestingly, if you click on another interactive element (for example the search box) before clicking the tabs, the focus ring is not visible.

[HigherOrderLogic]

This should be working now. The tradeoff is that there's one more package for users when they install the module.

[benjamincanac]

I don't mind adding this plugin.

Maybe the focus should be on all the tabs instead of only the selected one?

[HigherOrderLogic]

Initialy, I tried that. But when I focus on an inactived tab using keyboard and press Enter, nothing change.

[matteason]

I think showing the focus ring on the selected tab is the correct behaviour - it's the tab itself that has focus rather than the tablist, and it reflects the behaviour of the WAI tabs example

[benjamincanac]

Sorry but #692 introduced quite a few changes, would you mind fixing the conflicts?

[HigherOrderLogic]

Sorry but #692 introduced quite a few changes, would you mind fixing the conflicts?

I messed up pretty hard but it should be okay now.