Prevent the option from overriding a root role if it is provided by HTML. Use `role="presentation"` instead of `"none"`.

dist/js/splide.cjs.js

@@ -759,6 +759,7 @@ function Elements(Splide2, Components2, options) {
   var slides = [];
   var rootClasses = [];
   var trackClasses = [];
+  var rootRole;
   var track;
   var list;
 
@@ -779,6 +780,7 @@ function Elements(Splide2, Components2, options) {
     removeClass(root, rootClasses);
     removeClass(track, trackClasses);
     removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style"));
+    setAttribute(root, ROLE, rootRole);
   }
 
   function update() {
@@ -818,9 +820,10 @@ function Elements(Splide2, Components2, options) {
     root.id = id;
     track.id = track.id || id + "-track";
     list.id = list.id || id + "-list";
+    rootRole = getAttribute(root, ROLE);
     setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
-    setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || "");
-    setAttribute(list, ROLE, "none");
+    setAttribute(root, ROLE, rootRole || root.tagName !== "SECTION" && options.role || "");
+    setAttribute(list, ROLE, "presentation");
   }
 
   function find(selector) {
@@ -2555,7 +2558,7 @@ function Pagination(Splide2, Components2, options) {
         bind(button, "keydown", apply(onKeydown, i));
       }
 
-      setAttribute(li, ROLE, "none");
+      setAttribute(li, ROLE, "presentation");
       setAttribute(button, ROLE, "tab");
       setAttribute(button, ARIA_CONTROLS, controls.join(" "));
       setAttribute(button, ARIA_LABEL, format(text, i + 1));

dist/js/splide.esm.js

@@ -754,6 +754,7 @@ function Elements(Splide2, Components2, options) {
   var slides = [];
   var rootClasses = [];
   var trackClasses = [];
+  var rootRole;
   var track;
   var list;
 
@@ -774,6 +775,7 @@ function Elements(Splide2, Components2, options) {
     removeClass(root, rootClasses);
     removeClass(track, trackClasses);
     removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style"));
+    setAttribute(root, ROLE, rootRole);
   }
 
   function update() {
@@ -813,9 +815,10 @@ function Elements(Splide2, Components2, options) {
     root.id = id;
     track.id = track.id || id + "-track";
     list.id = list.id || id + "-list";
+    rootRole = getAttribute(root, ROLE);
     setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
-    setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || "");
-    setAttribute(list, ROLE, "none");
+    setAttribute(root, ROLE, rootRole || root.tagName !== "SECTION" && options.role || "");
+    setAttribute(list, ROLE, "presentation");
   }
 
   function find(selector) {
@@ -2550,7 +2553,7 @@ function Pagination(Splide2, Components2, options) {
         bind(button, "keydown", apply(onKeydown, i));
       }
 
-      setAttribute(li, ROLE, "none");
+      setAttribute(li, ROLE, "presentation");
       setAttribute(button, ROLE, "tab");
       setAttribute(button, ARIA_CONTROLS, controls.join(" "));
       setAttribute(button, ARIA_LABEL, format(text, i + 1));

dist/js/splide.js

@@ -753,6 +753,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var slides = [];
     var rootClasses = [];
     var trackClasses = [];
+    var rootRole;
     var track;
     var list;
 
@@ -773,6 +774,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       removeClass(root, rootClasses);
       removeClass(track, trackClasses);
       removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style"));
+      setAttribute(root, ROLE, rootRole);
     }
 
     function update() {
@@ -812,9 +814,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       root.id = id;
       track.id = track.id || id + "-track";
       list.id = list.id || id + "-list";
+      rootRole = getAttribute(root, ROLE);
       setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
-      setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || "");
-      setAttribute(list, ROLE, "none");
+      setAttribute(root, ROLE, rootRole || root.tagName !== "SECTION" && options.role || "");
+      setAttribute(list, ROLE, "presentation");
     }
 
     function find(selector) {
@@ -2549,7 +2552,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           bind(button, "keydown", apply(onKeydown, i));
         }
 
-        setAttribute(li, ROLE, "none");
+        setAttribute(li, ROLE, "presentation");
         setAttribute(button, ROLE, "tab");
         setAttribute(button, ARIA_CONTROLS, controls.join(" "));
         setAttribute(button, ARIA_LABEL, format(text, i + 1));

src/js/components/Elements/Elements.ts

@@ -26,6 +26,7 @@ import {
   children,
   empty,
   forOwn,
+  getAttribute,
   push,
   query,
   removeAttribute,
@@ -94,6 +95,11 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
    */
   let trackClasses: string[] = [];
 
+  /**
+   * Keeps the role provided by HTML.
+   */
+  let rootRole: string;
+
   /**
    * The track element.
    */
@@ -130,6 +136,7 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
     removeClass( root, rootClasses );
     removeClass( track, trackClasses );
     removeAttribute( [ root, track, list ], ALL_ATTRIBUTES.concat( 'style' ) );
+    setAttribute( root, ROLE, rootRole );
   }
 
   /**
@@ -178,10 +185,11 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
     root.id  = id;
     track.id = track.id || `${ id }-track`;
     list.id  = list.id || `${ id }-list`;
+    rootRole = getAttribute( root, ROLE );
 
     setAttribute( root, ARIA_ROLEDESCRIPTION, i18n.carousel );
-    setAttribute( root, ROLE, root.tagName !== 'SECTION' && options.role || '' );
-    setAttribute( list, ROLE, 'none' );
+    setAttribute( root, ROLE, rootRole || root.tagName !== 'SECTION' && options.role || '' );
+    setAttribute( list, ROLE, 'presentation' );
   }
 
   /**

src/js/components/Pagination/Pagination.ts

@@ -160,7 +160,7 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
         bind( button, 'keydown', apply( onKeydown, i ) );
       }
 
-      setAttribute( li, ROLE, 'none' );
+      setAttribute( li, ROLE, 'presentation' );
       setAttribute( button, ROLE, 'tab' );
       setAttribute( button, ARIA_CONTROLS, controls.join( ' ' ) );
       setAttribute( button, ARIA_LABEL, format( text, i + 1 ) );