Add SR fields.

dist/css/splide-core.min.css

@@ -1 +1 @@
-@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list{display:block}.splide__track--fade>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slide:not([aria-hidden]){display:block}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}
+@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list{display:block}.splide__track--fade>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__track{overflow:hidden;position:relative;z-index:0}

dist/js/splide.js

@@ -718,6 +718,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var CLASS_PLAY = PROJECT_CODE + "__play";
   var CLASS_PAUSE = PROJECT_CODE + "__pause";
   var CLASS_SPINNER = PROJECT_CODE + "__spinner";
+  var CLASS_SR = PROJECT_CODE + "__sr";
   var CLASS_INITIALIZED = "is-initialized";
   var CLASS_ACTIVE = "is-active";
   var CLASS_PREV = "is-prev";
@@ -852,12 +853,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var FADE = "fade";
 
   function Slide$1(Splide2, index, slideIndex, slide) {
-    var _EventInterface2 = EventInterface(Splide2),
-        on = _EventInterface2.on,
-        emit = _EventInterface2.emit,
-        bind = _EventInterface2.bind,
-        destroyEvents = _EventInterface2.destroy;
-
+    var event = EventInterface(Splide2);
+    var on = event.on,
+        emit = event.emit,
+        bind = event.bind;
     var Components = Splide2.Components,
         root = Splide2.root,
         options = Splide2.options;
@@ -870,14 +869,17 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var label = getAttribute(slide, ARIA_LABEL);
     var isClone = slideIndex > -1;
     var container = child(slide, "." + CLASS_CONTAINER);
+    var sr = create("span", CLASS_SR, child(slide));
     var destroyed;
 
     function mount() {
       if (!isClone) {
+        var slideLabel = label || format(i18n.slideLabel, [index + 1, Splide2.length]);
         slide.id = root.id + "-slide" + pad(index + 1);
         setAttribute(slide, ROLE, pagination ? "tabpanel" : "group");
         setAttribute(slide, ARIA_ROLEDESCRIPTION, pagination ? "" : i18n.slide);
-        setAttribute(slide, ARIA_LABEL, label || format(i18n.slideLabel, [index + 1, Splide2.length]));
+        setAttribute(slide, ARIA_LABEL, slideLabel);
+        sr.textContent = slideLabel;
       }
 
       listen();
@@ -897,7 +899,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function destroy() {
       destroyed = true;
-      destroyEvents();
+      event.destroy();
+      remove(sr);
       removeClass(slide, STATUS_CLASSES);
       removeAttribute(slide, ALL_ATTRIBUTES);
       setAttribute(slide, "style", styles);
@@ -911,7 +914,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);
-      updateAttributes();
+      updateA11y();
     }
 
     function onMove() {
@@ -920,14 +923,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
     }
 
-    function update(excludeAttributes) {
+    function update(excludeA11y) {
       if (!destroyed) {
         var curr = Splide2.index;
         updateActivity();
         updateVisibility();
         toggleClass(slide, CLASS_PREV, index === curr - 1);
         toggleClass(slide, CLASS_NEXT, index === curr + 1);
-        !excludeAttributes && updateAttributes();
+        !excludeA11y && updateA11y();
       }
     }
 
@@ -954,13 +957,17 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
     }
 
-    function updateAttributes() {
+    function updateA11y() {
       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 : "");
+
+      if (options.live) {
+        hidden ? remove(sr) : before(sr, child(slide));
+      }
     }
 
     function style$1(prop, value, useContainer) {
@@ -1010,10 +1017,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Slides(Splide2, Components2, options) {
-    var _EventInterface3 = EventInterface(Splide2),
-        on = _EventInterface3.on,
-        emit = _EventInterface3.emit,
-        bind = _EventInterface3.bind;
+    var _EventInterface2 = EventInterface(Splide2),
+        on = _EventInterface2.on,
+        emit = _EventInterface2.emit,
+        bind = _EventInterface2.bind;
 
     var _Components2$Elements = Components2.Elements,
         slides = _Components2$Elements.slides,
@@ -1158,10 +1165,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Layout(Splide2, Components2, options) {
-    var _EventInterface4 = EventInterface(Splide2),
-        on = _EventInterface4.on,
-        bind = _EventInterface4.bind,
-        emit = _EventInterface4.emit;
+    var _EventInterface3 = EventInterface(Splide2),
+        on = _EventInterface3.on,
+        bind = _EventInterface3.bind,
+        emit = _EventInterface3.emit;
 
     var Slides = Components2.Slides;
     var resolve = Components2.Direction.resolve;
@@ -1285,9 +1292,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var MULTIPLIER = 2;
 
   function Clones(Splide2, Components2, options) {
-    var _EventInterface5 = EventInterface(Splide2),
-        on = _EventInterface5.on,
-        emit = _EventInterface5.emit;
+    var _EventInterface4 = EventInterface(Splide2),
+        on = _EventInterface4.on,
+        emit = _EventInterface4.emit;
 
     var Elements = Components2.Elements,
         Slides = Components2.Slides;
@@ -1367,9 +1374,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Move(Splide2, Components2, options) {
-    var _EventInterface6 = EventInterface(Splide2),
-        on = _EventInterface6.on,
-        emit = _EventInterface6.emit;
+    var _EventInterface5 = EventInterface(Splide2),
+        on = _EventInterface5.on,
+        emit = _EventInterface5.emit;
 
     var set = Splide2.state.set;
     var _Components2$Layout = Components2.Layout,
@@ -1530,8 +1537,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Controller(Splide2, Components2, options) {
-    var _EventInterface7 = EventInterface(Splide2),
-        on = _EventInterface7.on;
+    var _EventInterface6 = EventInterface(Splide2),
+        on = _EventInterface6.on;
 
     var Move = Components2.Move;
     var getPosition = Move.getPosition,
@@ -1729,12 +1736,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var SIZE = 40;
 
   function Arrows(Splide2, Components2, options) {
-    var _EventInterface8 = EventInterface(Splide2),
-        on = _EventInterface8.on,
-        bind = _EventInterface8.bind,
-        emit = _EventInterface8.emit,
-        destroyEvents = _EventInterface8.destroy;
-
+    var event = EventInterface(Splide2);
+    var on = event.on,
+        bind = event.bind,
+        emit = event.emit;
     var classes = options.classes,
         i18n = options.i18n;
     var Elements = Components2.Elements,
@@ -1782,7 +1787,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function destroy() {
-      destroyEvents();
+      event.destroy();
       removeClass(wrapper, wrapperClasses);
 
       if (created) {
@@ -1840,10 +1845,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var INTERVAL_DATA_ATTRIBUTE = DATA_ATTRIBUTE + "-interval";
 
   function Autoplay(Splide2, Components2, options) {
-    var _EventInterface9 = EventInterface(Splide2),
-        on = _EventInterface9.on,
-        bind = _EventInterface9.bind,
-        emit = _EventInterface9.emit;
+    var _EventInterface7 = EventInterface(Splide2),
+        on = _EventInterface7.on,
+        bind = _EventInterface7.bind,
+        emit = _EventInterface7.emit;
 
     var interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), update);
     var isPaused = interval.isPaused;
@@ -1946,8 +1951,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Cover(Splide2, Components2, options) {
-    var _EventInterface10 = EventInterface(Splide2),
-        on = _EventInterface10.on;
+    var _EventInterface8 = EventInterface(Splide2),
+        on = _EventInterface8.on;
 
     function mount() {
       if (options.cover) {
@@ -1984,9 +1989,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var MIN_DURATION = 800;
 
   function Scroll(Splide2, Components2, options) {
-    var _EventInterface11 = EventInterface(Splide2),
-        on = _EventInterface11.on,
-        emit = _EventInterface11.emit;
+    var _EventInterface9 = EventInterface(Splide2),
+        on = _EventInterface9.on,
+        emit = _EventInterface9.emit;
 
     var set = Splide2.state.set;
     var Move = Components2.Move;
@@ -2080,11 +2085,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var POINTER_UP_EVENTS = "touchend touchcancel mouseup";
 
   function Drag(Splide2, Components2, options) {
-    var _EventInterface12 = EventInterface(Splide2),
-        on = _EventInterface12.on,
-        emit = _EventInterface12.emit,
-        bind = _EventInterface12.bind,
-        unbind = _EventInterface12.unbind;
+    var _EventInterface10 = EventInterface(Splide2),
+        on = _EventInterface10.on,
+        emit = _EventInterface10.emit,
+        bind = _EventInterface10.bind,
+        unbind = _EventInterface10.unbind;
 
     var state = Splide2.state;
     var Move = Components2.Move,
@@ -2304,10 +2309,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var KEYBOARD_EVENT = "keydown";
 
   function Keyboard(Splide2, Components2, options) {
-    var _EventInterface13 = EventInterface(Splide2),
-        on = _EventInterface13.on,
-        bind = _EventInterface13.bind,
-        unbind = _EventInterface13.unbind;
+    var _EventInterface11 = EventInterface(Splide2),
+        on = _EventInterface11.on,
+        bind = _EventInterface11.bind,
+        unbind = _EventInterface11.unbind;
 
     var root = Splide2.root;
     var resolve = Components2.Direction.resolve;
@@ -2376,11 +2381,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var IMAGE_SELECTOR = "[" + SRC_DATA_ATTRIBUTE + "], [" + SRCSET_DATA_ATTRIBUTE + "]";
 
   function LazyLoad(Splide2, Components2, options) {
-    var _EventInterface14 = EventInterface(Splide2),
-        on = _EventInterface14.on,
-        off = _EventInterface14.off,
-        bind = _EventInterface14.bind,
-        emit = _EventInterface14.emit;
+    var _EventInterface12 = EventInterface(Splide2),
+        on = _EventInterface12.on,
+        off = _EventInterface12.off,
+        bind = _EventInterface12.bind,
+        emit = _EventInterface12.emit;
 
     var isSequential = options.lazyLoad === "sequential";
     var images = [];
@@ -2492,12 +2497,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Pagination(Splide2, Components2, options) {
-    var _EventInterface15 = EventInterface(Splide2),
-        on = _EventInterface15.on,
-        emit = _EventInterface15.emit,
-        bind = _EventInterface15.bind,
-        destroyEvents = _EventInterface15.destroy;
-
+    var event = EventInterface(Splide2);
+    var on = event.on,
+        emit = event.emit,
+        bind = event.bind;
     var Slides = Components2.Slides,
         Elements = Components2.Elements,
         Controller = Components2.Controller;
@@ -2526,7 +2529,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function destroy() {
       if (list) {
-        destroyEvents();
+        event.destroy();
         remove(Elements.pagination ? slice(list.children) : list);
         removeClass(list, paginationClasses);
         empty(items);
@@ -2717,8 +2720,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Wheel(Splide2, Components2, options) {
-    var _EventInterface16 = EventInterface(Splide2),
-        bind = _EventInterface16.bind;
+    var _EventInterface13 = EventInterface(Splide2),
+        bind = _EventInterface13.bind;
 
     var lastTime = 0;
 
@@ -2757,8 +2760,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Live(Splide2, Components2, options) {
-    var _EventInterface17 = EventInterface(Splide2),
-        on = _EventInterface17.on;
+    var _EventInterface14 = EventInterface(Splide2),
+        on = _EventInterface14.on;
 
     var list = Components2.Elements.list;
     var live = options.live;
@@ -2845,8 +2848,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   };
 
   function Fade(Splide2, Components2, options) {
-    var _EventInterface18 = EventInterface(Splide2),
-        on = _EventInterface18.on;
+    var _EventInterface15 = EventInterface(Splide2),
+        on = _EventInterface15.on;
 
     function mount() {
       on([EVENT_MOUNTED, EVENT_REFRESH], function () {
@@ -2873,8 +2876,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Slide(Splide2, Components2, options) {
-    var _EventInterface19 = EventInterface(Splide2),
-        bind = _EventInterface19.bind;
+    var _EventInterface16 = EventInterface(Splide2),
+        bind = _EventInterface16.bind;
 
     var Move = Components2.Move,
         Controller = Components2.Controller;

src/css/core/object/objects/index.scss

@@ -6,4 +6,5 @@
 @forward 'slide';
 @forward 'slider';
 @forward 'spinner' as spinner-*;
+@forward 'sr';
 @forward 'track';

src/css/core/object/objects/slide.scss

@@ -12,8 +12,8 @@
       vertical-align: bottom;
     }
 
-    &:not([aria-hidden]) {
-      display: block;
-    }
+    //&:not([aria-hidden]) {
+      //display: unset;
+    //}
   }
 }

src/css/core/object/objects/sr.scss

@@ -0,0 +1,12 @@
+.splide {
+  &__sr {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+}

src/js/components/Arrows/Arrows.ts

@@ -49,7 +49,8 @@ export interface ArrowsComponent extends BaseComponent {
  * @return An Arrows component object.
  */
 export function Arrows( Splide: Splide, Components: Components, options: Options ): ArrowsComponent {
-  const { on, bind, emit, destroy: destroyEvents } = EventInterface( Splide );
+  const event = EventInterface( Splide );
+  const { on, bind, emit } = event;
   const { classes, i18n } = options;
   const { Elements, Controller } = Components;
   const userArrows = Elements.arrows;
@@ -128,7 +129,7 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
    * Destroys the component.
    */
   function destroy(): void {
-    destroyEvents();
+    event.destroy();
     removeClass( wrapper, wrapperClasses );
 
     if ( created ) {

src/js/components/Pagination/Pagination.ts

@@ -83,7 +83,8 @@ export interface PaginationItem {
  * @return A Pagination component object.
  */
 export function Pagination( Splide: Splide, Components: Components, options: Options ): PaginationComponent {
-  const { on, emit, bind, destroy: destroyEvents } = EventInterface( Splide );
+  const event = EventInterface( Splide );
+  const { on, emit, bind } = event;
   const { Slides, Elements, Controller } = Components;
   const { hasFocus, getIndex, go } = Controller;
   const { resolve } = Components.Direction;
@@ -124,7 +125,7 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
    */
   function destroy(): void {
     if ( list ) {
-      destroyEvents();
+      event.destroy();
       remove( Elements.pagination ? slice( list.children ) : list );
       removeClass( list, paginationClasses );
       empty( items );
@@ -138,7 +139,7 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
   function createPagination(): void {
     const { length } = Splide;
     const { classes, i18n, perPage } = options;
-    const max       = hasFocus() ? length : ceil( length / perPage );
+    const max = hasFocus() ? length : ceil( length / perPage );
 
     list = Elements.pagination || create( 'ul', classes.pagination, Elements.root );
 

src/js/components/Slides/Slide.ts

@@ -13,6 +13,7 @@ import {
   CLASS_CONTAINER,
   CLASS_NEXT,
   CLASS_PREV,
+  CLASS_SR,
   CLASS_VISIBLE,
   STATUS_CLASSES,
 } from '../../constants/classes';
@@ -38,8 +39,10 @@ import { BaseComponent } from '../../types';
 import {
   abs,
   apply,
+  before,
   ceil,
   child,
+  create,
   floor,
   focus,
   format,
@@ -49,6 +52,7 @@ import {
   pad,
   queryAll,
   rect,
+  remove,
   removeAttribute,
   removeClass,
   setAttribute,
@@ -86,7 +90,8 @@ export interface  SlideComponent extends BaseComponent {
  * @return A Slide sub component.
  */
 export function Slide( Splide: Splide, index: number, slideIndex: number, slide: HTMLElement ): SlideComponent {
-  const { on, emit, bind, destroy: destroyEvents } = EventInterface( Splide );
+  const event = EventInterface( Splide );
+  const { on, emit, bind } = event;
   const { Components, root, options } = Splide;
   const { isNavigation, updateOnMove, i18n, pagination } = options;
   const { resolve } = Components.Direction;
@@ -94,6 +99,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
   const label     = getAttribute( slide, ARIA_LABEL );
   const isClone   = slideIndex > -1;
   const container = child( slide, `.${ CLASS_CONTAINER }` );
+  const sr        = create( 'span', CLASS_SR, child( slide ) );
 
   /**
    * Turns into `true` when the component is destroyed.
@@ -105,10 +111,13 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    */
   function mount( this: SlideComponent ): void {
     if ( ! isClone ) {
+      const slideLabel = label || format( i18n.slideLabel, [ index + 1, Splide.length ] );
+
       slide.id = `${ root.id }-slide${ pad( index + 1 ) }`;
       setAttribute( slide, ROLE, pagination ? 'tabpanel' : 'group' );
       setAttribute( slide, ARIA_ROLEDESCRIPTION, pagination ? '' : i18n.slide );
-      setAttribute( slide, ARIA_LABEL, label || format( i18n.slideLabel, [ index + 1, Splide.length ] ) );
+      setAttribute( slide, ARIA_LABEL, slideLabel );
+      sr.textContent = slideLabel;
     }
 
     listen();
@@ -134,7 +143,8 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    */
   function destroy(): void {
     destroyed = true;
-    destroyEvents();
+    event.destroy();
+    remove( sr );
     removeClass( slide, STATUS_CLASSES );
     removeAttribute( slide, ALL_ATTRIBUTES );
     setAttribute( slide, 'style', styles );
@@ -152,7 +162,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 );
-    updateAttributes();
+    updateA11y();
   }
 
   /**
@@ -167,9 +177,9 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
   /**
    * Updates attribute and classes of the slide.
    *
-   * @param excludeAttributes - If `true`, attributes will be not updated.
+   * @param excludeA11y - If `true`, attributes will be not updated.
    */
-  function update( excludeAttributes?: boolean ): void {
+  function update( excludeA11y?: boolean ): void {
     if ( ! destroyed ) {
       const { index: curr } = Splide;
 
@@ -177,7 +187,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
       updateVisibility();
       toggleClass( slide, CLASS_PREV, index === curr - 1 );
       toggleClass( slide, CLASS_NEXT, index === curr + 1 );
-      ! excludeAttributes && updateAttributes();
+      ! excludeA11y && updateA11y();
     }
   }
 
@@ -215,7 +225,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    * Updates attributes.
    * Do not call this on "shifted" event to avoid SR from reading clone's contents.
    */
-  function updateAttributes(): void {
+  function updateA11y(): void {
     const active = isActive();
     const hidden = ! isVisible() && ( ! active || isClone );
 
@@ -223,6 +233,10 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
     setAttribute( slide, ARIA_HIDDEN, hidden || '' );
     setAttribute( slide, TAB_INDEX, ! hidden && options.slideFocus ? 0 : '' );
     setAttribute( queryAll( slide, options.focusableNodes || '' ), TAB_INDEX, hidden ? -1 : '' );
+
+    if ( options.live ) {
+      hidden ? remove( sr ) : before( sr, child( slide ) );
+    }
   }
 
   /**

src/js/components/Slides/test/sr.test.ts

@@ -0,0 +1,72 @@
+import { CLASS_ACTIVE, CLASS_NEXT, CLASS_PREV, CLASS_SLIDE, CLASS_SR, CLASS_VISIBLE } from '../../../constants/classes';
+import {
+  EVENT_ACTIVE,
+  EVENT_CLICK,
+  EVENT_HIDDEN,
+  EVENT_INACTIVE,
+  EVENT_SLIDE_KEYDOWN,
+  EVENT_VISIBLE,
+} from '../../../constants/events';
+import { Splide } from '../../../core/Splide/Splide';
+import { fire, init, keydown } from '../../../test';
+import { format } from '../../../utils';
+import { SlideComponent } from '../Slide';
+
+
+describe( 'The SR field', () => {
+  test( 'should be prepended to each when `live` option is `true`.', () => {
+    // const splide = init();
+    // const Slides = splide.Components.Slides;
+    // const Slide0 = Slides.getAt( 0 );
+    // const Slide1 = Slides.getAt( 1 );
+    // const Slide2 = Slides.getAt( 2 );
+    //
+    // expect( Slide0.slide.firstElementChild.classList.contains( CLASS_SR ) ).toBe( true );
+    // expect( Slide1.slide.firstElementChild.classList.contains( CLASS_SR ) ).toBe( false );
+    // expect( Slide2.slide.firstElementChild.classList.contains( CLASS_SR ) ).toBe( false );
+  } );
+
+  test( 'should be prepended to the active slide when `live` option is `true`.', () => {
+    const splide   = init();
+    const Slides   = splide.Components.Slides;
+    const callback = jest.fn();
+
+    Slides.forEach( Slide => {
+      expect( Slide.slide.firstElementChild.classList.contains( CLASS_SR ) ).toBe( Slide.index === 0 );
+      callback();
+    } );
+
+    expect( callback ).toHaveBeenCalled();
+  } );
+
+  test( 'should not be prepended when `live` option is `false`.', () => {
+    const splide   = init( { live: false } );
+    const Slides   = splide.Components.Slides;
+    const callback = jest.fn();
+
+    Slides.forEach( Slide => {
+      expect( Slide.slide.firstElementChild.classList.contains( CLASS_SR ) ).toBe( false );
+      callback();
+    } );
+
+    expect( callback ).toHaveBeenCalled();
+  } );
+
+  test( 'should describe the current slide position.', () => {
+    const splide = init( { speed: 0 } );
+    const Slides = splide.Components.Slides;
+    const Slide0 = Slides.getAt( 0 );
+    const Slide1 = Slides.getAt( 1 );
+    const Slide2 = Slides.getAt( 2 );
+
+    expect( Slide0.slide.firstElementChild.textContent ).toBe( `1 of ${ splide.length }` );
+
+    splide.go( 1 );
+
+    expect( Slide1.slide.firstElementChild.textContent ).toBe( `2 of ${ splide.length }` );
+
+    splide.go( 2 );
+
+    expect( Slide2.slide.firstElementChild.textContent ).toBe( `3 of ${ splide.length }` );
+  } );
+} );

src/js/constants/classes.ts

@@ -19,6 +19,7 @@ export const CLASS_AUTOPLAY        = `${ PROJECT_CODE }__autoplay`;
 export const CLASS_PLAY            = `${ PROJECT_CODE }__play`;
 export const CLASS_PAUSE           = `${ PROJECT_CODE }__pause`;
 export const CLASS_SPINNER         = `${ PROJECT_CODE }__spinner`;
+export const CLASS_SR              = `${ PROJECT_CODE }__sr`;
 export const CLASS_INITIALIZED     = 'is-initialized';
 export const CLASS_ACTIVE          = 'is-active';
 export const CLASS_PREV            = 'is-prev';
@@ -26,6 +27,7 @@ export const CLASS_NEXT            = 'is-next';
 export const CLASS_VISIBLE         = 'is-visible';
 export const CLASS_LOADING         = 'is-loading';
 
+
 /**
  * The array with all status classes.
  *

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

@@ -22,7 +22,7 @@ $settings = get_settings();
 	      type        : 'loop',
 	      width       : 480,
 	      rewind      : true,
-	      live        : false,
+	      // live        : false,
 	      speed       : 600,
 	      arrowPath   : 'm13.5 7.01 13 13m-13 13 13-13',
 	      updateOnMove: true,