Clean up.

dist/js/splide.js

@@ -222,7 +222,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       });
     } else {
       forEach(elms, function (elm) {
-        isNull(value) ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));
+        isNull(value) || value === "" ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));
       });
     }
   }
@@ -799,7 +799,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       track.id = track.id || id + "-track";
       list.id = list.id || id + "-list";
       setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
-      setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || null);
+      setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || "");
       setAttribute(list, ROLE, "none");
     }
 
@@ -812,9 +812,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function isTab() {
-      return !!(options.pagination || options.isNavigation || Splide2.splides.some(function (target) {
-        return !target.isParent && target.splide.options.isNavigation;
-      }));
+      return !!options.pagination;
     }
 
     return assign(elements, {
@@ -888,7 +886,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }).join(" ");
       setAttribute(slide, ARIA_LABEL, format(i18n.slideX, (isClone ? slideIndex : index) + 1));
       setAttribute(slide, ARIA_CONTROLS, controls);
-      setAttribute(slide, ROLE, "tab");
       updateActivity(isActive());
     }
 
@@ -913,7 +910,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         toggleClass(slide, CLASS_ACTIVE, active);
 
         if (isNavigation) {
-          setAttribute(slide, ARIA_SELECTED, active || null);
+          setAttribute(slide, ARIA_SELECTED, active || "");
         }
 
         emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self);
@@ -922,9 +919,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function updateVisibility(visible) {
       var hidden = !visible && (!isActive() || isClone);
-      setAttribute(slide, ARIA_HIDDEN, hidden || null);
-      setAttribute(slide, TAB_INDEX, !hidden && options.slideFocus ? 0 : null);
-      setAttribute(focusableNodes || [], TAB_INDEX, hidden ? -1 : null);
+      setAttribute(slide, ARIA_HIDDEN, hidden || "");
+      setAttribute(slide, TAB_INDEX, !hidden && options.slideFocus ? 0 : "");
+      setAttribute(focusableNodes || [], TAB_INDEX, hidden ? -1 : "");
 
       if (visible !== hasClass(slide, CLASS_VISIBLE)) {
         toggleClass(slide, CLASS_VISIBLE, visible);
@@ -2572,7 +2569,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         var _button = curr.button;
         addClass(_button, CLASS_ACTIVE);
         setAttribute(_button, ARIA_SELECTED, true);
-        setAttribute(_button, TAB_INDEX, null);
+        setAttribute(_button, TAB_INDEX, "");
       }
 
       emit(EVENT_PAGINATION_UPDATED, {
@@ -2635,13 +2632,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       on(EVENT_CLICK, onClick);
       on(EVENT_SLIDE_KEYDOWN, onKeydown);
       on([EVENT_MOUNTED, EVENT_UPDATED], update);
-      setAttribute(list, ROLE, "tablist");
       events.push(event);
       event.emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
     }
 
     function update() {
-      setAttribute(list, ARIA_ORIENTATION, options.direction === TTB ? "vertical" : null);
+      setAttribute(list, ARIA_ORIENTATION, options.direction === TTB ? "vertical" : "");
     }
 
     function onClick(Slide) {

src/js/components/Elements/Elements.ts

@@ -184,7 +184,7 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
     list.id  = list.id || `${ id }-list`;
 
     setAttribute( root, ARIA_ROLEDESCRIPTION, i18n.carousel );
-    setAttribute( root, ROLE, root.tagName !== 'SECTION' && options.role || null );
+    setAttribute( root, ROLE, root.tagName !== 'SECTION' && options.role || '' );
     setAttribute( list, ROLE, 'none' );
   }
 
@@ -214,16 +214,13 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
 
   /**
    * Indicates whether the slide should be implemented as "Tabbed Carousel" or not.
-   * The last condition checks if one of sync targets behaves as a navigation for this slider or not.
    *
-   * @todo hasNavigation
+   * @todo remove this
    *
    * @return `true` if the slider should be tabbed, or otherwise `false`.
    */
   function isTab(): boolean {
-    return !! ( options.pagination || options.isNavigation || Splide.splides.some( target => {
-      return ! target.isParent && target.splide.options.isNavigation;
-    } ) );
+    return !! options.pagination;
   }
 
   return assign( elements, {

src/js/components/Pagination/Pagination.ts

@@ -232,7 +232,7 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
       const { button } = curr;
       addClass( button, CLASS_ACTIVE );
       setAttribute( button, ARIA_SELECTED, true );
-      setAttribute( button, TAB_INDEX, null );
+      setAttribute( button, TAB_INDEX, '' );
     }
 
     emit( EVENT_PAGINATION_UPDATED, { list, items }, prev, curr );

src/js/components/Slides/Slide.ts

@@ -152,7 +152,6 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
 
     setAttribute( slide, ARIA_LABEL, format( i18n.slideX, ( isClone ? slideIndex : index ) + 1 ) );
     setAttribute( slide, ARIA_CONTROLS, controls );
-    setAttribute( slide, ROLE, 'tab' )
 
     updateActivity( isActive() );
   }
@@ -191,7 +190,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
       toggleClass( slide, CLASS_ACTIVE, active );
 
       if ( isNavigation ) {
-        setAttribute( slide, ARIA_SELECTED, active || null );
+        setAttribute( slide, ARIA_SELECTED, active || '' );
       }
 
       emit( active ? EVENT_ACTIVE : EVENT_INACTIVE, self );
@@ -206,9 +205,9 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
   function updateVisibility( visible: boolean ): void {
     const hidden = ! visible && ( ! isActive() || isClone );
 
-    setAttribute( slide, ARIA_HIDDEN, hidden || null );
-    setAttribute( slide, TAB_INDEX, ! hidden && options.slideFocus ? 0 : null );
-    setAttribute( focusableNodes || [], TAB_INDEX, hidden ? -1 : null );
+    setAttribute( slide, ARIA_HIDDEN, hidden || '' );
+    setAttribute( slide, TAB_INDEX, ! hidden && options.slideFocus ? 0 : '' );
+    setAttribute( focusableNodes || [], TAB_INDEX, hidden ? -1 : '' );
 
     if ( visible !== hasClass( slide, CLASS_VISIBLE ) ) {
       toggleClass( slide, CLASS_VISIBLE, visible );

src/js/components/Sync/Sync.ts

@@ -1,4 +1,4 @@
-import { ARIA_ORIENTATION, ROLE } from '../../constants/attributes';
+import { ARIA_ORIENTATION } from '../../constants/attributes';
 import { TTB } from '../../constants/directions';
 import {
   EVENT_CLICK,
@@ -109,7 +109,6 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
     on( EVENT_SLIDE_KEYDOWN, onKeydown );
     on( [ EVENT_MOUNTED, EVENT_UPDATED ], update );
 
-    setAttribute( list, ROLE, 'tablist' );
     events.push( event );
     event.emit( EVENT_NAVIGATION_MOUNTED, Splide.splides );
   }
@@ -118,7 +117,7 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
    * Update attributes.
    */
   function update(): void {
-    setAttribute( list, ARIA_ORIENTATION, options.direction === TTB ? 'vertical' : null );
+    setAttribute( list, ARIA_ORIENTATION, options.direction === TTB ? 'vertical' : '' );
   }
 
   /**

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

@@ -19,8 +19,9 @@ $settings = get_settings();
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
-        // type   : 'loop',
-        perPage: 2,
+				width: 800,
+        type   : 'loop',
+        // perPage: 2,
         // perMove: 1,
         rewind: true,
 	      rewindByDrag: true,
@@ -30,46 +31,47 @@ $settings = get_settings();
         // },
         // updateOnMove: true,
         // focus: 'center',
+	      // keyboard: false,
 	      dragMinThreshold: {
 					mouse: 20,
 		      touch: 0,
 	      },
 	      speed: 1000,
-				waitForTransition: false,
+				// waitForTransition: false,
         // noDrag: 'button',
       } );
 
-	    splide.on( 'move', function () {
-		    console.log( 'move' );
-	    } );
-
-      splide.on( 'moved', function ( index, prev, dest ) {
-        console.log( 'moved', index, prev, dest );
-      } );
-
-      splide.on( 'visible', Slide => {
-        console.log( 'visible', Slide );
-      } );
-
-      splide.on( 'hidden', Slide => {
-        console.log( 'hidden', Slide );
-      } );
-
-      splide.on( 'click', function () {
-        console.log( 'click' );
-      } );
-
-      splide.on( 'shifted', function () {
-        console.log( 'shifted' );
-      } );
-
-	    splide.on( 'drag', function () {
-		    console.log( 'drag' );
-	    } );
-
-	    splide.on( 'dragged', function () {
-		    console.log( 'dragged' );
-	    } );
+	    // splide.on( 'move', function () {
+		  //   console.log( 'move' );
+	    // } );
+	    //
+      // splide.on( 'moved', function ( index, prev, dest ) {
+      //   console.log( 'moved', index, prev, dest );
+      // } );
+	    //
+      // splide.on( 'visible', Slide => {
+      //   console.log( 'visible', Slide );
+      // } );
+	    //
+      // splide.on( 'hidden', Slide => {
+      //   console.log( 'hidden', Slide );
+      // } );
+	    //
+      // splide.on( 'click', function () {
+      //   console.log( 'click' );
+      // } );
+	    //
+      // splide.on( 'shifted', function () {
+      //   console.log( 'shifted' );
+      // } );
+	    //
+	    // splide.on( 'drag', function () {
+		  //   console.log( 'drag' );
+	    // } );
+	    //
+	    // splide.on( 'dragged', function () {
+		  //   console.log( 'dragged' );
+	    // } );
 
       splide.mount();
 
@@ -94,8 +96,8 @@ $settings = get_settings();
   </style>
 </head>
 <body>
-3444556
-<?php render( 'splide01', 11 ); ?>
+
+<?php render( 'splide01', 5 ); ?>
 
 <pre></pre>
 

src/js/test/php/examples/live-regions.php

@@ -23,7 +23,7 @@ $settings = get_settings();
 	      rewind    : true,
 	      live      : true,
 	      speed     : 1000,
-	      pagination: false,
+	      pagination: true,
 	      arrowPath : 'm13.5 7.01 13 13m-13 13 13-13',
       } );
 

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

@@ -16,48 +16,50 @@ $settings = get_settings();
 
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
-      var splide01 = new Splide( '#splide01', {
-        width      : 800,
-        type       : 'loop',
-        heightRatio: 0.3,
-        perPage    : 1,
-        waitForTransition: false,
-        breakpoints: {
-          1000: {
-            destroy: true,
-          }
-        },
-      } );
+	    var splide01 = new Splide( '#splide01', {
+		    width      : 800,
+		    type       : 'loop',
+		    heightRatio: 0.3,
+		    perPage    : 1,
+		    pagination : false,
+		    keyboard   : false,
+		    cover: true,
+		    breakpoints: {
+			    1000: {
+				    destroy: true,
+			    },
+		    },
+	    } );
 
-      var splide02 = new Splide( '#splide02', {
-        // type             : 'loop',
-        width            : 600,
-        fixedWidth       : 100,
-        fixedHeight      : 56,
-        gap              : '.7em',
-        isNavigation     : true,
-        focus            : 'center',
-        pagination       : false,
-        rewind           : true,
-        waitForTransition: false,
-        dragMinThreshold: {
-          mouse: 10,
-          touch: 10,
-        },
-      } );
+	    var splide02 = new Splide( '#splide02', {
+		    // type             : 'loop',
+		    width           : 600,
+		    fixedWidth      : 100,
+		    fixedHeight     : 56,
+		    gap             : '.7em',
+		    isNavigation    : true,
+		    focus           : 'center',
+		    pagination      : false,
+		    rewind          : true,
+		    keyboard        : false,
+		    dragMinThreshold: {
+			    mouse: 10,
+			    touch: 10,
+		    },
+	    } );
 
-      var splide03 = new Splide( '#splide03', {
-        width            : 100,
-        type             : 'loop',
-        direction        : 'ttb',
-        height           : 300,
-        fixedWidth       : 100,
-        fixedHeight      : 56,
-        gap              : '.7em',
-        isNavigation     : true,
-        pagination       : false,
-        waitForTransition: false,
-      } );
+	    var splide03 = new Splide( '#splide03', {
+		    width       : 100,
+		    type        : 'loop',
+		    direction   : 'ttb',
+		    height      : 300,
+		    fixedWidth  : 100,
+		    fixedHeight : 56,
+		    gap         : '.7em',
+		    isNavigation: true,
+		    pagination  : false,
+		    keyboard    : false,
+	    } );
 
       splide01.sync( splide02 );
 
@@ -65,9 +67,9 @@ $settings = get_settings();
       splide02.mount();
       splide03.mount();
 
-      splide01.on( 'move', function () { console.log( 1 ) } );
-      splide02.on( 'move', function () { console.log( 2 ) } );
-      splide03.on( 'move', function () { console.log( 3 ) } );
+      // splide01.on( 'move', function () { console.log( 1 ) } );
+      // splide02.on( 'move', function () { console.log( 2 ) } );
+      // splide03.on( 'move', function () { console.log( 3 ) } );
 
       // Attempts to sync after mount.
       splide01.sync( splide03 );
@@ -82,7 +84,7 @@ $settings = get_settings();
       <?php
       for ( $i = 0; $i < 10; $i++ ) {
         echo '<li class="splide__slide">';
-        printf( '<img src="../../assets/images/pics/slide%02d.jpg">', $i + 1 );
+        printf( '<img src="../../assets/images/pics/slide%1$02d.jpg" alt="Alt Slide %1$d">%1$02d', $i + 1 );
         echo '</li>' . PHP_EOL;
       }
       ?>
@@ -96,7 +98,7 @@ $settings = get_settings();
       <?php
       for ( $i = 0; $i < 10; $i++ ) {
         echo '<li class="splide__slide">';
-        printf( '<img src="../../assets/images/pics/slide%02d.jpg">', $i + 1 );
+        printf( '<img src="../../assets/images/pics/slide%1$02d.jpg" alt="Thumbnail %1$d">', $i + 1 );
         echo '</li>' . PHP_EOL;
       }
       ?>
@@ -110,7 +112,7 @@ $settings = get_settings();
       <?php
       for ( $i = 0; $i < 10; $i++ ) {
         echo '<li class="splide__slide">';
-        printf( '<img src="../../assets/images/pics/slide%02d.jpg">', $i + 1 );
+        printf( '<img src="../../assets/images/pics/slide%1$02d.jpg" alt="Thumbnail %1$d">', $i + 1 );
         echo '</li>' . PHP_EOL;
       }
       ?>

src/js/utils/dom/setAttribute/setAttribute.test.ts

@@ -2,10 +2,6 @@ import { setAttribute } from './setAttribute';
 
 
 describe( 'setAttribute', () => {
-  beforeEach( () => {
-    document.body.innerHTML = '<div id="div"></div>';
-  } );
-
   test( 'can set an attribute to an element.', () => {
     const div = document.createElement( 'div' );
 
@@ -49,4 +45,17 @@ describe( 'setAttribute', () => {
     expect( div.getAttribute( 'aria-role' ) ).toBe( 'presentation' );
     expect( div.getAttribute( 'contenteditable' ) ).toBe( 'true' );
   } );
+
+  test( 'can remove an attribute by null or an empty string.', () => {
+    const div = document.createElement( 'div' );
+
+    div.setAttribute( 'aria-hidden', 'true' );
+    div.setAttribute( 'tabindex', '-1' );
+
+    setAttribute( div, 'aria-hidden', '' );
+    setAttribute( div, 'tabindex', null );
+
+    expect( div.getAttribute( 'aria-hidden' ) ).toBeNull();
+    expect( div.getAttribute( 'tabindex' ) ).toBeNull();
+  } );
 } );

src/js/utils/dom/setAttribute/setAttribute.ts

@@ -7,6 +7,14 @@ import { removeAttribute } from '../removeAttribute/removeAttribute';
 export function setAttribute( elms: Element | Element[], attr: string, value: string | number | boolean ): void;
 export function setAttribute( elms: Element | Element[], attrs: Record<string, string | number | boolean> ): void;
 
+/**
+ * Sets attribute/attributes to the element or elements.
+ * If the value is `null` or an empty string, the attribute will be removed.
+ *
+ * @param elms  - An element or an array with elements.
+ * @param attrs - An attribute name of an object with pairs of a name and a value.
+ * @param value - A value to set.
+ */
 export function setAttribute(
   elms: Element | Element[],
   attrs: string | Record<string, string | number | boolean>,
@@ -18,7 +26,7 @@ export function setAttribute(
     } );
   } else {
     forEach( elms, elm => {
-      isNull( value ) ? removeAttribute( elm, attrs ) : elm.setAttribute( attrs, String( value ) );
+      isNull( value ) || value === '' ? removeAttribute( elm, attrs ) : elm.setAttribute( attrs, String( value ) );
     } );
   }
 }

src/js/utils/function/apply/apply.ts

@@ -11,7 +11,7 @@ import { slice } from '../../arrayLike';
  *
  * @return A function where arguments are bound.
  */
-export function apply<F extends AnyFunction, A extends any[]>(
+export function apply<F extends AnyFunction, A extends any[] = any[]>(
   func: F,
   ...args: A
 ): ( ...args: ShiftN<Parameters<F>, A["length"]> ) => ReturnType<F>;