feat: a11y.slideLabelMessage

Author: vltansky

cypress/integration/modules/a11y.js

@@ -14,13 +14,30 @@ context('Core', () => {
  cy.getSliderWrapper().should('have.attr', 'aria-live', 'polite');
  });
 
+ it.only('paginationBulletMessage', () => {
+ cy.initSwiper({
+ pagination: true,
+ a11y: { paginationBulletMessage: 'Slide to {{index}}' },
+ });
+ cy.getPaginationBullet(1).should('have.attr', 'Slide to', '2');
+ });
+
  it('should add aria-role-description="slide" to swiper-slide', () => {
  cy.initSwiper({
  a11y: { itemRoleDescriptionMessage: 'test' },
  });
  cy.getSlides().should('have.attr', 'aria-role-description', 'test');
  });
 
+ it('should add aria-label="1 of 10" to swiper-slide', () => {
+ cy.initSwiper({
+ a11y: { slideLabelMessage: '{{index}} of {{slidesLength}}' },
+ });
+ cy.getSlide(0).should('have.attr', 'aria-label', '1 of 10');
+ cy.getSlide(4).should('have.attr', 'aria-label', '5 of 10');
+ cy.getSlide(9).should('have.attr', 'aria-label', '10 of 10');
+ });
+
  it('should add aria-role-description="slide" to swiper-container', () => {
  cy.initSwiper({
  a11y: { containerRoleDescriptionMessage: 'test' },

cypress/support/commands.js

@@ -30,6 +30,7 @@ Cypress.Commands.add('getSliderContainer', { prevSubject: 'optional' }, () => {
 Cypress.Commands.add('getSlide', { prevSubject: 'optional' }, (subject, slideIndex) => {
  return cy.get(`.swiper-slide:nth-child(${slideIndex + 1})`);
 });
+
 Cypress.Commands.add('getSlideContains', { prevSubject: 'optional' }, (subject, content) => {
  cy.get('.swiper-container').contains(content);
 });
@@ -40,6 +41,10 @@ Cypress.Commands.add('swiperPage', { prevSubject: 'optional' }, () => {
  return cy.visit('cypress/test.html');
 });
 
+Cypress.Commands.add('getPaginationBullet', { prevSubject: 'optional' }, (subject, bulletIndex) => {
+ return cy.get(`.swiper-pagination-bullet:nth-child(${bulletIndex + 1})`);
+});
+
 Cypress.Commands.add(
  'initSwiper',
  { prevSubject: 'optional' },

src/components/a11y/a11y.js

@@ -167,7 +167,10 @@ const A11y = {
  swiper.a11y.addElRole($(swiper.slides), 'group');
  swiper.slides.each((slideEl) => {
  const $slideEl = $(slideEl);
- swiper.a11y.addElLabel($slideEl, `${$slideEl.index() + 1} / ${swiper.slides.length}`);
+ const ariaLabelMessage = params.slideLabelMessage
+ .replace(/\{\{index\}\}/, $slideEl.index() + 1)
+ .replace(/\{\{slidesLength\}\}/, swiper.slides.length);
+ swiper.a11y.addElLabel($slideEl, ariaLabelMessage);
  });
 
  // Navigation
@@ -259,6 +262,7 @@ export default {
  firstSlideMessage: 'This is the first slide',
  lastSlideMessage: 'This is the last slide',
  paginationBulletMessage: 'Go to slide {{index}}',
+ slideLabelMessage: '{{index}} / {{slidesLength}}',
  containerMessage: null,
  containerRoleDescriptionMessage: null,
  itemRoleDescriptionMessage: null,

src/types/components/a11y.d.ts

@@ -72,4 +72,11 @@ export interface A11yOptions {
  * @default null
  */
  itemRoleDescriptionMessage?: string | null;
+
+ /**
+ * Message for screen readers describing the label of slide element
+ *
+ * @default '{{index}} / {{slidesLength}}'
+ */
+ slideLabelMessage?: string;
 }