After being clicked with a mouse, tab labels show the outline and have a background

[Mihonarium]

🐛 Bug Report

If you click on a tab label with a mouse, the label shows the outline. If you then point the mouse elsewhere, the clicked tab label still shows var(--ifm-hover-overlay) as the background.

Have you read the Contributing Guidelines on issues?

Yes.

To Reproduce

Using Chrome, go to v2.docusaurus.io/docs/markdown-features/#tabs, click on any of the tabs, the outline will be shown, and if you point the mouse elsewhere, the hover-overlay will still be the background of the tab label.

Expected behavior

The selected tab label should have the same look as the label of the tab, selected by default. There shouldn't be any difference between the label you just clicked on and the label you clicked on before clicking somewhere else, e.g. on a text or on the page background. No background, if the mouse isn't pointing at the label, should be shown, and no outline should be shown unless a keyboard or an assistive device is used for interacting with the page.

I would expect the outline to appear once I use the tab button or other keyboard buttons for the navigation, but not while I'm using only the mouse.

Actual Behavior

When I click on a tab label, it shows the outline and has a background until you click elsewhere.

Your Environment

• The bug shows up on both https://v2.docusaurus.io/docs/markdown-features/#tabs and a locally installed Docusaurus v2
• Desktop Windows 10
• In the latest Chrome, both the outline and the background are showed. In Edge and Firefox, the outline isn't being showed, but the background is there until you click somewhere else.

[Mihonarium]

If that's something that should be fixed, the fix should probably be implemented in https://github.com/facebook/docusaurus/tree/master/packages/docusaurus-theme-classic/src/theme/Tabs.

I'm not experienced with frontend at all and using Docusaurus for creating documentation for an API, and I avoided this behavior locally, but in a way that's obviously not the actual way to fix the bug. I created a TabsWrapper so I can put tags around all the tags:

export const TabsWrapper = ({children}) => (
	<div onKeyDown={(event) => {if (event.keyCode !== 13 && event.keyCode !== 32) {var s = document.getElementById("outlineCss"); if(s !== null) return; var cssStyle = document.createElement('style'); cssStyle.id="outlineCss"; cssStyle.type = 'text/css'; var rules = document.createTextNode(".tabs__item--active:focus{outline-style:auto !important;}"); cssStyle.appendChild(rules);document.getElementsByTagName("head")[0].appendChild(cssStyle);}}}>
		{children}</div>);

And I added these to lines to the custom.css:

.tabs__item--active:focus{outline-style:none; background-color: transparent !important;}
.tabs__item--active:hover{background-color:var(--ifm-hover-overlay) !important;}

[slorber]

Thanks, that looks like a visual bug to me.

We should fix it in Infima, the outline color of tabs should be in sync with the bottom border color
https://facebookincubator.github.io/infima/docs/components/tabs

Infima is not yet opensource

[Mihonarium]

that looks like a visual bug to me
@slorber

I mean, the bug is not the color of the outline, it's the outline itself being shown after a click.

In Chrome, the outline doesn't show up on https://facebookincubator.github.io/infima/docs/components/tabs/ if you click on a tab label, but it does on https://v2.docusaurus.io/docs/markdown-features/#tabs because there is a tabindex and the default browser behavior is to show the outline for the elements in focus with a tabindex.

I'm not sure if it's possible to fix this without any JS while not losing accessibility.

[slorber]

I'm not an accessibility expert, do you have a document that explains best practices in this regard and clearly says that an outline should not be displayed on a clicked element?

If someone knows exactly what to do, PRs are welcome

[Mihonarium]

While writing this comment, I found that there is a recommendation of using :focus-visible, which is not yet supported by Chrome, but can be added using a polyfill from W3C's WICG.

The outline on a tab clicked with a mouse is something unexpected and leads to inconsistent behavior across different browsers.

The documents are saying that you shouldn't restrict users on what device they're using for the interactions (see this W3C recommendation), so basically the outline should be displayed when a keyboard or an assistive device is used for navigation.

(For this purpose, tabindex tags are being added so the browser knows where to navigate. On most pages, when you click on an element with a tabindex, you're being redirected to another page, so the outline is shown for a moment, but you don't notice that.)

But there are things like tabs. Before Docusaurus v2, the tabs hadn't had tabindexes, so the outline wasn't shown, but also you couldn't have accessed the tabs with a keyboard. In v2, you can, which is good, but Chrome focuses on everything clicked and displays an outline once you've clicked on a tab label with a mouse, which is pretty disconcerting.

Since Chrome is popular, websites use JS for avoiding the issue. E.g. if you click on a tab with a mouse here on GitHub, or on CloudFlare, it doesn't show the outline, and if you navigate using a keyboard, tabs show the outlines.

There was a Chromium issue https://bugs.chromium.org/p/chromium/issues/detail?id=271023 in which Chromium team members say that developers should implement something to use JS to implement the desired behavior of when the outlines should be shown. And then there was a :focus-visible standard, which is still not in Chrome but can already be used with a polyfill.

I think the solution would be something like importing the polyfill (I would create a PR but I don't really know how imports work in NodeJS) and adding this to the tabs style:

.tabItem:focus:not(.focus-visible) {
  outline: none;
}

[mdfaizan7]

I have made a PR for this issue in #3171

[Mihonarium]

@mdfaizan7 thank you for the PR, but I don't think it would solve the issue.

It hides the outline from all the users, so you can't navigate with a keyboard or an assistive device anymore, and also leads to the hover-background being not shown when the tab is clicked but and the mouse is pointing at it.

The only way of solving the issue with the outline is to show the outline only when a user navigates using something that's not a mouse. The easiest way is, as I mentioned earlier, to import a :focus-visible polyfill and to add the CSS from above.

The part of the bug related to the background probably should be fixed just with removing background-color: var(--ifm-hover-overlay) from the tabs style, without adding background-color: transparent.

[mdfaizan7]

@Mihonarium thank you for the review.

I have made another commit, this time I created an event listener to listen if the tab key is pressed or not. I also made a state variable which is a boolean. So if anytime the tab key is pressed, the value of that variable will be true and the outline will be shown. But if there is a mouse click then its value will be false, and the outlines will not be shown.

[Mihonarium]

👍 Good job!

But there's an issue: users can navigate using other things, not only Tabs and Shift+Tabs on the keyboard, so it's not really good to rely only on those. The :focus-visible polyfill by W3C's WICG I mentioned earlier tracks how a user navigated to a newly focused element and listens to a lot of events, without anything specific for tabs. Maybe it's possible to use it instead or to copy its algorithm? There's also a package https://www.npmjs.com/package/use-focus-visible based on the polyfill which could be helpful.

Also, there's is a small bug: if you press Tab while being on the page, the outline will appear for a moment and then disappear the first time you click on the tab. Though this is not important if the logic of the polyfill will be used.

[Mihonarium]

Locally, I was able to completely resolve the issue by adding 'https://unpkg.com/[email protected]/dist/focus-visible.min.js' to the scripts in the docusaurus config and by adding the CSS from this comment to the custom.css file.

So if it's possible to import the package from Tabs, that would probably work. (I don't know how NodeJS packages work so can't make a PR)

[mdfaizan7]

Thank you @Mihonarium for pointing out these points. I have refrained to use any other library or package to handle this bug. That's why I have not tried to use the polyfill package that you mentioned earlier.

I have now updated the code to listen to all the keys (except the meta, alt & ctrl key). So now, the users can use any key for navigating and the outline will be shown.

Also, I have also handled the other bug you mentioned. Now it doesn't occur on my device. Please see and tell me if you still experience this bug.

[Mihonarium]

Thanks! Now everything looks good and I think works properly.

The other reason why I tried to suggest the usage of the polyfill is that there could be other similar issues with things showing the outline when they shouldn't, and the polyfill would allow to easily fix those issues with CSS without needing to add any new listeners to the keyboard events or write the same code. But that wasn't as important as just making everything work and look good, so you can probably merge the PR.