Bug Fix: The `role` of the root element must not be updated.

dist/js/splide.cjs.js

@@ -692,9 +692,9 @@ var ARIA_LABEL = ARIA_PREFIX + "label";
 var ARIA_HIDDEN = ARIA_PREFIX + "hidden";
 var ARIA_ORIENTATION = ARIA_PREFIX + "orientation";
 var ARIA_ROLEDESCRIPTION = ARIA_PREFIX + "roledescription";
-var ARIA_ATOMIC = ARIA_PREFIX + "atomic";
 var ARIA_LIVE = ARIA_PREFIX + "live";
-var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION, ARIA_ATOMIC, ARIA_LIVE];
+var ARIA_RELEVANT = ARIA_PREFIX + "relevant";
+var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
 var CLASS_ROOT = PROJECT_CODE;
 var CLASS_TRACK = PROJECT_CODE + "__track";
 var CLASS_LIST = PROJECT_CODE + "__list";
@@ -767,9 +767,10 @@ function Elements(Splide2, Components2, options) {
   var i18n = options.i18n;
   var elements = {};
   var slides = [];
+  var rootRole = getAttribute(root, ROLE);
+  var rootLabel = getAttribute(root, ARIA_LABEL);
   var rootClasses = [];
   var trackClasses = [];
-  var rootRole;
   var track;
   var list;
   var isUsingKey;
@@ -794,12 +795,19 @@ function Elements(Splide2, Components2, options) {
     });
   }
 
-  function destroy() {
+  function destroy(completely) {
     empty(slides);
     removeClass(root, rootClasses);
     removeClass(track, trackClasses);
-    removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style"));
-    setAttribute(root, ROLE, rootRole);
+    removeAttribute([track, list], ALL_ATTRIBUTES.concat("style"));
+    removeAttribute(root, "style");
+
+    if (completely) {
+      removeAttribute(root, ALL_ATTRIBUTES);
+      setAttribute(root, ROLE, rootRole);
+    }
+
+    setAttribute(root, ARIA_LABEL, rootLabel);
   }
 
   function update() {
@@ -836,12 +844,12 @@ function Elements(Splide2, Components2, options) {
 
   function init() {
     var id = root.id || uniqueId(PROJECT_CODE);
+    var role = rootRole || root.tagName !== "SECTION" && options.role || "";
     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, rootRole || root.tagName !== "SECTION" && options.role || "");
+    getAttribute(root, ROLE) || setAttribute(root, ROLE, role);
     setAttribute(list, ROLE, "presentation");
   }
 
@@ -2782,15 +2790,18 @@ function Live(Splide2, Components2, options) {
 
   function mount() {
     if (enabled) {
+      disable(!Components2.Autoplay.isPaused());
+      setAttribute(track, ARIA_RELEVANT, "additions");
+      sr.textContent = "\u2026";
       on(EVENT_AUTOPLAY_PLAY, apply(disable, true));
       on(EVENT_AUTOPLAY_PAUSE, apply(disable, false));
-      on([EVENT_MOUNTED, EVENT_REFRESH], init);
-      on([EVENT_MOVED, EVENT_SCROLLED], update);
+      on([EVENT_MOVED, EVENT_SCROLLED], apply(append, track, sr));
     }
   }
 
-  function init() {
-    disable(!Components2.Autoplay.isPaused());
+  function destroy() {
+    removeAttribute(track, [ARIA_LIVE, ARIA_RELEVANT]);
+    remove(sr);
   }
 
   function disable(disabled) {
@@ -2799,15 +2810,10 @@ function Live(Splide2, Components2, options) {
     }
   }
 
-  function update() {
-    append(track, sr);
-    sr.textContent = "\u2026";
-  }
-
   return {
     mount: mount,
     disable: disable,
-    destroy: apply(remove, sr)
+    destroy: destroy
   };
 }
 

dist/js/splide.esm.js

@@ -687,9 +687,9 @@ var ARIA_LABEL = ARIA_PREFIX + "label";
 var ARIA_HIDDEN = ARIA_PREFIX + "hidden";
 var ARIA_ORIENTATION = ARIA_PREFIX + "orientation";
 var ARIA_ROLEDESCRIPTION = ARIA_PREFIX + "roledescription";
-var ARIA_ATOMIC = ARIA_PREFIX + "atomic";
 var ARIA_LIVE = ARIA_PREFIX + "live";
-var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION, ARIA_ATOMIC, ARIA_LIVE];
+var ARIA_RELEVANT = ARIA_PREFIX + "relevant";
+var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
 var CLASS_ROOT = PROJECT_CODE;
 var CLASS_TRACK = PROJECT_CODE + "__track";
 var CLASS_LIST = PROJECT_CODE + "__list";
@@ -762,9 +762,10 @@ function Elements(Splide2, Components2, options) {
   var i18n = options.i18n;
   var elements = {};
   var slides = [];
+  var rootRole = getAttribute(root, ROLE);
+  var rootLabel = getAttribute(root, ARIA_LABEL);
   var rootClasses = [];
   var trackClasses = [];
-  var rootRole;
   var track;
   var list;
   var isUsingKey;
@@ -789,12 +790,19 @@ function Elements(Splide2, Components2, options) {
     });
   }
 
-  function destroy() {
+  function destroy(completely) {
     empty(slides);
     removeClass(root, rootClasses);
     removeClass(track, trackClasses);
-    removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style"));
-    setAttribute(root, ROLE, rootRole);
+    removeAttribute([track, list], ALL_ATTRIBUTES.concat("style"));
+    removeAttribute(root, "style");
+
+    if (completely) {
+      removeAttribute(root, ALL_ATTRIBUTES);
+      setAttribute(root, ROLE, rootRole);
+    }
+
+    setAttribute(root, ARIA_LABEL, rootLabel);
   }
 
   function update() {
@@ -831,12 +839,12 @@ function Elements(Splide2, Components2, options) {
 
   function init() {
     var id = root.id || uniqueId(PROJECT_CODE);
+    var role = rootRole || root.tagName !== "SECTION" && options.role || "";
     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, rootRole || root.tagName !== "SECTION" && options.role || "");
+    getAttribute(root, ROLE) || setAttribute(root, ROLE, role);
     setAttribute(list, ROLE, "presentation");
   }
 
@@ -2777,15 +2785,18 @@ function Live(Splide2, Components2, options) {
 
   function mount() {
     if (enabled) {
+      disable(!Components2.Autoplay.isPaused());
+      setAttribute(track, ARIA_RELEVANT, "additions");
+      sr.textContent = "\u2026";
       on(EVENT_AUTOPLAY_PLAY, apply(disable, true));
       on(EVENT_AUTOPLAY_PAUSE, apply(disable, false));
-      on([EVENT_MOUNTED, EVENT_REFRESH], init);
-      on([EVENT_MOVED, EVENT_SCROLLED], update);
+      on([EVENT_MOVED, EVENT_SCROLLED], apply(append, track, sr));
     }
   }
 
-  function init() {
-    disable(!Components2.Autoplay.isPaused());
+  function destroy() {
+    removeAttribute(track, [ARIA_LIVE, ARIA_RELEVANT]);
+    remove(sr);
   }
 
   function disable(disabled) {
@@ -2794,15 +2805,10 @@ function Live(Splide2, Components2, options) {
     }
   }
 
-  function update() {
-    append(track, sr);
-    sr.textContent = "\u2026";
-  }
-
   return {
     mount: mount,
     disable: disable,
-    destroy: apply(remove, sr)
+    destroy: destroy
   };
 }
 

dist/js/splide.js

@@ -688,9 +688,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var ARIA_HIDDEN = ARIA_PREFIX + "hidden";
   var ARIA_ORIENTATION = ARIA_PREFIX + "orientation";
   var ARIA_ROLEDESCRIPTION = ARIA_PREFIX + "roledescription";
-  var ARIA_ATOMIC = ARIA_PREFIX + "atomic";
   var ARIA_LIVE = ARIA_PREFIX + "live";
-  var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION, ARIA_ATOMIC, ARIA_LIVE];
+  var ARIA_RELEVANT = ARIA_PREFIX + "relevant";
+  var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
   var CLASS_ROOT = PROJECT_CODE;
   var CLASS_TRACK = PROJECT_CODE + "__track";
   var CLASS_LIST = PROJECT_CODE + "__list";
@@ -761,9 +761,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var i18n = options.i18n;
     var elements = {};
     var slides = [];
+    var rootRole = getAttribute(root, ROLE);
+    var rootLabel = getAttribute(root, ARIA_LABEL);
     var rootClasses = [];
     var trackClasses = [];
-    var rootRole;
     var track;
     var list;
     var isUsingKey;
@@ -788,12 +789,19 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       });
     }
 
-    function destroy() {
+    function destroy(completely) {
       empty(slides);
       removeClass(root, rootClasses);
       removeClass(track, trackClasses);
-      removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style"));
-      setAttribute(root, ROLE, rootRole);
+      removeAttribute([track, list], ALL_ATTRIBUTES.concat("style"));
+      removeAttribute(root, "style");
+
+      if (completely) {
+        removeAttribute(root, ALL_ATTRIBUTES);
+        setAttribute(root, ROLE, rootRole);
+      }
+
+      setAttribute(root, ARIA_LABEL, rootLabel);
     }
 
     function update() {
@@ -830,12 +838,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function init() {
       var id = root.id || uniqueId(PROJECT_CODE);
+      var role = rootRole || root.tagName !== "SECTION" && options.role || "";
       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, rootRole || root.tagName !== "SECTION" && options.role || "");
+      getAttribute(root, ROLE) || setAttribute(root, ROLE, role);
       setAttribute(list, ROLE, "presentation");
     }
 
@@ -2776,15 +2784,18 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function mount() {
       if (enabled) {
+        disable(!Components2.Autoplay.isPaused());
+        setAttribute(track, ARIA_RELEVANT, "additions");
+        sr.textContent = "\u2026";
         on(EVENT_AUTOPLAY_PLAY, apply(disable, true));
         on(EVENT_AUTOPLAY_PAUSE, apply(disable, false));
-        on([EVENT_MOUNTED, EVENT_REFRESH], init);
-        on([EVENT_MOVED, EVENT_SCROLLED], update);
+        on([EVENT_MOVED, EVENT_SCROLLED], apply(append, track, sr));
       }
     }
 
-    function init() {
-      disable(!Components2.Autoplay.isPaused());
+    function destroy() {
+      removeAttribute(track, [ARIA_LIVE, ARIA_RELEVANT]);
+      remove(sr);
     }
 
     function disable(disabled) {
@@ -2793,15 +2804,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
     }
 
-    function update() {
-      append(track, sr);
-      sr.textContent = "\u2026";
-    }
-
     return {
       mount: mount,
       disable: disable,
-      destroy: apply(remove, sr)
+      destroy: destroy
     };
   }
 

dist/types/index.d.ts

@@ -282,6 +282,10 @@ interface Options extends ResponsiveOptions {
      * If the tag is `<section>`, this value will not be used. The default value is `'region'`.
      */
     role?: string;
+    /**
+     * The label for the root element.
+     */
+    label?: string;
     /**
      * Determines whether to disable any actions while the slider is transitioning.
      * Even if `false`, the slider forcibly waits for transition on the loop points.

src/js/components/Elements/Elements.ts

@@ -1,10 +1,11 @@
-import { ALL_ATTRIBUTES, ARIA_ROLEDESCRIPTION, ROLE } from '../../constants/attributes';
+import { ALL_ATTRIBUTES, ARIA_LABEL, ARIA_ROLEDESCRIPTION, ROLE } from '../../constants/attributes';
 import {
   CLASS_ACTIVE,
   CLASS_ARROW_NEXT,
   CLASS_ARROW_PREV,
   CLASS_ARROWS,
-  CLASS_CLONE, CLASS_FOCUS_VISIBLE,
+  CLASS_CLONE,
+  CLASS_FOCUS_VISIBLE,
   CLASS_LIST,
   CLASS_PAGINATION,
   CLASS_PROGRESS_BAR,
@@ -31,7 +32,8 @@ import {
   query,
   removeAttribute,
   removeClass,
-  setAttribute, toggleClass,
+  setAttribute,
+  toggleClass,
   uniqueId,
 } from '../../utils';
 import { closest } from '../../utils/dom/closest/closest';
@@ -86,6 +88,16 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
    */
   const slides: HTMLElement[] = [];
 
+  /**
+   * Keeps the root role in HTML.
+   */
+  const rootRole = getAttribute( root, ROLE );
+
+  /**
+   * Keeps the root label in HTML.
+   */
+  const rootLabel = getAttribute( root, ARIA_LABEL );
+
   /**
    * Stores all root classes.
    */
@@ -96,11 +108,6 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
    */
   let trackClasses: string[] = [];
 
-  /**
-   * Keeps the role provided by HTML.
-   */
-  let rootRole: string;
-
   /**
    * The track element.
    */
@@ -144,13 +151,22 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
 
   /**
    * Destroys the component.
+   *
+   * @param completely - Whether to destroy the component completely or not.
    */
-  function destroy(): void {
+  function destroy( completely?: boolean ): void {
     empty( slides );
     removeClass( root, rootClasses );
     removeClass( track, trackClasses );
-    removeAttribute( [ root, track, list ], ALL_ATTRIBUTES.concat( 'style' ) );
-    setAttribute( root, ROLE, rootRole );
+    removeAttribute( [ track, list ], ALL_ATTRIBUTES.concat( 'style' ) );
+    removeAttribute( root, 'style' );
+
+    if ( completely ) {
+      removeAttribute( root, ALL_ATTRIBUTES );
+      setAttribute( root, ROLE, rootRole );
+    }
+
+    setAttribute( root, ARIA_LABEL, rootLabel );
   }
 
   /**
@@ -193,16 +209,19 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
 
   /**
    * Initializes essential elements.
+   * Note that do not change the role of the root element,
+   * 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 = rootRole || root.tagName !== 'SECTION' && options.role || '';
+
     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, rootRole || root.tagName !== 'SECTION' && options.role || '' );
+    getAttribute( root, ROLE ) || setAttribute( root, ROLE, role );
     setAttribute( list, ROLE, 'presentation' );
   }
 

src/js/components/Elements/test/attributes.test.ts

@@ -32,4 +32,12 @@ describe( 'Elements', () => {
     const splide = init( {}, { html: buildHtml( { tag: 'section' } ) } );
     expect( splide.root.getAttribute( ROLE ) ).toBeNull();
   } );
+
+  test( 'should not remove the role attribute by soft destruction.', () => {
+    const splide = init();
+    expect( splide.root.getAttribute( ROLE ) ).toBe( 'region' );
+
+    splide.destroy( false );
+    expect( splide.root.getAttribute( ROLE ) ).toBe( 'region' );
+  } );
 } );

src/js/components/Live/Live.ts

@@ -1,17 +1,10 @@
-import { ARIA_LIVE } from '../../constants/attributes';
+import { ARIA_LIVE, ARIA_RELEVANT } from '../../constants/attributes';
 import { CLASS_SR } from '../../constants/classes';
-import {
-  EVENT_AUTOPLAY_PAUSE,
-  EVENT_AUTOPLAY_PLAY,
-  EVENT_MOUNTED,
-  EVENT_MOVED,
-  EVENT_REFRESH,
-  EVENT_SCROLLED,
-} from '../../constants/events';
+import { EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_MOVED, EVENT_SCROLLED } from '../../constants/events';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { append, apply, create, remove, setAttribute } from '../../utils';
+import { append, apply, create, remove, removeAttribute, setAttribute } from '../../utils';
 
 
 /**
@@ -53,25 +46,26 @@ export function Live( Splide: Splide, Components: Components, options: Options )
 
   /**
    * Called when the component is mounted.
-   * Explicitly sets `aria-atomic` to avoid SR from reading the content twice.
-   *
-   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic
+   * The `aria-relevant` attribute is important to prevent SR from reading contents twice.
    */
   function mount(): void {
     if ( enabled ) {
+      disable( ! Components.Autoplay.isPaused() );
+      setAttribute( track, ARIA_RELEVANT, 'additions' );
+      sr.textContent = '…';
+
       on( EVENT_AUTOPLAY_PLAY, apply( disable, true ) );
       on( EVENT_AUTOPLAY_PAUSE, apply( disable, false ) );
-      on( [ EVENT_MOUNTED, EVENT_REFRESH ], init );
-      on( [ EVENT_MOVED, EVENT_SCROLLED ], update );
+      on( [ EVENT_MOVED, EVENT_SCROLLED ], apply( append, track, sr ) );
     }
   }
 
   /**
-   * Initializes the component.
-   * Only when autoplay is paused, enables a live region.
+   * Destroys the component.
    */
-  function init(): void {
-    disable( ! Components.Autoplay.isPaused() );
+  function destroy(): void {
+    removeAttribute( track, [ ARIA_LIVE, ARIA_RELEVANT ] );
+    remove( sr );
   }
 
   /**
@@ -86,17 +80,9 @@ export function Live( Splide: Splide, Components: Components, options: Options )
     }
   }
 
-  /**
-   * Updates the live region status with unreadable texts.
-   */
-  function update(): void {
-    append( track, sr );
-    sr.textContent = '…';
-  }
-
   return {
     mount,
     disable,
-    destroy: apply( remove, sr ),
+    destroy,
   };
 }

src/js/components/Live/test/general.test.ts

@@ -1,4 +1,4 @@
-import { ARIA_ATOMIC, ARIA_LIVE } from '../../../constants/attributes';
+import { ARIA_RELEVANT, ARIA_LIVE } from '../../../constants/attributes';
 import { CLASS_SR } from '../../../constants/classes';
 import { init } from '../../../test';
 
@@ -11,9 +11,32 @@ describe( 'Live', () => {
     expect( splide.Components.Elements.track.getElementsByClassName( CLASS_SR ).length ).toBe( 1 );
   } );
 
-  test( 'can assign aria-live="polite" to the list element.', () => {
+  test( 'can assign aria-live="polite" and aria-relevant="additions" to the list element.', () => {
     const splide = init( { live: true } );
-    expect( splide.Components.Elements.track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' );
+    const { track } = splide.Components.Elements;
+
+    expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' );
+    expect( track.getAttribute( ARIA_RELEVANT ) ).toBe( 'additions' );
+  } );
+
+  test( 'can remove aria attributes on destroy.', () => {
+    const splide = init( { live: true } );
+    const { track } = splide.Components.Elements;
+
+    splide.destroy();
+
+    expect( track.getAttribute( ARIA_LIVE ) ).toBeNull();
+    expect( track.getAttribute( ARIA_RELEVANT ) ).toBeNull();
+  } );
+
+  test( 'should assign aria attribute again on refresh.', () => {
+    const splide = init( { live: true } );
+    const { track } = splide.Components.Elements;
+
+    splide.refresh();
+
+    expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' );
+    expect( track.getAttribute( ARIA_RELEVANT ) ).toBe( 'additions' );
   } );
 
   test( 'can assign aria-live="off" to the list element when the autoplay is `true`.', () => {
@@ -63,7 +86,6 @@ describe( 'Live', () => {
     const { track } = splide.Components.Elements;
     const { disable } = splide.Components.Live;
 
-    expect( track.getAttribute( ARIA_ATOMIC ) ).toBeNull();
     expect( track.getAttribute( ARIA_LIVE ) ).toBeNull();
 
     disable( true );

src/js/constants/attributes.ts

@@ -10,11 +10,13 @@ export const ARIA_LABEL           = `${ ARIA_PREFIX }label`;
 export const ARIA_HIDDEN          = `${ ARIA_PREFIX }hidden`;
 export const ARIA_ORIENTATION     = `${ ARIA_PREFIX }orientation`;
 export const ARIA_ROLEDESCRIPTION = `${ ARIA_PREFIX }roledescription`;
-export const ARIA_ATOMIC          = `${ ARIA_PREFIX }atomic`;
 export const ARIA_LIVE            = `${ ARIA_PREFIX }live`;
+export const ARIA_RELEVANT        = `${ ARIA_PREFIX }relevant`;
 
 /**
- * The array with all attributes.
+ * The array with all attributes to remove later.
+ * Need to manually remove attributes that are not in this.
+ * Note that removing aria-live disables the live region until the page reload.
  *
  * @since 3.0.0
  */
@@ -28,6 +30,4 @@ export const ALL_ATTRIBUTES = [
   ARIA_HIDDEN,
   ARIA_ORIENTATION,
   ARIA_ROLEDESCRIPTION,
-  ARIA_ATOMIC,
-  ARIA_LIVE,
 ];

src/js/test/assets/css/styles.css

@@ -1,5 +1,5 @@
 body {
-  background : #eee;
+  background : #555;
   /*height: 200vh;*/
   font-family: Roboto, sans-serif;
   line-height: 1.5;

src/js/test/php/parts.php

@@ -1,6 +1,6 @@
 <?php
 function render( $id = 'splide01', $number = 10, $text = false ) {
-  printf( '<div id="%s" class="splide">', $id );
+  printf( '<div id="%s" class="splide" aria-label="Sample">', $id );
   echo '<div class="splide__track">';
   echo '<ul class="splide__list">';
 

src/js/types/options.ts

@@ -21,6 +21,11 @@ export interface Options extends ResponsiveOptions {
    */
   role?: string;
 
+  /**
+   * The label for the root element.
+   */
+  label?: string;
+
   /**
    * Determines whether to disable any actions while the slider is transitioning.
    * Even if `false`, the slider forcibly waits for transition on the loop points.