Potential focus visibility issue in annotations/hotspots

[Malvoz]

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:

Relevant CSS:

model-viewer/packages/model-viewer/src/template.ts

Lines 106 to 108 in 297ed2b

	.annotation-wrapper.hide ::slotted(*) {
	opacity: var(--min-hotspot-opacity, 0.25);
	}

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:

.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:

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.