0

I'm currently using hotspot annotations in my web component project using Google's Model Viewer. My html is structured as follows:

<my-element>
   #shadow-root
      <model-viewer>
         <button class="hotspot1" aria-label="hotspot button 1">
            <span class="inner-circle" tabindex="-1"></span>
            <span class="annotation" tabindex="-1">Descriptive text here</span>
         </button>
         <button class="hotspot2" aria-label="hotspot button 2">
            <span class="inner-circle" tabindex="-1"></span>
            <span class="annotation" tabindex="-1">Descriptive text here</span>
         </button>
         <button class="hotspot3" aria-label="hotspot button 3">
            <span class="inner-circle" tabindex="-1"></span>
            <span class="annotation" tabindex="-1">Descriptive text here</span>
         </button>
      ...
      </model-viewer>
</my-element>

For accessibility reasons I'd like tab to skip over the span elements within the buttons, and only tab through the buttons themselves. To do this I am setting their tab-indexes to -1, as suggested here. Unfortunately it seems that it's still tabbing through each hotspot 3 times (one for the button, first span, and second span) despite whatever I set tabindex to.

I've verified that the issue is device and browser agnostic. Am I implementing tabindex wrong somehow?

Cameron Crane
  • 113
  • 1
  • 12
  • Easiest is to not use shadowDOM – Danny '365CSI' Engelman Oct 05 '22 at 08:48
  • Unfortunately the shadowDOM is needed for this project. Does tabindex just not work for elements in the shadowDOM? – Cameron Crane Oct 05 '22 at 14:17
  • No, TabIndex and shadowDOM needs work to be done yourself. But the least you need to do to get help here is a executable StackOverflow Snippet to your post. It will help readers execute your code with one click. And help create answers with one click. See [How to add a StackOverflow snippet](https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers) – Danny '365CSI' Engelman Oct 05 '22 at 16:15

0 Answers0