diff --git a/cypress/integration/modules/a11y.js b/cypress/integration/modules/a11y.js index df3b7b950..23db86f0f 100644 --- 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 index 56a801aee..51bf77ce0 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -76,8 +76,48 @@ Cypress.Commands.add( `; // 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 index bc86c32ab..a41dc2be6 100644 --- a/cypress/test.html +++ b/cypress/test.html @@ -6,8 +6,8 @@ Swiper demo diff --git a/src/components/a11y/a11y.js b/src/components/a11y/a11y.js index 4de24e392..801bdc0ae 100644 --- 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, ); } },