diff --git a/src/macro-carousel/macro-carousel.js b/src/macro-carousel/macro-carousel.js index 3cc4d56..ae7dbcd 100644 --- a/src/macro-carousel/macro-carousel.js +++ b/src/macro-carousel/macro-carousel.js @@ -1131,7 +1131,7 @@ value. Add CSS units to its value to avoid breaking the slides layout.`); } /** - * Updates the `aria-hidden` and `inert` attributes on the slides. + * Update accessibility attributes on slides. * @private */ _updateSlidesA11y() { @@ -1140,21 +1140,12 @@ value. Add CSS units to its value to avoid breaking the slides layout.`); slidesInView.push((this.selected + i) % this._slides.length); } - // Set aria-hidden to false only for the slides whose indexes are included - // in the slidesInView array. let isSlideInView; this._slides.map(slide => slide.element).forEach((slideEl, slideIndex) => { isSlideInView = !isUndefined(slidesInView.find(i => i === slideIndex)); - // Slides in view have `aria-hidden` set to `false`. - slideEl.setAttribute(ATTRS.STANDARD.ARIA.HIDDEN, - isSlideInView ? ATTR_VALUES.FALSE : ATTR_VALUES.TRUE); - // Slides in view don't have the `inert` attribute and can be focused. - if (isSlideInView) { - slideEl.removeAttribute(ATTRS.STANDARD.INERT); - slideEl.setAttribute(ATTRS.STANDARD.TABINDEX, -1); - } else { - slideEl.setAttribute(ATTRS.STANDARD.INERT, ''); - } + + // Ensure DOM is not accessible unless it is in the view. + slideEl.inert = !isSlideInView; }); }