From 444e6f54b05fb076fa11c2c40dff884ca84f1f0f Mon Sep 17 00:00:00 2001 From: Pim de Wit Date: Tue, 17 Sep 2019 12:14:16 +0100 Subject: [PATCH 1/2] hotfix(a11y): fix for aria-hidden not applying to slides properly --- src/macro-carousel/macro-carousel.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/macro-carousel/macro-carousel.js b/src/macro-carousel/macro-carousel.js index 3cc4d56..9845649 100644 --- a/src/macro-carousel/macro-carousel.js +++ b/src/macro-carousel/macro-carousel.js @@ -1145,15 +1145,15 @@ value. Add CSS units to its value to avoid breaking the slides layout.`); 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`. + + // Ensure DOM is not accessible unless it is in the view. + slideEl.inert = !isSlideInView; 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, ''); + slideEl.setAttribute(ATTRS.STANDARD.TABINDEX, '-1'); } }); } From 1fea50dfe1d8c42210ec97948e4039160a678a63 Mon Sep 17 00:00:00 2001 From: Pim de Wit Date: Tue, 8 Oct 2019 18:29:31 +0100 Subject: [PATCH 2/2] feat(a11y): remove redundant logic --- src/macro-carousel/macro-carousel.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/macro-carousel/macro-carousel.js b/src/macro-carousel/macro-carousel.js index 9845649..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)); // Ensure DOM is not accessible unless it is in the view. slideEl.inert = !isSlideInView; - 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.setAttribute(ATTRS.STANDARD.TABINDEX, '-1'); - } }); }