Hidden elements can still receive keyboard focus
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Keep this element out of the tab order while its containing region is hidden — remove it from focus (for example tabindex="-1"), or apply the inert attribute to the hidden container where supported. Restore normal focusability when the region becomes visible.
View 36 affected elements
https://earthbar.com/pages/contactbutton#uw-skip-to-main<button class="uw-sl__item" data-uw-rm-ignore="true" data-uw-ignore-translate="true" lang="en-US" id="uw-skip-to-main"><span class="uw-sl__item__left" data-uw-ignore-translate="true"><span class="uw-sl__item__img"><svg focusable="false" width="26" height="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation"><g stroke="#000" stroke-width="1.5" fill="none" fill-rule="evenodd"><rect class="no-fill" fill="none" x=".75" y=".75" width="24.5" height="22.5" rx="3"></rect><path class="no-fill" fill="none" d="M1 7h24M9.5 7v17"></path></g></svg></span><span class="uw-sl__item__ti…
/ /pages/contact /products/powerx /products/slim-down /carthttps://earthbar.com/div#MediaGallery-template--26861016645942__featured_product_y8U33A > div > div > button:nth-of-type(2)<button type="button" class="slider-button slider-button--next" name="next" aria-label="Get next item" data-uw-rm-empty-ctrl="">
<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L5 5L1 9" stroke="var(--color-body, #151515)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>/ /products/powerx /products/slim-downhttps://earthbar.com/products/slim-downsection#shopify-section-template--26861017235766__main-product > div:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > button:nth-of-type(1)<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 5.5H2" stroke="var(--color-accent)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M5.30002 1L0.800018 5.5L5.30002 10" stroke="var(--color-accent)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>/ /products/powerx /products/slim-downhttps://earthbar.com/products/powerxdiv > div > div > div:nth-of-type(2) > slide-show > div:nth-of-type(1)<div class="flickity-nav flickity-prev" tabindex="0"> <svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14 5.5H2" stroke="var(--color-accent)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M5.30002 1L0.800018 5.5L5.30002 10" stroke="var(--color-accent)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div>
/products/powerx /products/slim-downhttps://earthbar.com/slide-show#product-grid-template--26861016645942__166366563622039b3e > div:nth-of-type(1)<div class="flickity-nav flickity-prev" tabindex="0" style="transform: translateY(-60.047px);"> <svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14 5.5H2" stroke="var(--color-accent)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M5.30002 1L0.800018 5.5L5.30002 10" stroke="var(--color-accent)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </div>