Quit updating slide attributes when the slider is shifted.

dist/js/splide.cjs.js

@@ -860,10 +860,10 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   }
 
   function listen() {
-    bind(slide, "click keydown", function (e) {
-      emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, self, e);
-    });
-    on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_SHIFTED, EVENT_MOVED, EVENT_SCROLLED], update);
+    bind(slide, "click", apply(emit, EVENT_CLICK, self));
+    bind(slide, "keydown", apply(emit, EVENT_SLIDE_KEYDOWN, self));
+    on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], apply(update, true));
+    on(EVENT_SHIFTED, apply(update, false));
     on(EVENT_NAVIGATION_MOUNTED, initNavigation);
 
     if (updateOnMove) {
@@ -886,7 +886,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }).join(" ");
     setAttribute(slide, ARIA_LABEL, format(i18n.slideX, (isClone ? slideIndex : index) + 1));
     setAttribute(slide, ARIA_CONTROLS, controls);
-    updateActivity(isActive());
+    updateAttributes();
   }
 
   function onMove() {
@@ -895,49 +895,49 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }
   }
 
-  function update() {
+  function update(attributes) {
     if (!destroyed) {
       var curr = Splide2.index;
-      updateActivity(isActive());
-      updateVisibility(isVisible());
+      updateActivity();
+      updateVisibility();
       toggleClass(slide, CLASS_PREV, index === curr - 1);
       toggleClass(slide, CLASS_NEXT, index === curr + 1);
+      attributes && updateAttributes();
     }
   }
 
-  function updateActivity(active) {
+  function updateActivity() {
+    var active = isActive();
+
     if (active !== hasClass(slide, CLASS_ACTIVE)) {
       toggleClass(slide, CLASS_ACTIVE, active);
-      setAttribute(slide, ARIA_CURRENT, isNavigation && active || "");
       emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self);
     }
   }
 
-  function updateVisibility(visible) {
-    var hidden = !visible && (!isActive() || isClone);
-
-    if (document.activeElement === slide && hidden) {
-      nextTick(forwardFocus);
-    }
-
-    setAttribute(slide, ARIA_HIDDEN, hidden || "");
-    setAttribute(slide, TAB_INDEX, !hidden && options.slideFocus ? 0 : "");
-    setAttribute(queryAll(slide, options.focusableNodes || ""), TAB_INDEX, hidden ? -1 : "");
+  function updateVisibility() {
+    var visible = isVisible();
 
     if (visible !== hasClass(slide, CLASS_VISIBLE)) {
       toggleClass(slide, CLASS_VISIBLE, visible);
       emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
     }
-  }
 
-  function forwardFocus() {
-    var Slide2 = Components.Slides.getAt(Splide2.index);
-
-    if (Slide2) {
-      focus(Slide2.slide);
+    if (!visible && document.activeElement === slide) {
+      var Slide2 = Components.Slides.getAt(Splide2.index);
+      Slide2 && focus(Slide2.slide);
     }
   }
 
+  function updateAttributes() {
+    var active = isActive();
+    var hidden = !isVisible() && (!active || isClone);
+    setAttribute(slide, ARIA_CURRENT, isNavigation && active || "");
+    setAttribute(slide, ARIA_HIDDEN, hidden || "");
+    setAttribute(slide, TAB_INDEX, !hidden && options.slideFocus ? 0 : "");
+    setAttribute(queryAll(slide, options.focusableNodes || ""), TAB_INDEX, hidden ? -1 : "");
+  }
+
   function style$1(prop, value, useContainer) {
     style(useContainer && container || slide, prop, value);
   }

dist/js/splide.esm.js

@@ -855,10 +855,10 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   }
 
   function listen() {
-    bind(slide, "click keydown", function (e) {
-      emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, self, e);
-    });
-    on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_SHIFTED, EVENT_MOVED, EVENT_SCROLLED], update);
+    bind(slide, "click", apply(emit, EVENT_CLICK, self));
+    bind(slide, "keydown", apply(emit, EVENT_SLIDE_KEYDOWN, self));
+    on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], apply(update, true));
+    on(EVENT_SHIFTED, apply(update, false));
     on(EVENT_NAVIGATION_MOUNTED, initNavigation);
 
     if (updateOnMove) {
@@ -881,7 +881,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }).join(" ");
     setAttribute(slide, ARIA_LABEL, format(i18n.slideX, (isClone ? slideIndex : index) + 1));
     setAttribute(slide, ARIA_CONTROLS, controls);
-    updateActivity(isActive());
+    updateAttributes();
   }
 
   function onMove() {
@@ -890,49 +890,49 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }
   }
 
-  function update() {
+  function update(attributes) {
     if (!destroyed) {
       var curr = Splide2.index;
-      updateActivity(isActive());
-      updateVisibility(isVisible());
+      updateActivity();
+      updateVisibility();
       toggleClass(slide, CLASS_PREV, index === curr - 1);
       toggleClass(slide, CLASS_NEXT, index === curr + 1);
+      attributes && updateAttributes();
     }
   }
 
-  function updateActivity(active) {
+  function updateActivity() {
+    var active = isActive();
+
     if (active !== hasClass(slide, CLASS_ACTIVE)) {
       toggleClass(slide, CLASS_ACTIVE, active);
-      setAttribute(slide, ARIA_CURRENT, isNavigation && active || "");
       emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self);
     }
   }
 
-  function updateVisibility(visible) {
-    var hidden = !visible && (!isActive() || isClone);
-
-    if (document.activeElement === slide && hidden) {
-      nextTick(forwardFocus);
-    }
-
-    setAttribute(slide, ARIA_HIDDEN, hidden || "");
-    setAttribute(slide, TAB_INDEX, !hidden && options.slideFocus ? 0 : "");
-    setAttribute(queryAll(slide, options.focusableNodes || ""), TAB_INDEX, hidden ? -1 : "");
+  function updateVisibility() {
+    var visible = isVisible();
 
     if (visible !== hasClass(slide, CLASS_VISIBLE)) {
       toggleClass(slide, CLASS_VISIBLE, visible);
       emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
     }
-  }
 
-  function forwardFocus() {
-    var Slide2 = Components.Slides.getAt(Splide2.index);
-
-    if (Slide2) {
-      focus(Slide2.slide);
+    if (!visible && document.activeElement === slide) {
+      var Slide2 = Components.Slides.getAt(Splide2.index);
+      Slide2 && focus(Slide2.slide);
     }
   }
 
+  function updateAttributes() {
+    var active = isActive();
+    var hidden = !isVisible() && (!active || isClone);
+    setAttribute(slide, ARIA_CURRENT, isNavigation && active || "");
+    setAttribute(slide, ARIA_HIDDEN, hidden || "");
+    setAttribute(slide, TAB_INDEX, !hidden && options.slideFocus ? 0 : "");
+    setAttribute(queryAll(slide, options.focusableNodes || ""), TAB_INDEX, hidden ? -1 : "");
+  }
+
   function style$1(prop, value, useContainer) {
     style(useContainer && container || slide, prop, value);
   }

dist/js/splide.js

@@ -858,8 +858,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function listen() {
       bind(slide, "click", apply(emit, EVENT_CLICK, self));
       bind(slide, "keydown", apply(emit, EVENT_SLIDE_KEYDOWN, self));
-      on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_SHIFTED, EVENT_MOVED, EVENT_SCROLLED], update);
-      on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], updateAria);
+      on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], apply(update, true));
+      on(EVENT_SHIFTED, apply(update, false));
       on(EVENT_NAVIGATION_MOUNTED, initNavigation);
 
       if (updateOnMove) {
@@ -882,7 +882,7 @@ 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);
-      updateActivity(isActive());
+      updateAttributes();
     }
 
     function onMove() {
@@ -891,51 +891,47 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
     }
 
-    function update() {
+    function update(attributes) {
       if (!destroyed) {
         var curr = Splide2.index;
-        updateActivity(isActive());
-        updateVisibility(isVisible());
+        updateActivity();
+        updateVisibility();
         toggleClass(slide, CLASS_PREV, index === curr - 1);
         toggleClass(slide, CLASS_NEXT, index === curr + 1);
+        attributes && updateAttributes();
       }
     }
 
-    function updateActivity(active) {
+    function updateActivity() {
+      var active = isActive();
+
       if (active !== hasClass(slide, CLASS_ACTIVE)) {
         toggleClass(slide, CLASS_ACTIVE, active);
-        setAttribute(slide, ARIA_CURRENT, isNavigation && active || "");
         emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self);
       }
     }
 
-    function updateVisibility(visible) {
-      var hidden = !visible && (!isActive() || isClone);
-
-      if (document.activeElement === slide && hidden) {
-        nextTick(keepFocus);
-      }
-
-      setAttribute(slide, TAB_INDEX, !hidden && options.slideFocus ? 0 : "");
-      setAttribute(queryAll(slide, options.focusableNodes || ""), TAB_INDEX, hidden ? -1 : "");
+    function updateVisibility() {
+      var visible = isVisible();
 
       if (visible !== hasClass(slide, CLASS_VISIBLE)) {
         toggleClass(slide, CLASS_VISIBLE, visible);
         emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
       }
-    }
 
-    function updateAria() {
-      var hidden = !isVisible() && (!isActive() || isClone);
-      setAttribute(slide, ARIA_HIDDEN, hidden || "");
+      if (!visible && document.activeElement === slide) {
+        var Slide2 = Components.Slides.getAt(Splide2.index);
+        Slide2 && focus(Slide2.slide);
+      }
     }
 
-    function keepFocus() {
-      var Slide2 = Components.Slides.getAt(Splide2.index);
-
-      if (Slide2) {
-        focus(Slide2.slide);
-      }
+    function updateAttributes() {
+      var active = isActive();
+      var hidden = !isVisible() && (!active || isClone);
+      setAttribute(slide, ARIA_CURRENT, isNavigation && active || "");
+      setAttribute(slide, ARIA_HIDDEN, hidden || "");
+      setAttribute(slide, TAB_INDEX, !hidden && options.slideFocus ? 0 : "");
+      setAttribute(queryAll(slide, options.focusableNodes || ""), TAB_INDEX, hidden ? -1 : "");
     }
 
     function style$1(prop, value, useContainer) {

src/js/components/Slides/Slide.ts

@@ -36,7 +36,8 @@ import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent } from '../../types';
 import {
-  abs, apply,
+  abs,
+  apply,
   ceil,
   child,
   floor,
@@ -45,7 +46,6 @@ import {
   getAttribute,
   hasClass,
   min,
-  nextTick,
   pad,
   queryAll,
   rect,
@@ -120,8 +120,8 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
     bind( slide, 'click', apply( emit, EVENT_CLICK, self ) );
     bind( slide, 'keydown', apply( emit, EVENT_SLIDE_KEYDOWN, self ) );
 
-    on( [ EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_SHIFTED, EVENT_MOVED, EVENT_SCROLLED ], update );
-    on( [ EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED ], updateAria );
+    on( [ EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED ], apply( update, true ) );
+    on( EVENT_SHIFTED, apply( update, false ) );
     on( EVENT_NAVIGATION_MOUNTED, initNavigation );
 
     if ( updateOnMove ) {
@@ -151,7 +151,7 @@ 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 );
-    updateActivity( isActive() );
+    updateAttributes();
   }
 
   /**
@@ -165,73 +165,63 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
 
   /**
    * Updates attribute and classes of the slide.
+   *
+   * @param attributes - Determines whether to update attributes or not.
    */
-  function update(): void {
+  function update( attributes?: boolean ): void {
     if ( ! destroyed ) {
       const { index: curr } = Splide;
 
-      updateActivity( isActive() );
-      updateVisibility( isVisible() );
-
+      updateActivity();
+      updateVisibility();
       toggleClass( slide, CLASS_PREV, index === curr - 1 );
       toggleClass( slide, CLASS_NEXT, index === curr + 1 );
+      attributes && updateAttributes();
     }
   }
 
   /**
    * Updates the status related with activity.
-   *
-   * @param active - Set `true` if the slide is active.
    */
-  function updateActivity( active: boolean ): void {
+  function updateActivity(): void {
+    const active = isActive();
+
     if ( active !== hasClass( slide, CLASS_ACTIVE ) ) {
       toggleClass( slide, CLASS_ACTIVE, active );
-      setAttribute( slide, ARIA_CURRENT, isNavigation && active || '' );
       emit( active ? EVENT_ACTIVE : EVENT_INACTIVE, self );
     }
   }
 
   /**
    * Updates classes and attributes related with visibility.
-   *
-   * @param visible - Set `true` if the slide is visible.
+   * If the slide has focus and gets hidden, moves focus to the active slide.
    */
-  function updateVisibility( visible: boolean ): void {
-    const hidden = ! visible && ( ! isActive() || isClone );
-
-    if ( document.activeElement === slide && hidden ) {
-      nextTick( keepFocus );
-    }
-
-    setAttribute( slide, TAB_INDEX, ! hidden && options.slideFocus ? 0 : '' );
-    setAttribute( queryAll( slide, options.focusableNodes || '' ), TAB_INDEX, hidden ? -1 : '' );
+  function updateVisibility(): void {
+    const visible = isVisible();
 
     if ( visible !== hasClass( slide, CLASS_VISIBLE ) ) {
       toggleClass( slide, CLASS_VISIBLE, visible );
       emit( visible ? EVENT_VISIBLE : EVENT_HIDDEN, self );
     }
-  }
 
-  /**
-   * Updates aria attributes.
-   *
-   * @todo
-   */
-  function updateAria(): void {
-    const hidden = ! isVisible() && ( ! isActive() || isClone );
-    setAttribute( slide, ARIA_HIDDEN, hidden || '' );
+    if ( ! visible && document.activeElement === slide ) {
+      const Slide = Components.Slides.getAt( Splide.index );
+      Slide && focus( Slide.slide );
+    }
   }
 
   /**
-   * Forwards the focus to the active element.
-   * Avoid losing focus from the slider when the focused slide gets hidden by slider move.
+   * Updates attributes.
+   * Do not call this on "shifted" event to avoid SR from reading clone's contents.
    */
-  function keepFocus(): void {
-    const Slide = Components.Slides.getAt( Splide.index );
+  function updateAttributes(): void {
+    const active = isActive();
+    const hidden = ! isVisible() && ( ! active || isClone );
 
-    if ( Slide ) {
-      focus( Slide.slide );
-    }
+    setAttribute( slide, ARIA_CURRENT, isNavigation && active || '' );
+    setAttribute( slide, ARIA_HIDDEN, hidden || '' );
+    setAttribute( slide, TAB_INDEX, ! hidden && options.slideFocus ? 0 : '' );
+    setAttribute( queryAll( slide, options.focusableNodes || '' ), TAB_INDEX, hidden ? -1 : '' );
   }
 
   /**