Related: bug 1502098

When discussed at Mozlando, :yzen mentionned that the Accessibility panel uses a few tricks to try to remove the focus style that can appear after clicking a <button> element.

A simpler way might be to use the :focus-visible pseudo-class, but since it's not implemented in Firefox (and the related :-moz-focusring pseudo-class seems to not be usable here), we would need to use a JS polyfill.

It would be great to try to replace those tricks in the Accessibility panel with https://github.com/WICG/focus-visible/ and styles using the .focus-visible class. Since that tool is simpler than, say, the Inspector (see bug 1427815-, it could be a good proof-of-concept that using this polyfill might work in practice.

Hi Florens,

Can I try to solve this issue?

Thanks!

Definitely!

Yura, could you briefly describe where your focus management hacks (the ones we discussed at all hands) are located? I think to move forward on this issue we would need to remove or disable them, and replace them with the (hopefully cleaner) focus-visible polyfill.

Yes, certainly.

I created a custom button component (https://searchfox.org/mozilla-central/source/devtools/client/accessibility/components/Button.js) for a11y panel. It wraps an internal focusable container inside a button to differentiate how focus can land on it (via keyboard on tabindex 0 or via mouse on the one with tabindex -1). There's corresponding styling for these buttons that can be found here - https://searchfox.org/mozilla-central/source/devtools/client/accessibility/accessibility.css#87-108,123-133,135-141,143-146.

I was also thinking using this polyfill would be very useful especially if it was also available as a React component for easy integration. Have you considered that?

Hi everyone,

Thanks for all the info! Those are really helpful.
I have investigated the materials and it seems there is the need to install via npm. Should those files be in the devtools/client/shared/ folder? Or is there any other way of doing this?

Also, I'm testing this Polyfill. How should it look in this example? I may be testing it wrong (I've attached an animated gif with :focus and :focus-visible test).

I forgot to attach the gif.

The gif of your tests seem correct. This demo uses very few specific focus styles:

.js-focus-visible :focus:not(.focus-visible) {
  outline: 0;
}

The "focus-visible" script adds the js-focus-visible class to a container to signal that it's active, and the focus-visible class to the element which currently has focus when that focus was achieved through keyboard navigation or if it's a text input.

In your tests it seems you're using Firefox, which as very subtle focus styles by default, so the difference between "no visible focus styles" (the CSS rule above applies) and "default visible focus styles" are not very strong.

I have investigated the materials and it seems there is the need to install via npm.

Not necessarily, we could just copy the script somewhere.
For example, to devtools/client/shared/vendor/focus-visible.js

Maybe modify its top comment to include the license disclaimer from the repo:

/**
 * https://github.com/WICG/focus-visible
 * Licensed by Contributors under the W3C Software and Document License
 * (https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document).
 */

I think external things like that should go into client/shared/vendor/ where we already have things like react, redux etc. I would double check with a peer from the devtools team.

Hi everyone,

Thanks for the great info!

I needed to import this file to the a11y panel and I suppose I need to do in the accessibility-view.js file. I'm used to ES6's import and I did some research and realized that maybe Firefox uses Node.js to import modules.

My question is: how to import the focus-visible.js, in a way that it is called once, after all panel is loaded?

Thanks!

I think you should probably just include it in index.html file in devtools/client/accessibility/ like this:

<script type="application/javascript"
        src="resource://devtools/client/shared/vendor/focus-visible.js"></script>

The bug assignee didn't login in Bugzilla in the last 7 months.
:Jamie, could you have a look please?
For more information, please visit auto_nag documentation.

Yura accepted the patch, but it looks like it was never accepted by someone from Dev Tools.

Having said that, Firefox does implement :focus-visible now, so we could probably just use that instead.