tests(a11y): space should trigger role button

Author: vltansky

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');
+    });
   });
 });

cypress/support/commands.js

@@ -75,9 +75,51 @@ Cypress.Commands.add(
         }
       </div>
       `;
-      // eslint-disable-next-line dot-notation
-      _window.swiper = new _window['SwiperClass'](el, config);
-      return _window.swiper;
+      setTimeout(() => {
+        // eslint-disable-next-line dot-notation
+        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;
+      });
     });
   },
 );

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" />