Ignore the empty role option so that we can prevent Splide from assigning the role="region". Tweak the i18n string.

Author: NaotoshiFujita

dist/js/splide-renderer.min.js

@@ -830,12 +830,13 @@ function Elements(Splide2, Components2, options) {
 
   function init() {
     var id = root.id || uniqueId(PROJECT_CODE);
+    var role = options.role;
     root.id = id;
     track.id = track.id || id + "-track";
     list.id = list.id || id + "-list";
 
-    if (!getAttribute(root, ROLE)) {
-      setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || "");
+    if (!getAttribute(root, ROLE) && root.tagName !== "SECTION" && role) {
+      setAttribute(root, ROLE, role);
     }
 
     setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
@@ -2805,7 +2806,7 @@ var I18N = {
   pause: "Pause autoplay",
   carousel: "carousel",
   slide: "slide",
-  select: "Select slide to show",
+  select: "Select a slide to show",
   slideLabel: "%s of %s"
 };
 var DEFAULTS = {

dist/js/splide.cjs.js

@@ -825,12 +825,13 @@ function Elements(Splide2, Components2, options) {
 
   function init() {
     var id = root.id || uniqueId(PROJECT_CODE);
+    var role = options.role;
     root.id = id;
     track.id = track.id || id + "-track";
     list.id = list.id || id + "-list";
 
-    if (!getAttribute(root, ROLE)) {
-      setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || "");
+    if (!getAttribute(root, ROLE) && root.tagName !== "SECTION" && role) {
+      setAttribute(root, ROLE, role);
     }
 
     setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
@@ -2800,7 +2801,7 @@ var I18N = {
   pause: "Pause autoplay",
   carousel: "carousel",
   slide: "slide",
-  select: "Select slide to show",
+  select: "Select a slide to show",
   slideLabel: "%s of %s"
 };
 var DEFAULTS = {

dist/js/splide.esm.js

@@ -824,12 +824,13 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function init() {
       var id = root.id || uniqueId(PROJECT_CODE);
+      var role = options.role;
       root.id = id;
       track.id = track.id || id + "-track";
       list.id = list.id || id + "-list";
 
-      if (!getAttribute(root, ROLE)) {
-        setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || "");
+      if (!getAttribute(root, ROLE) && root.tagName !== "SECTION" && role) {
+        setAttribute(root, ROLE, role);
       }
 
       setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
@@ -2799,7 +2800,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     pause: "Pause autoplay",
     carousel: "carousel",
     slide: "slide",
-    select: "Select slide to show",
+    select: "Select a slide to show",
     slideLabel: "%s of %s"
   };
   var DEFAULTS = {

dist/js/splide.js

@@ -201,14 +201,15 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
    * which removes the region from the accessibility tree.
    */
   function init(): void {
-    const id = root.id || uniqueId( PROJECT_CODE );
+    const id   = root.id || uniqueId( PROJECT_CODE );
+    const role = options.role;
 
     root.id  = id;
     track.id = track.id || `${ id }-track`;
     list.id  = list.id || `${ id }-list`;
 
-    if ( ! getAttribute( root, ROLE ) ) {
-      setAttribute( root, ROLE, root.tagName !== 'SECTION' && options.role || '' );
+    if ( ! getAttribute( root, ROLE ) && root.tagName !== 'SECTION' && role ) {
+      setAttribute( root, ROLE, role );
     }
 
     setAttribute( root, ARIA_ROLEDESCRIPTION, i18n.carousel );

dist/js/splide.min.js

@@ -14,6 +14,6 @@ export const I18N = {
   pause     : 'Pause autoplay',
   carousel  : 'carousel',
   slide     : 'slide',
-  select    : 'Select slide to show',
+  select    : 'Select a slide to show',
   slideLabel: '%s of %s', // [ slide number ] / [ slide size ]
 };