feat(a11y): add aria-current to current bullet (#5258)

* feat(a11y): add `aria-current` to current bullet * fix(a11y): aria current bullet * fix(a11y): current bullet * fix(a11y): current bullet * fix(a11y): current bullet * fix(a11y): current behaivor * test(a11y): current bullet * refactor(a11y): hasPagination
nolimits4web · Dec 13, 2021 · b5df68e · b5df68e
1 parent 627ca3a
commit b5df68e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 13 deletions.
diff --git a/cypress/integration/modules/a11y.js b/cypress/integration/modules/a11y.js
@@ -72,5 +72,14 @@ context('Core', () => {
       cy.get('.swiper-pagination-bullet:nth-child(5)').trigger('keydown', { keyCode: 32 });
       cy.getSlide(4).should('have.class', 'swiper-slide-active');
     });
+
+    it('Current bullet should have aria-current true', () => {
+      cy.slideTo(2);
+      cy.getPaginationBullet(2).should('have.attr', 'aria-current', 'true');
+      cy.getPaginationBullet(4).should('not.have.attr', 'aria-current');
+      cy.slideTo(4);
+      cy.getPaginationBullet(2).should('not.have.attr', 'aria-current');
+      cy.getPaginationBullet(4).should('have.attr', 'aria-current', 'true');
+    });
   });
 });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -45,6 +45,11 @@ Cypress.Commands.add('getPaginationBullet', { prevSubject: 'optional' }, (subjec
   return cy.get(`.swiper-pagination-bullet:nth-child(${bulletIndex + 1})`);
 });
 
+Cypress.Commands.add('slideTo', { prevSubject: 'optional' }, (subject, slideIndex) => {
+  return cy.window().then((_window) => {
+    _window.swiperRef.slideTo(slideIndex);
+  });
+});
 Cypress.Commands.add(
   'initSwiper',
   { prevSubject: 'optional' },

diff --git a/src/modules/a11y/a11y.js b/src/modules/a11y/a11y.js
@@ -121,19 +121,19 @@ export default function A11y({ swiper, extendParams, on }) {
   }
 
   function hasPagination() {
-    return (
-      swiper.pagination &&
-      swiper.params.pagination.clickable &&
-      swiper.pagination.bullets &&
-      swiper.pagination.bullets.length
-    );
+    return swiper.pagination && swiper.pagination.bullets && swiper.pagination.bullets.length;
+  }
+
+  function hasClickablePagination() {
+    return hasPagination() && swiper.params.pagination.clickable;
   }
 
   function updatePagination() {
     const params = swiper.params.a11y;
-    if (hasPagination()) {
-      swiper.pagination.bullets.each((bulletEl) => {
-        const $bulletEl = $(bulletEl);
+    if (!hasPagination()) return;
+    swiper.pagination.bullets.each((bulletEl) => {
+      const $bulletEl = $(bulletEl);
+      if (swiper.params.pagination.clickable) {
         makeElFocusable($bulletEl);
         if (!swiper.params.pagination.renderBullet) {
           addElRole($bulletEl, 'button');
@@ -142,8 +142,13 @@ export default function A11y({ swiper, extendParams, on }) {
             params.paginationBulletMessage.replace(/\{\{index\}\}/, $bulletEl.index() + 1),
           );
         }
-      });
-    }
+      }
+      if ($bulletEl.is(`.${swiper.params.pagination.bulletActiveClass}`)) {
+        $bulletEl.attr('aria-current', 'true');
+      } else {
+        $bulletEl.removeAttr('aria-current');
+      }
+    });
   }
 
   const initNavEl = ($el, wrapperId, message) => {
@@ -216,7 +221,7 @@ export default function A11y({ swiper, extendParams, on }) {
     }
 
     // Pagination
-    if (hasPagination()) {
+    if (hasClickablePagination()) {
       swiper.pagination.$el.on(
         'keydown',
         classesToSelector(swiper.params.pagination.bulletClass),
@@ -243,7 +248,7 @@ export default function A11y({ swiper, extendParams, on }) {
     }
 
     // Pagination
-    if (hasPagination()) {
+    if (hasClickablePagination()) {
       swiper.pagination.$el.off(
         'keydown',
         classesToSelector(swiper.params.pagination.bulletClass),