From 3d4039bbfaddb60f969a35cc7bd3c2ac2121535d Mon Sep 17 00:00:00 2001 From: Vlad Date: Tue, 23 Feb 2021 09:32:41 +0200 Subject: [PATCH 1/3] fix(a11y): space should trigger role button --- src/components/a11y/a11y.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) 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, ); } }, From 8fa6d64a46ed58c0ac11565699a9913814bb1fe5 Mon Sep 17 00:00:00 2001 From: Vlad Date: Tue, 23 Feb 2021 09:57:19 +0200 Subject: [PATCH 2/3] tests(a11y): space should trigger role button --- cypress/integration/modules/a11y.js | 20 +++++++++++- cypress/support/commands.js | 48 +++++++++++++++++++++++++++-- cypress/test.html | 4 +-- 3 files changed, 66 insertions(+), 6 deletions(-) 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..bba1ebe00 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -75,9 +75,51 @@ Cypress.Commands.add( } `; - // 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; + }); }); }, ); 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 From 9915f8b8698635e06815412c08b7d49cddba42d3 Mon Sep 17 00:00:00 2001 From: Vlad Date: Tue, 23 Feb 2021 10:02:15 +0200 Subject: [PATCH 3/3] fix(e2e): initSwiper --- cypress/support/commands.js | 88 ++++++++++++++++++------------------- 1 file changed, 43 insertions(+), 45 deletions(-) diff --git a/cypress/support/commands.js b/cypress/support/commands.js index bba1ebe00..51bf77ce0 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -75,51 +75,49 @@ Cypress.Commands.add( } `; - 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; - }); + // 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; }); }, );