Bug Fix: Could not reach to the first/end slide if `trimSpace: true` and `rewind: true`.

dist/js/splide.cjs.js

@@ -855,15 +855,12 @@ function Slide$1(Splide2, index, slideIndex, slide) {
       updateOnMove = options.updateOnMove,
       i18n = options.i18n,
       pagination = options.pagination,
-      slideFocus = options.slideFocus,
-      live = options.live;
+      slideFocus = options.slideFocus;
   var resolve = Components.Direction.resolve;
   var styles = getAttribute(slide, "style");
   var label = getAttribute(slide, ARIA_LABEL);
-  var slideLabel = label || format(i18n.slideLabel, [index + 1, Splide2.length]);
   var isClone = slideIndex > -1;
   var container = child(slide, "." + CLASS_CONTAINER);
-  var sr = create("span", CLASS_SR);
   var focusableNodes = queryAll(slide, options.focusableNodes || "");
   var destroyed;
 
@@ -873,8 +870,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
       slide.id = root.id + "-slide" + pad(index + 1);
       setAttribute(slide, ROLE, pagination ? "tabpanel" : "group");
       setAttribute(slide, ARIA_ROLEDESCRIPTION, noDescription ? "" : i18n.slide);
-      setAttribute(slide, ARIA_LABEL, slideLabel);
-      live && before(sr, child(slide));
+      setAttribute(slide, ARIA_LABEL, label || format(i18n.slideLabel, [index + 1, Splide2.length]));
     }
 
     listen();
@@ -883,8 +879,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   function listen() {
     bind(slide, "click", apply(emit, EVENT_CLICK, self));
     bind(slide, "keydown", apply(emit, EVENT_SLIDE_KEYDOWN, self));
-    on([EVENT_MOVED, EVENT_SCROLLED], apply(update, false));
-    on(EVENT_SHIFTED, apply(update, true));
+    on([EVENT_MOVED, EVENT_SHIFTED, EVENT_SCROLLED], update);
     on(EVENT_NAVIGATION_MOUNTED, initNavigation);
 
     if (updateOnMove) {
@@ -895,7 +890,6 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   function destroy() {
     destroyed = true;
     event.destroy();
-    remove(sr);
     removeClass(slide, STATUS_CLASSES);
     removeAttribute(slide, ALL_ATTRIBUTES);
     setAttribute(slide, "style", styles);
@@ -910,23 +904,21 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     setAttribute(slide, ARIA_LABEL, format(i18n.slideX, (isClone ? slideIndex : index) + 1));
     setAttribute(slide, ARIA_CONTROLS, controls);
     setAttribute(slide, ROLE, slideFocus ? "button" : "");
-    updateA11y();
   }
 
   function onMove() {
     if (!destroyed) {
-      update(true);
+      update();
     }
   }
 
-  function update(excludeA11y) {
+  function update() {
     if (!destroyed) {
       var curr = Splide2.index;
       updateActivity();
       updateVisibility();
       toggleClass(slide, CLASS_PREV, index === curr - 1);
       toggleClass(slide, CLASS_NEXT, index === curr + 1);
-      !excludeA11y && updateA11y();
     }
   }
 
@@ -935,37 +927,33 @@ function Slide$1(Splide2, index, slideIndex, slide) {
 
     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() {
     var visible = isVisible();
+    var hidden = !visible && (!isActive() || isClone);
 
-    if (visible !== hasClass(slide, CLASS_VISIBLE)) {
-      toggleClass(slide, CLASS_VISIBLE, visible);
-      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
-    }
-
-    if (!visible && document.activeElement === slide) {
-      var Slide2 = Components.Slides.getAt(Splide2.index);
-      Slide2 && focus(Slide2.slide);
+    if (!Splide2.state.is([MOVING, SCROLLING])) {
+      setAttribute(slide, ARIA_HIDDEN, hidden || "");
     }
-  }
 
-  function updateA11y() {
-    var active = isActive();
-    var hidden = !isVisible() && (!active || isClone);
-    setAttribute(slide, ARIA_CURRENT, isNavigation && active || "");
-    setAttribute(slide, ARIA_HIDDEN, hidden || "");
     setAttribute(focusableNodes, TAB_INDEX, hidden ? -1 : "");
 
     if (slideFocus) {
       setAttribute(slide, TAB_INDEX, hidden ? -1 : 0);
     }
 
-    if (live) {
-      sr.textContent = hidden ? "" : slideLabel;
+    if (visible !== hasClass(slide, CLASS_VISIBLE)) {
+      toggleClass(slide, CLASS_VISIBLE, visible);
+      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
+    }
+
+    if (!visible && document.activeElement === slide) {
+      var Slide2 = Components.Slides.getAt(Splide2.index);
+      Slide2 && focus(Slide2.slide);
     }
   }
 
@@ -1666,7 +1654,7 @@ function Controller(Splide2, Components2, options) {
     if (isSlide && options.trimSpace === "move" && dest !== currIndex) {
       var position = getPosition();
 
-      while (position === toPosition(dest, true) && between(dest, 0, Splide2.length - 1)) {
+      while (position === toPosition(dest, true) && between(dest, 0, Splide2.length - 1, !options.rewind)) {
         dest < currIndex ? --dest : ++dest;
       }
     }
@@ -1745,7 +1733,8 @@ function Arrows(Splide2, Components2, options) {
       i18n = options.i18n;
   var Elements = Components2.Elements,
       Controller = Components2.Controller;
-  var userArrows = Elements.arrows;
+  var userArrows = Elements.arrows,
+      track = Elements.track;
   var wrapper = userArrows;
   var prev = Elements.prev;
   var next = Elements.next;
@@ -1781,7 +1770,7 @@ function Arrows(Splide2, Components2, options) {
       if (enabled) {
         listen();
         update();
-        setAttribute([prev, next], ARIA_CONTROLS, Elements.list.id);
+        setAttribute([prev, next], ARIA_CONTROLS, track.id);
         emit(EVENT_ARROWS_MOUNTED, prev, next);
       }
     }
@@ -1815,7 +1804,7 @@ function Arrows(Splide2, Components2, options) {
     next = createArrow(false);
     created = true;
     append(wrapper, [prev, next]);
-    !userArrows && before(wrapper, Elements.track);
+    !userArrows && before(wrapper, track);
   }
 
   function createArrow(prev2) {
@@ -1865,7 +1854,7 @@ function Autoplay(Splide2, Components2, options) {
   function mount() {
     if (autoplay) {
       listen();
-      toggle && setAttribute(toggle, ARIA_CONTROLS, Elements.list.id);
+      toggle && setAttribute(toggle, ARIA_CONTROLS, Elements.track.id);
       stopped || play();
       update();
     }
@@ -2769,28 +2758,35 @@ function Live(Splide2, Components2, options) {
   var _EventInterface14 = EventInterface(Splide2),
       on = _EventInterface14.on;
 
-  var list = Components2.Elements.list;
+  var track = Components2.Elements.track;
   var live = options.live;
   var enabled = live && !options.isNavigation;
+  var sr = create("span", CLASS_SR);
 
   function mount() {
     if (enabled) {
-      setAttribute(list, ARIA_ATOMIC, false);
       disable(!Components2.Autoplay.isPaused());
       on(EVENT_AUTOPLAY_PLAY, apply(disable, true));
       on(EVENT_AUTOPLAY_PAUSE, apply(disable, false));
+      on([EVENT_MOVED, EVENT_SCROLLED], update);
     }
   }
 
   function disable(disabled) {
     if (enabled) {
-      setAttribute(list, ARIA_LIVE, disabled ? "off" : "polite");
+      setAttribute(track, ARIA_LIVE, disabled ? "off" : "polite");
     }
   }
 
+  function update() {
+    append(track, sr);
+    sr.textContent = "\u2026";
+  }
+
   return {
     mount: mount,
-    disable: disable
+    disable: disable,
+    destroy: apply(remove, sr)
   };
 }
 

dist/js/splide.esm.js

@@ -850,15 +850,12 @@ function Slide$1(Splide2, index, slideIndex, slide) {
       updateOnMove = options.updateOnMove,
       i18n = options.i18n,
       pagination = options.pagination,
-      slideFocus = options.slideFocus,
-      live = options.live;
+      slideFocus = options.slideFocus;
   var resolve = Components.Direction.resolve;
   var styles = getAttribute(slide, "style");
   var label = getAttribute(slide, ARIA_LABEL);
-  var slideLabel = label || format(i18n.slideLabel, [index + 1, Splide2.length]);
   var isClone = slideIndex > -1;
   var container = child(slide, "." + CLASS_CONTAINER);
-  var sr = create("span", CLASS_SR);
   var focusableNodes = queryAll(slide, options.focusableNodes || "");
   var destroyed;
 
@@ -868,8 +865,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
       slide.id = root.id + "-slide" + pad(index + 1);
       setAttribute(slide, ROLE, pagination ? "tabpanel" : "group");
       setAttribute(slide, ARIA_ROLEDESCRIPTION, noDescription ? "" : i18n.slide);
-      setAttribute(slide, ARIA_LABEL, slideLabel);
-      live && before(sr, child(slide));
+      setAttribute(slide, ARIA_LABEL, label || format(i18n.slideLabel, [index + 1, Splide2.length]));
     }
 
     listen();
@@ -878,8 +874,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   function listen() {
     bind(slide, "click", apply(emit, EVENT_CLICK, self));
     bind(slide, "keydown", apply(emit, EVENT_SLIDE_KEYDOWN, self));
-    on([EVENT_MOVED, EVENT_SCROLLED], apply(update, false));
-    on(EVENT_SHIFTED, apply(update, true));
+    on([EVENT_MOVED, EVENT_SHIFTED, EVENT_SCROLLED], update);
     on(EVENT_NAVIGATION_MOUNTED, initNavigation);
 
     if (updateOnMove) {
@@ -890,7 +885,6 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   function destroy() {
     destroyed = true;
     event.destroy();
-    remove(sr);
     removeClass(slide, STATUS_CLASSES);
     removeAttribute(slide, ALL_ATTRIBUTES);
     setAttribute(slide, "style", styles);
@@ -905,23 +899,21 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     setAttribute(slide, ARIA_LABEL, format(i18n.slideX, (isClone ? slideIndex : index) + 1));
     setAttribute(slide, ARIA_CONTROLS, controls);
     setAttribute(slide, ROLE, slideFocus ? "button" : "");
-    updateA11y();
   }
 
   function onMove() {
     if (!destroyed) {
-      update(true);
+      update();
     }
   }
 
-  function update(excludeA11y) {
+  function update() {
     if (!destroyed) {
       var curr = Splide2.index;
       updateActivity();
       updateVisibility();
       toggleClass(slide, CLASS_PREV, index === curr - 1);
       toggleClass(slide, CLASS_NEXT, index === curr + 1);
-      !excludeA11y && updateA11y();
     }
   }
 
@@ -930,37 +922,33 @@ function Slide$1(Splide2, index, slideIndex, slide) {
 
     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() {
     var visible = isVisible();
+    var hidden = !visible && (!isActive() || isClone);
 
-    if (visible !== hasClass(slide, CLASS_VISIBLE)) {
-      toggleClass(slide, CLASS_VISIBLE, visible);
-      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
-    }
-
-    if (!visible && document.activeElement === slide) {
-      var Slide2 = Components.Slides.getAt(Splide2.index);
-      Slide2 && focus(Slide2.slide);
+    if (!Splide2.state.is([MOVING, SCROLLING])) {
+      setAttribute(slide, ARIA_HIDDEN, hidden || "");
     }
-  }
 
-  function updateA11y() {
-    var active = isActive();
-    var hidden = !isVisible() && (!active || isClone);
-    setAttribute(slide, ARIA_CURRENT, isNavigation && active || "");
-    setAttribute(slide, ARIA_HIDDEN, hidden || "");
     setAttribute(focusableNodes, TAB_INDEX, hidden ? -1 : "");
 
     if (slideFocus) {
       setAttribute(slide, TAB_INDEX, hidden ? -1 : 0);
     }
 
-    if (live) {
-      sr.textContent = hidden ? "" : slideLabel;
+    if (visible !== hasClass(slide, CLASS_VISIBLE)) {
+      toggleClass(slide, CLASS_VISIBLE, visible);
+      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
+    }
+
+    if (!visible && document.activeElement === slide) {
+      var Slide2 = Components.Slides.getAt(Splide2.index);
+      Slide2 && focus(Slide2.slide);
     }
   }
 
@@ -1661,7 +1649,7 @@ function Controller(Splide2, Components2, options) {
     if (isSlide && options.trimSpace === "move" && dest !== currIndex) {
       var position = getPosition();
 
-      while (position === toPosition(dest, true) && between(dest, 0, Splide2.length - 1)) {
+      while (position === toPosition(dest, true) && between(dest, 0, Splide2.length - 1, !options.rewind)) {
         dest < currIndex ? --dest : ++dest;
       }
     }
@@ -1740,7 +1728,8 @@ function Arrows(Splide2, Components2, options) {
       i18n = options.i18n;
   var Elements = Components2.Elements,
       Controller = Components2.Controller;
-  var userArrows = Elements.arrows;
+  var userArrows = Elements.arrows,
+      track = Elements.track;
   var wrapper = userArrows;
   var prev = Elements.prev;
   var next = Elements.next;
@@ -1776,7 +1765,7 @@ function Arrows(Splide2, Components2, options) {
       if (enabled) {
         listen();
         update();
-        setAttribute([prev, next], ARIA_CONTROLS, Elements.list.id);
+        setAttribute([prev, next], ARIA_CONTROLS, track.id);
         emit(EVENT_ARROWS_MOUNTED, prev, next);
       }
     }
@@ -1810,7 +1799,7 @@ function Arrows(Splide2, Components2, options) {
     next = createArrow(false);
     created = true;
     append(wrapper, [prev, next]);
-    !userArrows && before(wrapper, Elements.track);
+    !userArrows && before(wrapper, track);
   }
 
   function createArrow(prev2) {
@@ -1860,7 +1849,7 @@ function Autoplay(Splide2, Components2, options) {
   function mount() {
     if (autoplay) {
       listen();
-      toggle && setAttribute(toggle, ARIA_CONTROLS, Elements.list.id);
+      toggle && setAttribute(toggle, ARIA_CONTROLS, Elements.track.id);
       stopped || play();
       update();
     }
@@ -2764,28 +2753,35 @@ function Live(Splide2, Components2, options) {
   var _EventInterface14 = EventInterface(Splide2),
       on = _EventInterface14.on;
 
-  var list = Components2.Elements.list;
+  var track = Components2.Elements.track;
   var live = options.live;
   var enabled = live && !options.isNavigation;
+  var sr = create("span", CLASS_SR);
 
   function mount() {
     if (enabled) {
-      setAttribute(list, ARIA_ATOMIC, false);
       disable(!Components2.Autoplay.isPaused());
       on(EVENT_AUTOPLAY_PLAY, apply(disable, true));
       on(EVENT_AUTOPLAY_PAUSE, apply(disable, false));
+      on([EVENT_MOVED, EVENT_SCROLLED], update);
     }
   }
 
   function disable(disabled) {
     if (enabled) {
-      setAttribute(list, ARIA_LIVE, disabled ? "off" : "polite");
+      setAttribute(track, ARIA_LIVE, disabled ? "off" : "polite");
     }
   }
 
+  function update() {
+    append(track, sr);
+    sr.textContent = "\u2026";
+  }
+
   return {
     mount: mount,
-    disable: disable
+    disable: disable,
+    destroy: apply(remove, sr)
   };
 }
 

dist/js/splide.js

@@ -1648,7 +1648,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       if (isSlide && options.trimSpace === "move" && dest !== currIndex) {
         var position = getPosition();
 
-        while (position === toPosition(dest, true) && between(dest, 0, Splide2.length - 1)) {
+        while (position === toPosition(dest, true) && between(dest, 0, Splide2.length - 1, !options.rewind)) {
           dest < currIndex ? --dest : ++dest;
         }
       }

dist/types/index.d.ts

@@ -349,7 +349,7 @@ interface Options extends ResponsiveOptions {
      * - 'focused': Listens to the `keydown` event of the slider root element with adding `tabindex="0"` to it.
      * - `false`: Disables keyboard shortcuts (default).
      */
-    keyboard?: boolean | string;
+    keyboard?: boolean | 'global' | 'focused';
     /**
      * Enables navigation by the mouse wheel.
      * Set `waitForTransition` to `ture` or provide the `wheelSleep` duration.
@@ -467,7 +467,8 @@ interface ResponsiveOptions {
      */
     speed?: number;
     /**
-     * Determines whether to rewind the slider or not.
+     * Determines whether to rewind the carousel or not.
+     * This is ignored when the `type` option is `'loop'`.
      */
     rewind?: boolean;
     /**
@@ -475,8 +476,7 @@ interface ResponsiveOptions {
      */
     rewindSpeed?: number;
     /**
-     * Allows to rewind by drag.
-     * The slider `type` must be `slide` (or `undefined`) and the `drag` option must be enabled.
+     * Allows to rewind a carousel by drag if the `rewind` option is enabled.
      */
     rewindByDrag?: boolean;
     /**

src/js/components/Controller/Controller.ts

@@ -248,7 +248,7 @@ export function Controller( Splide: Splide, Components: Components, options: Opt
     if ( isSlide && options.trimSpace === 'move' && dest !== currIndex ) {
       const position = getPosition();
 
-      while ( position === toPosition( dest, true ) && between( dest, 0, Splide.length - 1 ) ) {
+      while ( position === toPosition( dest, true ) && between( dest, 0, Splide.length - 1, ! options.rewind ) ) {
         dest < currIndex ? --dest : ++dest;
       }
     }