Bug Fix: Should hide the "active" but invisible clone.

dist/js/splide-renderer.min.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.6.0
+ * Version  : 3.6.1
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.6.0
+ * Version  : 3.6.1
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -839,12 +839,12 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }
   }
   function updateVisibility(visible) {
-    const ariaHidden = !visible && !isActive();
-    setAttribute(slide, ARIA_HIDDEN, ariaHidden || null);
-    setAttribute(slide, TAB_INDEX, !ariaHidden && options.slideFocus ? 0 : null);
+    const hidden = !visible && (!isActive() || isClone);
+    setAttribute(slide, ARIA_HIDDEN, hidden || null);
+    setAttribute(slide, TAB_INDEX, !hidden && options.slideFocus ? 0 : null);
     if (focusableNodes) {
       focusableNodes.forEach((node) => {
-        setAttribute(node, TAB_INDEX, ariaHidden ? -1 : null);
+        setAttribute(node, TAB_INDEX, hidden ? -1 : null);
       });
     }
     if (visible !== hasClass(slide, CLASS_VISIBLE)) {

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.6.0
+ * Version  : 3.6.1
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -835,12 +835,12 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }
   }
   function updateVisibility(visible) {
-    const ariaHidden = !visible && !isActive();
-    setAttribute(slide, ARIA_HIDDEN, ariaHidden || null);
-    setAttribute(slide, TAB_INDEX, !ariaHidden && options.slideFocus ? 0 : null);
+    const hidden = !visible && (!isActive() || isClone);
+    setAttribute(slide, ARIA_HIDDEN, hidden || null);
+    setAttribute(slide, TAB_INDEX, !hidden && options.slideFocus ? 0 : null);
     if (focusableNodes) {
       focusableNodes.forEach((node) => {
-        setAttribute(node, TAB_INDEX, ariaHidden ? -1 : null);
+        setAttribute(node, TAB_INDEX, hidden ? -1 : null);
       });
     }
     if (visible !== hasClass(slide, CLASS_VISIBLE)) {

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.6.0
+ * Version  : 3.6.1
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -950,13 +950,13 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function updateVisibility(visible) {
-      var ariaHidden = !visible && !isActive();
-      setAttribute(slide, ARIA_HIDDEN, ariaHidden || null);
-      setAttribute(slide, TAB_INDEX, !ariaHidden && options.slideFocus ? 0 : null);
+      var hidden = !visible && (!isActive() || isClone);
+      setAttribute(slide, ARIA_HIDDEN, hidden || null);
+      setAttribute(slide, TAB_INDEX, !hidden && options.slideFocus ? 0 : null);
 
       if (focusableNodes) {
         focusableNodes.forEach(function (node) {
-          setAttribute(node, TAB_INDEX, ariaHidden ? -1 : null);
+          setAttribute(node, TAB_INDEX, hidden ? -1 : null);
         });
       }
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/Slides/Slide.ts

@@ -190,14 +190,14 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    * @param visible - Set `true` if the slide is visible.
    */
   function updateVisibility( visible: boolean ): void {
-    const ariaHidden = ! visible && ! isActive();
+    const hidden = ! visible && ( ! isActive() || isClone );
 
-    setAttribute( slide, ARIA_HIDDEN, ariaHidden || null );
-    setAttribute( slide, TAB_INDEX, ! ariaHidden && options.slideFocus ? 0 : null );
+    setAttribute( slide, ARIA_HIDDEN, hidden || null );
+    setAttribute( slide, TAB_INDEX, ! hidden && options.slideFocus ? 0 : null );
 
     if ( focusableNodes ) {
       focusableNodes.forEach( node => {
-        setAttribute( node, TAB_INDEX, ariaHidden ? -1 : null );
+        setAttribute( node, TAB_INDEX, hidden ? -1 : null );
       } );
     }
 

src/js/test/php/examples/autoplay.php

@@ -19,7 +19,8 @@ $settings = get_settings();
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
-        rewind       : true,
+        // rewind       : true,
+        type         : 'loop',
         autoplay     : true,
         pauseOnHover : false,
         resetProgress: false,

src/js/test/php/examples/drag-free.php

@@ -19,10 +19,10 @@ $settings = get_settings();
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
-        perPage: 2,
+        perPage: 4,
         gap    : '1.5rem',
         drag   : 'free',
-        height : 200,
+        // height : 400,
         type   : 'loop',
         // direction: 'rtl',
         waitForTransition: false,
@@ -40,7 +40,7 @@ $settings = get_settings();
 </head>
 <body>
 
-<?php render( 'splide01', 4 ); ?>
+<?php render( 'splide01', 10 ); ?>
 
 </body>
 </html>