Add the menu role to the navigation slider.

dist/js/splide.js

@@ -890,7 +890,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var ARIA_HIDDEN = "aria-hidden";
   var TAB_INDEX = "tabindex";
   var DISABLED = "disabled";
-  var ALL_ATTRIBUTES = [ROLE, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, TAB_INDEX, DISABLED];
+  var ARIA_ORIENTATION = "aria-orientation";
+  var ALL_ATTRIBUTES = [ROLE, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, TAB_INDEX, DISABLED];
   var SLIDE = "slide";
   var LOOP = "loop";
   var FADE = "fade";
@@ -934,10 +935,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
 
       if (isNavigation) {
-        if (!isHTMLButtonElement(slide)) {
-          setAttribute(slide, ROLE, "button");
-        }
-
         var idx = isClone ? slideIndex : index;
         var label = format(options.i18n.slideX, idx + 1);
         var controls = Splide2.splides.map(function (splide) {
@@ -945,6 +942,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         }).join(" ");
         setAttribute(slide, ARIA_LABEL, label);
         setAttribute(slide, ARIA_CONTROLS, controls);
+        setAttribute(slide, ROLE, "menuitem");
       }
     }
 
@@ -2576,6 +2574,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
   function Sync(Splide2, Components2, options) {
     var splides = Splide2.splides;
+    var list = Components2.Elements.list;
 
     function mount() {
       if (options.isNavigation) {
@@ -2585,6 +2584,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
     }
 
+    function destroy() {
+      removeAttribute(list, ALL_ATTRIBUTES);
+    }
+
     function sync() {
       var processed = [];
       splides.concat(Splide2).forEach(function (splide, index, instances) {
@@ -2605,20 +2608,27 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           on = _EventInterface16.on,
           emit = _EventInterface16.emit;
 
-      on(EVENT_CLICK, function (Slide) {
-        Splide2.go(Slide.index);
-      });
-      on(EVENT_SLIDE_KEYDOWN, function (Slide, e) {
-        if (includes(TRIGGER_KEYS, e.key)) {
-          Splide2.go(Slide.index);
-          prevent(e);
-        }
-      });
+      on(EVENT_CLICK, onClick);
+      on(EVENT_SLIDE_KEYDOWN, onKeydown);
       emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+      setAttribute(list, ROLE, "menu");
+      setAttribute(list, ARIA_ORIENTATION, options.direction !== TTB ? "horizontal" : null);
+    }
+
+    function onClick(Slide) {
+      Splide2.go(Slide.index);
+    }
+
+    function onKeydown(Slide, e) {
+      if (includes(TRIGGER_KEYS, e.key)) {
+        onClick(Slide);
+        prevent(e);
+      }
     }
 
     return {
-      mount: mount
+      mount: mount,
+      destroy: destroy
     };
   }
 
@@ -2819,7 +2829,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
       var state = this.state,
           Components2 = this.Components;
-      assert(state.is([CREATED, DESTROYED]), "Already mounted.");
+      assert(state.is([CREATED, DESTROYED]), "Already mounted!");
       state.set(CREATED);
       this._Components = Components2;
       this._Transition = Transition || this._Transition || (this.is(FADE) ? Fade : Slide);

src/js/components/Slides/Slide.ts

@@ -119,16 +119,13 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
     }
 
     if ( isNavigation ) {
-      if ( ! isHTMLButtonElement( slide ) ) {
-        setAttribute( slide, ROLE, 'button' );
-      }
-
       const idx      = isClone ? slideIndex : index;
       const label    = format( options.i18n.slideX, idx + 1 );
       const controls = Splide.splides.map( splide => splide.root.id ).join( ' ' );
 
       setAttribute( slide, ARIA_LABEL, label );
       setAttribute( slide, ARIA_CONTROLS, controls );
+      setAttribute( slide, ROLE, 'menuitem' );
     }
   }
 

src/js/components/Sync/Sync.ts

@@ -1,9 +1,12 @@
+import { ALL_ATTRIBUTES, ARIA_ORIENTATION, ROLE } from '../../constants/attributes';
+import { TTB } from '../../constants/directions';
 import { EVENT_CLICK, EVENT_MOVE, EVENT_NAVIGATION_MOUNTED, EVENT_SLIDE_KEYDOWN } from '../../constants/events';
 import { LOOP } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { empty, includes, prevent } from '../../utils';
+import { empty, includes, prevent, removeAttribute, setAttribute } from '../../utils';
+import { SlideComponent } from '../Slides/Slide';
 
 
 /**
@@ -34,6 +37,7 @@ const TRIGGER_KEYS = [ ' ', 'Enter', 'Spacebar' ];
  */
 export function Sync( Splide: Splide, Components: Components, options: Options ): SyncComponent {
   const { splides } = Splide;
+  const { list } = Components.Elements;
 
   /**
    * Called when the component is mounted.
@@ -46,6 +50,13 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
     }
   }
 
+  /**
+   * Destroys the component.
+   */
+  function destroy(): void {
+    removeAttribute( list, ALL_ATTRIBUTES )
+  }
+
   /**
    * Syncs the current index among all slides.
    * The `processed` array prevents recursive call of handlers.
@@ -69,25 +80,43 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
 
   /**
    * Makes slides clickable and moves the slider to the index of clicked slide.
+   * Note that the direction of `menu` is implicitly `vertical` as default.
    */
   function navigate(): void {
     const { on, emit } = EventInterface( Splide );
 
-    on( EVENT_CLICK, Slide => {
-      Splide.go( Slide.index );
-    } );
+    on( EVENT_CLICK, onClick );
+    on( EVENT_SLIDE_KEYDOWN, onKeydown );
+    emit( EVENT_NAVIGATION_MOUNTED, Splide.splides );
 
-    on( EVENT_SLIDE_KEYDOWN, ( Slide, e: KeyboardEvent ) => {
-      if ( includes( TRIGGER_KEYS, e.key ) ) {
-        Splide.go( Slide.index );
-        prevent( e );
-      }
-    } );
+    setAttribute( list, ROLE, 'menu' );
+    setAttribute( list, ARIA_ORIENTATION, options.direction !== TTB ? 'horizontal' : null );
+  }
 
-    emit( EVENT_NAVIGATION_MOUNTED, Splide.splides );
+  /**
+   * Called when the navigation slide is clicked.
+   *
+   * @param Slide - A clicked Slide component.
+   */
+  function onClick( Slide: SlideComponent ): void {
+    Splide.go( Slide.index );
+  }
+
+  /**
+   * Called when any key is pressed on the navigation slide.
+   *
+   * @param Slide - A Slide component.
+   * @param e     - A KeyboardEvent object.
+   */
+  function onKeydown( Slide: SlideComponent, e: KeyboardEvent ): void {
+    if ( includes( TRIGGER_KEYS, e.key ) ) {
+      onClick( Slide );
+      prevent( e );
+    }
   }
 
   return {
     mount,
+    destroy,
   };
 }

src/js/constants/attributes.ts

@@ -1,10 +1,11 @@
-export const ROLE           = 'role';
-export const ARIA_CONTROLS  = 'aria-controls';
-export const ARIA_CURRENT   = 'aria-current';
-export const ARIA_LABEL     = 'aria-label';
-export const ARIA_HIDDEN    = 'aria-hidden';
-export const TAB_INDEX      = 'tabindex';
-export const DISABLED       = 'disabled';
+export const ROLE             = 'role';
+export const ARIA_CONTROLS    = 'aria-controls';
+export const ARIA_CURRENT     = 'aria-current';
+export const ARIA_LABEL       = 'aria-label';
+export const ARIA_HIDDEN      = 'aria-hidden';
+export const TAB_INDEX        = 'tabindex';
+export const DISABLED         = 'disabled';
+export const ARIA_ORIENTATION = 'aria-orientation';
 
 /**
  * The array with all attributes.
@@ -17,6 +18,7 @@ export const ALL_ATTRIBUTES = [
   ARIA_CURRENT,
   ARIA_LABEL,
   ARIA_HIDDEN,
+  ARIA_ORIENTATION,
   TAB_INDEX,
   DISABLED,
 ];

src/js/core/Splide/Splide.ts

@@ -99,7 +99,7 @@ export class Splide {
    */
   mount( Extensions?: Record<string, ComponentConstructor>, Transition?: ComponentConstructor ): this {
     const { state, Components } = this;
-    assert( state.is( [ CREATED, DESTROYED ] ), 'Already mounted.' );
+    assert( state.is( [ CREATED, DESTROYED ] ), 'Already mounted!' );
 
     state.set( CREATED );
 

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

@@ -23,7 +23,7 @@ img {
 }
 
 .splide__slide:focus, .splide__arrow:focus, .splide__pagination__page:focus {
-  border: 2px solid tomato;
+  border: 2px solid tomato !important;
 }
 
 .splide__pagination__page.is-active {

src/js/test/php/examples/default.php

@@ -22,8 +22,9 @@ $settings = get_settings();
         type   : 'loop',
         perPage: 2,
         gap    : '1.5rem',
-        height : 200,
+        height : 400,
         focus  : 'center',
+        cover  : true,
         classes: {
           arrows: 'splide__arrows splide__test',
           clone : 'splide__clone splide__test',

src/js/test/php/examples/sync.php

@@ -24,8 +24,6 @@ $settings = get_settings();
         cover      : true,
       } );
 
-      splide01.mount();
-
       var splide02 = new Splide( '#splide02', {
         width       : 600,
         fixedWidth  : 100,