feat(a11y): add a11y.slideRole parameter for custom slide role

fixes #4435
nolimits4web · Apr 19, 2021 · 097109f · 097109f
1 parent fd93913
commit 097109f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/components/a11y/a11y.js b/src/components/a11y/a11y.js
@@ -165,7 +165,7 @@ const A11y = {
     if (params.itemRoleDescriptionMessage) {
       swiper.a11y.addElRoleDescription($(swiper.slides), params.itemRoleDescriptionMessage);
     }
-    swiper.a11y.addElRole($(swiper.slides), 'group');
+    swiper.a11y.addElRole($(swiper.slides), params.slideRole);
     swiper.slides.each((slideEl) => {
       const $slideEl = $(slideEl);
       const ariaLabelMessage = params.slideLabelMessage
@@ -267,6 +267,7 @@ export default {
       containerMessage: null,
       containerRoleDescriptionMessage: null,
       itemRoleDescriptionMessage: null,
+      slideRole: 'group',
     },
   },
   create() {

diff --git a/src/types/components/a11y.d.ts b/src/types/components/a11y.d.ts
@@ -79,4 +79,11 @@ export interface A11yOptions {
    * @default '{{index}} / {{slidesLength}}'
    */
   slideLabelMessage?: string;
+
+  /**
+   * Value of swiper slide `role` attribute
+   *
+   * @default 'group'
+   */
+  slideRole?: string;
 }