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;
 }