Now that Firefox supports the :focus-visible pseudo-class in its latest version (85), I've decided to start using the The Paciello Group's :focus-visible fallback hack in order to be backwards compatible with older browsers and those few that still don't support it (or never will). The hack works exactly as expected and I've been very pleased with the results. But I have discovered that not all :focus-visible implementations are the same. In particular, I've stumbled upon one annoying bug in Firefox's implementation I'd like to complain about.
To summarize the :focus-visible pseudo-class at a very high level, it basically allows you to only show the focus indicator to keyboard users. This is great because it allows us to maintain accessibility while appeasing those people who think that focus indicators are a scourge on their da Vinci-like masterpiece of a web page.
Overall, the :focus-visible pseudo-class works great, but there is one Firefox-specific "bug" I just encountered that is preventing me from feeling completely satisfied, if not a little annoyed about this new feature on Firefox. The people at Mozilla may not agree that this is a bug, they may have very good justifications for this particular behavior, but in my opinion, Chrome implements it correctly and Firefox should mimic Chrome.
I've created a codepen to demonstrate this Firefox bug. To summarize, Firefox does not honor :focus-visible after the browser window loses focus. For example, let's say you have a button that is styled with :focus-visible so that the focus outline only shows when focus is set on the button via the keyboard. You click the button with your mouse (and no focus indicator is shown). Then, while the focus is still on the button, you do something that causes the window to lose focus (such as using a different application, or opening a new browser window, or even clicking on the desktop background). And when you bring focus back to the original window with your button, the focus indicator has suddenly appeared on the button even though you have not used the keyboard in anyway to trigger it. This does not happen in Chrome.
If you are using a desktop environment that doesn't require mouse clicking to shift window focus (mine is set to focus follows mouse) then this bug can be triggered very easily by merely moving the mouse quickly over another window. For example, if you have another window layered under your browser window, and it protrudes just a little from the side of the browser, and you accidentally move your mouse out of the browser window and over the protruding window, then when your mouse re-enters the browser window the keyboard focus indicator will magically appear. This is in fact how I first encountered this bug.
Why this is annoying
Using :focus-visible, you've successfully removed all those annoying focus outlines for your mouse users. They have no idea that such a thing even exists. One of them had just clicked a button on your page (which of course did not produce a focus outline) when they decided to check their gmail real quick. After deleting 20 spam messages they bring your page back into focus and now there is a strange dotted outline they've never seen before wrapping the button. Did something change about the button? Is the button trying to tell them something? Will the button do something different now that it has that outline? Consistency is king. Suddenly adding a focus outline to a button when no keyboard interaction has taken place is not a good usability practice.
Update
I just opened an official bug report on this issue.
No comments:
Post a Comment