Potential focus visibility issue in annotations/hotspots

Author: MalvozCreated Aug 17, 2026Updated Aug 18, 2026

Potential a11y issue

Annotations may fail WCAG Focus Visible and/or Focus Appearance on focus.

Steps to reproduce:

  1. Go to https://modelviewer.dev/examples/annotations/#cameraViews
  2. Tab to the first annotation/hotspot
  3. Notice how the focused annotation element and belonging focus outline is barely visible:
Image

Relevant CSS:

https://github.com/google/model-viewer/blob/297ed2bdbea0c8f921d985ff0c71afd3a819e12e/packages/model-viewer/src/template.ts#L106-L108

Potential solution

We can ensure the element and focus outline is visible on focus by not changing the opacity if there's focus-within the slotted annotation wrapper:

css
.annotation-wrapper.hide ::slotted(:not(:focus-within)) {
   opacity: var(--min-hotspot-opacity, 0.25);
}

Result:

The annotation and focus outline is now fully visible if there's focus within:

Image

Disclaimer

I'm not personally a user of <model-viewer>, I'm here mostly due to @svinkle's model a11y work and my interest in the <model> element proposal.