:focus-visible doesn't seem to work on md-buttons

[zremboldt]

Have others run into this issue?
Is this a known problem?
I'm here because I searched Google and the GitHub Issues and haven't found anything about this for material-web.

Expected behavior

When I write this html:

<md-outlined-button>Text</md-outlined-button>

<style>
  md-outlined-button {
    &:focus-visible { 
      --md-outlined-button-outline-color: var(--md-sys-color-primary);
    }
  }
</style>

I expect it to behave the same way it would on a standard html button element but material-web does nothing with it (no styling at all).

:focus works as expected but I don't want :focus because with it I see the styling when the button is clicked.
I only want to see this styling if the user is tabbing through elements, hence why I'm using :focus-visible.

Any thoughts/suggestions greatly appreciated!
Thank you!

[asyncLiz]

Hm, I think this might be a bigger shadow dom problem. It doesn't look like :host(:focus-visible) matches when the inner element matches it. Here's a repro: https://lit.dev/playground/#gist=4b7609b02c8d57905ba9c23910a39453

As an aside, what's your use case for styling :focus-visible? The button's focus ring provides a primary color outline around the element that does what you're describing.

[zremboldt]

Thanks for your response!

what's your use case for styling :focus-visible?

In addition to the focus ring, I want the border color to change to our primary brand color rather than gray. Gray against the focus ring color just doesn't look as nice IMO.

The problem with :focus (see second half of video below) is that the ring not only appears when tabbing but also after the user has clicked on the button. I only want the outline to be orange when the focus ring is up.

Video shows :focus example.
First part is great, second part where I click and the orange outline appears without the focus ring is not great. :focus-visible would solve this issue if it were available.

Screen.Recording.2024-06-19.at.8.11.00.AM.mp4

[asyncLiz]

Got it! For this, I'd recommend carefully breaking encapsulation to check if there's strong keyboard focus within the element on focus or blur, then toggle a class or attribute that you can style.

If you're wrapping or extending our button, add the listeners in your button's constructor.

If you're using <md-outlined-button> directly, you can use the MdOutlinedButton.addInitializer() lifecycle to add the listeners to all instances.

MdOutlinedButton.addInitializer(instance => {
  const updateFocusVisible = () => {
    // querying inside a shadowRoot is breaking encapsulation, but this is
    // safe as long as we don't use the returned elements or use selectors
    // specific to the component's implementation (no tag, class, or ID selectors)
    const hasStrongFocus = Boolean(instance.shadowRoot?.querySelector(':focus-visible'));
    if (hasStrongFocus) {
      instance.classList.add('focus-visible');
    } else {
      instance.classList.remove('focus-visible');
    }
  };

  instance.addEventListener('focus', updateFocusVisible);
  instance.addEventListener('blur', updateFocusVisible);
});

md-outlined-button.focus-visible {
  --md-outlined-button-outline-color: var(--md-sys-color-primary);
}