Focus ring via :focus-visible

Description

It may be desirable to remove the default focus ring which appears on mouse click. For <model-viewer> to be accessible and compliant there must be a focus ring visible when keyboard users interact with the model. This is a requirement from WCAG 2.4.7 Focus Visible.

A possible work-around would be to implement the :focus-visible polyfill which, I assume, would be encapsulated within <model-viewer>. With this in place, we’d be free to remove the outline for mouse/touch, and display the outline for keyboard only.

/*
  Provide basic, default focus styles.
*/
canvas:focus {
  …
}

/*
  Remove default focus styles for mouse users ONLY if
  :focus-visible is supported on this platform.
*/
canvas:focus:not(:focus-visible) {
  …
}

/*
  Optionally: If :focus-visible is supported on this
  platform, provide enhanced focus styles for keyboard
  focus.
*/
canvas:focus-visible {
  …
}

Live Demo

Browser Affected

• Chrome
• Edge
• Firefox
• Helios
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows

Versions

• model-viewer: v0.1.1

[cdata]

https://github.com/WICG/focus-visible/pull/196 as been approved, so we should be able to move forward with a aspirational integration.

[cdata]

I have opened https://github.com/WICG/focus-visible/pull/196 to add Shadow DOM support.