Merge branch 'master' of https://github.com/nolimits4web/swiper

nolimits4web · Feb 23, 2021 · c3c1a69 · c3c1a69
2 parents 16f185e + 7054293
commit c3c1a69
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 13 deletions.
diff --git a/cypress/integration/modules/a11y.js b/cypress/integration/modules/a11y.js
@@ -4,7 +4,11 @@ context('Core', () => {
   describe('a11y', () => {
     beforeEach(() => {
       cy.swiperPage();
-      cy.initSwiper();
+      cy.initSwiper({
+        speed: 0,
+        navigation: true,
+        pagination: true,
+      });
     });
     it('should add aria-live="polite" to swiper-wrapper', () => {
       cy.getSliderWrapper().should('have.attr', 'aria-live', 'polite');
@@ -35,5 +39,19 @@ context('Core', () => {
       cy.getSlide(4).should('have.attr', 'aria-label', `5 / ${count}`);
       cy.getSlide(9).should('have.attr', 'aria-label', `10 / ${count}`);
     });
+
+    it('should navigate with arrows on enter or space key', () => {
+      cy.get('.swiper-button-next').trigger('keydown', { keyCode: 13 });
+      cy.getSlide(1).should('have.class', 'swiper-slide-active');
+      cy.get('.swiper-button-next').trigger('keydown', { keyCode: 32 });
+      cy.getSlide(2).should('have.class', 'swiper-slide-active');
+    });
+
+    it('should navigate with pagination on enter or space key', () => {
+      cy.get('.swiper-pagination-bullet:nth-child(2)').trigger('keydown', { keyCode: 13 });
+      cy.getSlide(1).should('have.class', 'swiper-slide-active');
+      cy.get('.swiper-pagination-bullet:nth-child(5)').trigger('keydown', { keyCode: 32 });
+      cy.getSlide(4).should('have.class', 'swiper-slide-active');
+    });
   });
 });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -76,8 +76,48 @@ Cypress.Commands.add(
       </div>
       `;
       // eslint-disable-next-line dot-notation
-      _window.swiper = new _window['SwiperClass'](el, config);
-      return _window.swiper;
+      const _config = config;
+      if (config.navigation === true) {
+        _config.navigation = {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+          hideOnClick: false,
+          disabledClass: 'swiper-button-disabled',
+          hiddenClass: 'swiper-button-hidden',
+          lockClass: 'swiper-button-lock',
+        };
+      }
+      if (config.pagination === true) {
+        _config.pagination = {
+          el: '.swiper-pagination',
+          bulletElement: 'span',
+          clickable: true,
+          hideOnClick: false,
+          renderBullet: null,
+          renderProgressbar: null,
+          renderFraction: null,
+          renderCustom: null,
+          progressbarOpposite: false,
+          type: 'bullets', // 'bullets' or 'progressbar' or 'fraction' or 'custom'
+          dynamicBullets: false,
+          dynamicMainBullets: 1,
+          formatFractionCurrent: (number) => number,
+          formatFractionTotal: (number) => number,
+          bulletClass: 'swiper-pagination-bullet',
+          bulletActiveClass: 'swiper-pagination-bullet-active',
+          modifierClass: 'swiper-pagination-', // NEW
+          currentClass: 'swiper-pagination-current',
+          totalClass: 'swiper-pagination-total',
+          hiddenClass: 'swiper-pagination-hidden',
+          progressbarFillClass: 'swiper-pagination-progressbar-fill',
+          progressbarOppositeClass: 'swiper-pagination-progressbar-opposite',
+          clickableClass: 'swiper-pagination-clickable', // NEW
+          lockClass: 'swiper-pagination-lock',
+        };
+      }
+      _window.swiperRef = new _window.Swiper(el, _config);
+      console.log(_window.swiperRef);
+      return _window.swiperRef;
     });
   },
 );

diff --git a/cypress/test.html b/cypress/test.html
@@ -6,8 +6,8 @@
   <title>Swiper demo</title>
   <script src="../package/swiper-bundle.js"></script>
   <script>
-    window.SwiperClass = Swiper;
-    window.swiper = null;
+    // window.SwiperClass = Swiper;
+    // window.swiper = null;
   </script>
   <!-- Link Swiper's CSS -->
   <link rel="stylesheet" href="../package/swiper-bundle.css" />

diff --git a/src/components/a11y/a11y.js b/src/components/a11y/a11y.js
@@ -46,10 +46,10 @@ const A11y = {
     $el.attr('aria-disabled', false);
     return $el;
   },
-  onEnterKey(e) {
+  onEnterOrSpaceKey(e) {
+    if (e.keyCode !== 13 && e.keyCode !== 32) return;
     const swiper = this;
     const params = swiper.params.a11y;
-    if (e.keyCode !== 13) return;
     const $targetEl = $(e.target);
     if (swiper.navigation && swiper.navigation.$nextEl && $targetEl.is(swiper.navigation.$nextEl)) {
       if (!(swiper.isEnd && !swiper.params.loop)) {
@@ -184,7 +184,7 @@ const A11y = {
       swiper.a11y.makeElFocusable($nextEl);
       if ($nextEl[0].tagName !== 'BUTTON') {
         swiper.a11y.addElRole($nextEl, 'button');
-        $nextEl.on('keydown', swiper.a11y.onEnterKey);
+        $nextEl.on('keydown', swiper.a11y.onEnterOrSpaceKey);
       }
       swiper.a11y.addElLabel($nextEl, params.nextSlideMessage);
       swiper.a11y.addElControls($nextEl, wrapperId);
@@ -193,7 +193,7 @@ const A11y = {
       swiper.a11y.makeElFocusable($prevEl);
       if ($prevEl[0].tagName !== 'BUTTON') {
         swiper.a11y.addElRole($prevEl, 'button');
-        $prevEl.on('keydown', swiper.a11y.onEnterKey);
+        $prevEl.on('keydown', swiper.a11y.onEnterOrSpaceKey);
       }
       swiper.a11y.addElLabel($prevEl, params.prevSlideMessage);
       swiper.a11y.addElControls($prevEl, wrapperId);
@@ -209,7 +209,7 @@ const A11y = {
       swiper.pagination.$el.on(
         'keydown',
         `.${swiper.params.pagination.bulletClass.replace(/ /g, '.')}`,
-        swiper.a11y.onEnterKey,
+        swiper.a11y.onEnterOrSpaceKey,
       );
     }
   },
@@ -227,10 +227,10 @@ const A11y = {
       $prevEl = swiper.navigation.$prevEl;
     }
     if ($nextEl) {
-      $nextEl.off('keydown', swiper.a11y.onEnterKey);
+      $nextEl.off('keydown', swiper.a11y.onEnterOrSpaceKey);
     }
     if ($prevEl) {
-      $prevEl.off('keydown', swiper.a11y.onEnterKey);
+      $prevEl.off('keydown', swiper.a11y.onEnterOrSpaceKey);
     }
 
     // Pagination
@@ -243,7 +243,7 @@ const A11y = {
       swiper.pagination.$el.off(
         'keydown',
         `.${swiper.params.pagination.bulletClass.replace(/ /g, '.')}`,
-        swiper.a11y.onEnterKey,
+        swiper.a11y.onEnterOrSpaceKey,
       );
     }
   },