Model-viewer: Annotations Improvements / Issues

[hybridherbst]

Description

Yes, I know this was just merged 2 hours ago in #917, and I'm super happy about it, so I want to feedback early :)

1) Would be great if the HTML focus outlines would not show by default, pretty confusing
(btw, same is true for the whole model-viewer component)

2) Annotation Boxes and Hotspots should be draggable by default
Current behaviour leads to user interaction interruptions when an element (hotspot or annotation box) happens to end up below the cursor.

Live Demo

https://modelviewer.dev/examples/annotations.html

[cdata]

@soraryu we integrated support for the :focus-visible polyfill a while back to address the focus problem. If you put the :focus-visible polyfill on your page, then the focus ring on <model-viewer> will only display by default for keyboard or screen reader-like focus conditions.

As for the hotspots themselves, you can fully control the focus state with CSS. Eventually, we will have built-in default hotspots (for when you don't want to define your own hotspot elements) and those will have out-of-the-box support for the :focus-visible polyfill as well.

For now, my recommendation would be to implement the :focus-visible polyfill for your own elements per step 2 of the polyfill usage docs. This is just a matter of adding some CSS to your page (along with the polyfill), and it will ensure that the focus ring generally shows up for users who are likely to need it for a11y purposes.

If you can't or don't want to add the :focus-visible polyfill to your page, you can still use CSS to disable the focus ring on the hotspots. Just keep in mind that the focus ring is important for users with low-or-zero vision capabilities. The CSS to disable the focus ring on just the hotspot nodes would look like this:

model-viewer [slot^="hotspot"]:focus {
  outline: none;
}

[elalish]

@soraryu Regarding your second point, we put pointer-events to auto since it seemed like people would want to interact with their hotspots. Are you having any trouble working around this with CSS? Changing the default is possible; I don't personally have a strong opinion one way or the other.

[cdata]

@soraryu to expand on @elalish 's point, if you want part of the hotspot (like that annotation) to be non-interactive, you can set CSS on it like:

model-viewer [slot="hotspot-foo"] > * {
  pointer-events: none;
}

[hybridherbst]

I would very much want to be able to interact with them. However, there's a difference between drag and click - I think by default click should go to the hotspot while drag goes to model-viewer. Could that be configured with CSS as well?

[cdata]

Yah, this is probably something we should look into helping with. It is possible with CSS and JS, but hard to do right.

So my thinking is that we could add the following:

• when a hotspot becomes "occluded," we set pointer-events: none to prevent phantom hotspots from absorbing clicks
• when a user starts interacting with a model, we set pointer-events: none on all hotspots for the duration of the interaction to prevent tumbling from being interrupted by a hotspot

I think most other things would probably be better handled with external CSS.

[cdata]

I filed #980 and #981 to cover those two items I mentioned above.

@soraryu let me know if the :focus-visible stuff works out for you; if it does, I will close out this issue.