Model-viewer: Focus ring via :focus-visible

[svinkle]

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

• [x] Chrome
• [x] Edge
• [x] Firefox
• [x] Helios
• [x] IE
• [x] Safari

OS

• [x] Android
• [x] iOS
• [x] Linux
• [x] MacOS
• [x] Windows

Versions

• model-viewer: v0.1.1

[cdata]

Awesome! Yeah, I think we need to explore support for :focus-visible. I need to read up more about the polyfill. My uneducated, gut reaction is that we would _not_ bundle the polyfill, but rather support it to the best of our ability if it happens to be included on the page (just as we do for other polyfills).

[svinkle]

Ah yeah, that makes sense. Don't bundle but rather, add "support" for in case the page is set to use it.

I'll need to see about adding the polyfill on our end. 👍

[cdata]

I attempted to integrate the suggested polyfill. Unfortunately, it became clear that the polyfill does not support focus as it traverses within shadow roots.

I left some thoughts on the topic while I was in the process discovering this the hard way here.

[cdata]

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

[cdata]

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

[pushmatrix]

Why was this iceboxed?

[cdata]

We were waiting on the next release of the polyfill, so I moved this into v0.5.0 release while we focus on v0.4.0.