Potential focus visibility issue in annotations/hotspots
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 88/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- typescript
- Domain
- accessibility
Research direction
Start with packages/model-viewer/src/template.ts around lines 106-108 and reproduce the issue at modelviewer.dev/examples/annotations/#cameraViews by tabbing to the first annotation. Adjust the focus-related visibility behavior described in the issue, then verify that the annotation and its focus outline remain clearly visible when focus is within the slotted wrapper.
Written by the indexing model from the issue text.
Description
Potential a11y issue
Annotations may fail WCAG Focus Visible and/or Focus Appearance on focus.
Steps to reproduce:
- Go to https://modelviewer.dev/examples/annotations/#cameraViews
- Tab to the first annotation/hotspot
- Notice how the focused annotation element and belonging focus outline is barely visible:
Relevant CSS:
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.
- Dominant language
- TypeScript
- Stars
- 8.2k
- Forks
- 949
- PR merge metrics
- No merged PRs in 30d
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from google/model-viewer
-
Difficulty 3/5 1-2 days Newbie friendliness 65/100
google/model-viewer#5191 · 2 comments ·
-
Difficulty 4/5 3-5 days Newbie friendliness 45/100
google/model-viewer#5190 ·
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
google/model-viewer#5154 · 1 comment ·
-
WebXR manipulation gizmo has excessive offset from small 3D models, making interaction difficult Open
Difficulty 4/5 3-5 days Newbie friendliness 45/100
google/model-viewer#5150 · 1 comment ·
-
Difficulty 4/5 3-5 days Newbie friendliness 45/100
google/model-viewer#5148 · 1 comment ·
All issues in google/model-viewer
Similar issues
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 95/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100