fix(a11y): count aria-label without duplicated item in loop option

fixes #4782 fixes #4781
nolimits4web · Jul 22, 2021 · 4bd7461 · 4bd7461
1 parent 07b8dc3
commit 4bd7461
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/src/components/a11y/a11y.js b/src/components/a11y/a11y.js
@@ -160,11 +160,19 @@ const A11y = {
       swiper.a11y.addElRoleDescription($(swiper.slides), params.itemRoleDescriptionMessage);
     }
     swiper.a11y.addElRole($(swiper.slides), params.slideRole);
-    swiper.slides.each((slideEl) => {
+
+    const slidesLength = swiper.params.loop
+      ? swiper.slides.filter((el) => !el.classList.contains(swiper.params.slideDuplicateClass))
+          .length
+      : swiper.slides.length;
+    swiper.slides.each((slideEl, index) => {
       const $slideEl = $(slideEl);
+      const slideIndex = swiper.params.loop
+        ? parseInt($slideEl.attr('data-swiper-slide-index'), 10)
+        : index;
       const ariaLabelMessage = params.slideLabelMessage
-        .replace(/\{\{index\}\}/, $slideEl.index() + 1)
-        .replace(/\{\{slidesLength\}\}/, swiper.slides.length);
+        .replace(/\{\{index\}\}/, slideIndex + 1)
+        .replace(/\{\{slidesLength\}\}/, slidesLength);
       swiper.a11y.addElLabel($slideEl, ariaLabelMessage);
     });