html - Focusable content should have tabindex='-1' or be removed from the DOM error

Hi I'm receiving an error when running a local scan on a web page I've got using Shopify. Im just practicing at the moment but I don't know how to correctly use tabindex="-1"

      {%- if section.blocks.size > 0 -%}
  <div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper" role="region" aria-hidden="true" tabindex="-1">
    <div tabindex="-1">Tabbable due to tabindex.</div>
    <div class="slideshow slideshow--{{ section.settings.slideshow_height }} {% if display_controls %} slideshow--display-controls{% endif %}"
         id="Slideshow-{{ section.id }}" aria-hidden="true" 
         data-autorotate="{{ section.settings.autorotate }}"
         data-speed="{{ section.settings.autorotate_speed | times: 1000 }}"
         data-adapt-height="{%- if section.settings.slideshow_height == 'adapt' -%}true{%- else -%}false{%- endif -%}"
         data-slide-nav-a11y="{{ 'sections.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
         {%- if section.settings.slideshow_height == 'adapt' -%}data-min-aspect-ratio="{{ min_aspect_ratio }}"
         style="height: {{ wrapper_height }}vw"{%- endif -%}  aria-labelledby=”Slideshow″ >
Copy code

The error Im getting is:

Focusable content should have tabindex='-1' or be removed from the DOM
Copy code

If you look at line 2 this is where my code im working on is. I dont know if this is the correct place for it but I seem to have narrowed the element down to here. Could someone explain how I can correctly use tabindex in this situation?

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.