Add `aria-roledescription` to the root and all slide elements.

dist/js/splide.cjs.js

@@ -156,21 +156,23 @@ function merge(object, source) {
   return object;
 }
 
-function removeAttribute(elm, attrs) {
-  if (elm) {
+function removeAttribute(elms, attrs) {
+  forEach(elms, (elm) => {
     forEach(attrs, (attr) => {
-      elm.removeAttribute(attr);
+      elm && elm.removeAttribute(attr);
     });
-  }
+  });
 }
 
-function setAttribute(elm, attrs, value) {
+function setAttribute(elms, attrs, value) {
   if (isObject(attrs)) {
     forOwn(attrs, (value2, name) => {
-      setAttribute(elm, name, value2);
+      setAttribute(elms, name, value2);
     });
   } else {
-    isNull(value) ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));
+    forEach(elms, (elm) => {
+      isNull(value) ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));
+    });
   }
 }
 
@@ -631,6 +633,32 @@ function Direction(Splide2, Components2, options) {
   };
 }
 
+const ROLE = "role";
+const TAB_INDEX = "tabindex";
+const DISABLED = "disabled";
+const ARIA_PREFIX = "aria-";
+const ARIA_CONTROLS = `${ARIA_PREFIX}controls`;
+const ARIA_CURRENT = `${ARIA_PREFIX}current`;
+const ARIA_LABEL = `${ARIA_PREFIX}label`;
+const ARIA_HIDDEN = `${ARIA_PREFIX}hidden`;
+const ARIA_ORIENTATION = `${ARIA_PREFIX}orientation`;
+const ARIA_ROLEDESCRIPTION = `${ARIA_PREFIX}roledescription`;
+const ARIA_ATOMIC = `${ARIA_PREFIX}atomic`;
+const ARIA_LIVE = `${ARIA_PREFIX}live`;
+const ALL_ATTRIBUTES = [
+  ROLE,
+  TAB_INDEX,
+  DISABLED,
+  ARIA_CONTROLS,
+  ARIA_CURRENT,
+  ARIA_LABEL,
+  ARIA_HIDDEN,
+  ARIA_ORIENTATION,
+  ARIA_ROLEDESCRIPTION,
+  ARIA_ATOMIC,
+  ARIA_LIVE
+];
+
 const CLASS_ROOT = PROJECT_CODE;
 const CLASS_SLIDER = `${PROJECT_CODE}__slider`;
 const CLASS_TRACK = `${PROJECT_CODE}__track`;
@@ -650,6 +678,7 @@ const CLASS_AUTOPLAY = `${PROJECT_CODE}__autoplay`;
 const CLASS_PLAY = `${PROJECT_CODE}__play`;
 const CLASS_PAUSE = `${PROJECT_CODE}__pause`;
 const CLASS_SPINNER = `${PROJECT_CODE}__spinner`;
+const CLASS_SR = `${PROJECT_CODE}__sr`;
 const CLASS_INITIALIZED = "is-initialized";
 const CLASS_ACTIVE = "is-active";
 const CLASS_PREV = "is-prev";
@@ -680,7 +709,7 @@ function Elements(Splide2, Components2, options) {
   let list;
   function setup() {
     collect();
-    identify();
+    init();
     addClass(root, classes = getClasses());
   }
   function mount() {
@@ -688,11 +717,9 @@ function Elements(Splide2, Components2, options) {
     on(EVENT_UPDATED, update);
   }
   function destroy() {
-    [root, track, list].forEach((elm) => {
-      removeAttribute(elm, "style");
-    });
     empty(slides);
     removeClass(root, classes);
+    removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style"));
   }
   function refresh() {
     destroy();
@@ -725,11 +752,12 @@ function Elements(Splide2, Components2, options) {
       pause: query(autoplay, `.${CLASS_PAUSE}`)
     });
   }
-  function identify() {
+  function init() {
     const id = root.id || uniqueId(PROJECT_CODE);
     root.id = id;
     track.id = track.id || `${id}-track`;
     list.id = list.id || `${id}-list`;
+    setAttribute(root, ARIA_ROLEDESCRIPTION, "carousel");
   }
   function find(selector) {
     return child(root, selector) || child(slider, selector);
@@ -750,25 +778,6 @@ function Elements(Splide2, Components2, options) {
   });
 }
 
-const ROLE = "role";
-const ARIA_CONTROLS = "aria-controls";
-const ARIA_CURRENT = "aria-current";
-const ARIA_LABEL = "aria-label";
-const ARIA_HIDDEN = "aria-hidden";
-const TAB_INDEX = "tabindex";
-const DISABLED = "disabled";
-const ARIA_ORIENTATION = "aria-orientation";
-const ALL_ATTRIBUTES = [
-  ROLE,
-  ARIA_CONTROLS,
-  ARIA_CURRENT,
-  ARIA_LABEL,
-  ARIA_HIDDEN,
-  ARIA_ORIENTATION,
-  TAB_INDEX,
-  DISABLED
-];
-
 const SLIDE = "slide";
 const LOOP = "loop";
 const FADE = "fade";
@@ -786,7 +795,12 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   function mount() {
     if (!isClone) {
       slide.id = `${root.id}-slide${pad(index + 1)}`;
+      setAttribute(slide, ROLE, "group");
+      setAttribute(slide, ARIA_ROLEDESCRIPTION, "slide");
     }
+    listen();
+  }
+  function listen() {
     bind(slide, "click keydown", (e) => {
       emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, self, e);
     });
@@ -839,11 +853,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     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, hidden ? -1 : null);
-      });
-    }
+    setAttribute(focusableNodes || [], TAB_INDEX, hidden ? -1 : null);
     if (visible !== hasClass(slide, CLASS_VISIBLE)) {
       toggleClass(slide, CLASS_VISIBLE, visible);
       emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
@@ -1488,8 +1498,7 @@ function Arrows(Splide2, Components2, options) {
     if (prev && next) {
       if (!arrows.prev) {
         const { id } = Elements.track;
-        setAttribute(prev, ARIA_CONTROLS, id);
-        setAttribute(next, ARIA_CONTROLS, id);
+        setAttribute([prev, next], ARIA_CONTROLS, id);
         arrows.prev = prev;
         arrows.next = next;
         listen();
@@ -1502,8 +1511,7 @@ function Arrows(Splide2, Components2, options) {
     if (created) {
       remove(wrapper);
     } else {
-      removeAttribute(prev, ALL_ATTRIBUTES);
-      removeAttribute(next, ALL_ATTRIBUTES);
+      removeAttribute([prev, next], ALL_ATTRIBUTES);
     }
   }
   function listen() {
@@ -1941,9 +1949,6 @@ function Keyboard(Splide2, Components2, options) {
   }
   function destroy() {
     unbind(target, KEYBOARD_EVENT);
-    if (isHTMLElement(target)) {
-      removeAttribute(target, TAB_INDEX);
-    }
   }
   function disable(value) {
     disabled = value;
@@ -2873,6 +2878,7 @@ exports.CLASS_ROOT = CLASS_ROOT;
 exports.CLASS_SLIDE = CLASS_SLIDE;
 exports.CLASS_SLIDER = CLASS_SLIDER;
 exports.CLASS_SPINNER = CLASS_SPINNER;
+exports.CLASS_SR = CLASS_SR;
 exports.CLASS_TRACK = CLASS_TRACK;
 exports.CLASS_VISIBLE = CLASS_VISIBLE;
 exports.EVENT_ACTIVE = EVENT_ACTIVE;

dist/js/splide.esm.js

@@ -152,21 +152,23 @@ function merge(object, source) {
   return object;
 }
 
-function removeAttribute(elm, attrs) {
-  if (elm) {
+function removeAttribute(elms, attrs) {
+  forEach(elms, (elm) => {
     forEach(attrs, (attr) => {
-      elm.removeAttribute(attr);
+      elm && elm.removeAttribute(attr);
     });
-  }
+  });
 }
 
-function setAttribute(elm, attrs, value) {
+function setAttribute(elms, attrs, value) {
   if (isObject(attrs)) {
     forOwn(attrs, (value2, name) => {
-      setAttribute(elm, name, value2);
+      setAttribute(elms, name, value2);
     });
   } else {
-    isNull(value) ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));
+    forEach(elms, (elm) => {
+      isNull(value) ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));
+    });
   }
 }
 
@@ -627,6 +629,32 @@ function Direction(Splide2, Components2, options) {
   };
 }
 
+const ROLE = "role";
+const TAB_INDEX = "tabindex";
+const DISABLED = "disabled";
+const ARIA_PREFIX = "aria-";
+const ARIA_CONTROLS = `${ARIA_PREFIX}controls`;
+const ARIA_CURRENT = `${ARIA_PREFIX}current`;
+const ARIA_LABEL = `${ARIA_PREFIX}label`;
+const ARIA_HIDDEN = `${ARIA_PREFIX}hidden`;
+const ARIA_ORIENTATION = `${ARIA_PREFIX}orientation`;
+const ARIA_ROLEDESCRIPTION = `${ARIA_PREFIX}roledescription`;
+const ARIA_ATOMIC = `${ARIA_PREFIX}atomic`;
+const ARIA_LIVE = `${ARIA_PREFIX}live`;
+const ALL_ATTRIBUTES = [
+  ROLE,
+  TAB_INDEX,
+  DISABLED,
+  ARIA_CONTROLS,
+  ARIA_CURRENT,
+  ARIA_LABEL,
+  ARIA_HIDDEN,
+  ARIA_ORIENTATION,
+  ARIA_ROLEDESCRIPTION,
+  ARIA_ATOMIC,
+  ARIA_LIVE
+];
+
 const CLASS_ROOT = PROJECT_CODE;
 const CLASS_SLIDER = `${PROJECT_CODE}__slider`;
 const CLASS_TRACK = `${PROJECT_CODE}__track`;
@@ -646,6 +674,7 @@ const CLASS_AUTOPLAY = `${PROJECT_CODE}__autoplay`;
 const CLASS_PLAY = `${PROJECT_CODE}__play`;
 const CLASS_PAUSE = `${PROJECT_CODE}__pause`;
 const CLASS_SPINNER = `${PROJECT_CODE}__spinner`;
+const CLASS_SR = `${PROJECT_CODE}__sr`;
 const CLASS_INITIALIZED = "is-initialized";
 const CLASS_ACTIVE = "is-active";
 const CLASS_PREV = "is-prev";
@@ -676,7 +705,7 @@ function Elements(Splide2, Components2, options) {
   let list;
   function setup() {
     collect();
-    identify();
+    init();
     addClass(root, classes = getClasses());
   }
   function mount() {
@@ -684,11 +713,9 @@ function Elements(Splide2, Components2, options) {
     on(EVENT_UPDATED, update);
   }
   function destroy() {
-    [root, track, list].forEach((elm) => {
-      removeAttribute(elm, "style");
-    });
     empty(slides);
     removeClass(root, classes);
+    removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style"));
   }
   function refresh() {
     destroy();
@@ -721,11 +748,12 @@ function Elements(Splide2, Components2, options) {
       pause: query(autoplay, `.${CLASS_PAUSE}`)
     });
   }
-  function identify() {
+  function init() {
     const id = root.id || uniqueId(PROJECT_CODE);
     root.id = id;
     track.id = track.id || `${id}-track`;
     list.id = list.id || `${id}-list`;
+    setAttribute(root, ARIA_ROLEDESCRIPTION, "carousel");
   }
   function find(selector) {
     return child(root, selector) || child(slider, selector);
@@ -746,25 +774,6 @@ function Elements(Splide2, Components2, options) {
   });
 }
 
-const ROLE = "role";
-const ARIA_CONTROLS = "aria-controls";
-const ARIA_CURRENT = "aria-current";
-const ARIA_LABEL = "aria-label";
-const ARIA_HIDDEN = "aria-hidden";
-const TAB_INDEX = "tabindex";
-const DISABLED = "disabled";
-const ARIA_ORIENTATION = "aria-orientation";
-const ALL_ATTRIBUTES = [
-  ROLE,
-  ARIA_CONTROLS,
-  ARIA_CURRENT,
-  ARIA_LABEL,
-  ARIA_HIDDEN,
-  ARIA_ORIENTATION,
-  TAB_INDEX,
-  DISABLED
-];
-
 const SLIDE = "slide";
 const LOOP = "loop";
 const FADE = "fade";
@@ -782,7 +791,12 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   function mount() {
     if (!isClone) {
       slide.id = `${root.id}-slide${pad(index + 1)}`;
+      setAttribute(slide, ROLE, "group");
+      setAttribute(slide, ARIA_ROLEDESCRIPTION, "slide");
     }
+    listen();
+  }
+  function listen() {
     bind(slide, "click keydown", (e) => {
       emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, self, e);
     });
@@ -835,11 +849,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     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, hidden ? -1 : null);
-      });
-    }
+    setAttribute(focusableNodes || [], TAB_INDEX, hidden ? -1 : null);
     if (visible !== hasClass(slide, CLASS_VISIBLE)) {
       toggleClass(slide, CLASS_VISIBLE, visible);
       emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
@@ -1484,8 +1494,7 @@ function Arrows(Splide2, Components2, options) {
     if (prev && next) {
       if (!arrows.prev) {
         const { id } = Elements.track;
-        setAttribute(prev, ARIA_CONTROLS, id);
-        setAttribute(next, ARIA_CONTROLS, id);
+        setAttribute([prev, next], ARIA_CONTROLS, id);
         arrows.prev = prev;
         arrows.next = next;
         listen();
@@ -1498,8 +1507,7 @@ function Arrows(Splide2, Components2, options) {
     if (created) {
       remove(wrapper);
     } else {
-      removeAttribute(prev, ALL_ATTRIBUTES);
-      removeAttribute(next, ALL_ATTRIBUTES);
+      removeAttribute([prev, next], ALL_ATTRIBUTES);
     }
   }
   function listen() {
@@ -1937,9 +1945,6 @@ function Keyboard(Splide2, Components2, options) {
   }
   function destroy() {
     unbind(target, KEYBOARD_EVENT);
-    if (isHTMLElement(target)) {
-      removeAttribute(target, TAB_INDEX);
-    }
   }
   function disable(value) {
     disabled = value;
@@ -2845,4 +2850,4 @@ class SplideRenderer {
   }
 }
 
-export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SLIDER, CLASS_SPINNER, CLASS_TRACK, CLASS_VISIBLE, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBus, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };
+export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SLIDER, CLASS_SPINNER, CLASS_SR, CLASS_TRACK, CLASS_VISIBLE, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBus, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };

dist/js/splide.js

@@ -172,21 +172,23 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     return object;
   }
 
-  function removeAttribute(elm, attrs) {
-    if (elm) {
+  function removeAttribute(elms, attrs) {
+    forEach(elms, function (elm) {
       forEach(attrs, function (attr) {
-        elm.removeAttribute(attr);
+        elm && elm.removeAttribute(attr);
       });
-    }
+    });
   }
 
-  function setAttribute(elm, attrs, value) {
+  function setAttribute(elms, attrs, value) {
     if (isObject(attrs)) {
       forOwn(attrs, function (value2, name) {
-        setAttribute(elm, name, value2);
+        setAttribute(elms, name, value2);
       });
     } else {
-      isNull(value) ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));
+      forEach(elms, function (elm) {
+        isNull(value) ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));
+      });
     }
   }
 
@@ -721,6 +723,19 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     };
   }
 
+  var ROLE = "role";
+  var TAB_INDEX = "tabindex";
+  var DISABLED = "disabled";
+  var ARIA_PREFIX = "aria-";
+  var ARIA_CONTROLS = ARIA_PREFIX + "controls";
+  var ARIA_CURRENT = ARIA_PREFIX + "current";
+  var ARIA_LABEL = ARIA_PREFIX + "label";
+  var ARIA_HIDDEN = ARIA_PREFIX + "hidden";
+  var ARIA_ORIENTATION = ARIA_PREFIX + "orientation";
+  var ARIA_ROLEDESCRIPTION = ARIA_PREFIX + "roledescription";
+  var ARIA_ATOMIC = ARIA_PREFIX + "atomic";
+  var ARIA_LIVE = ARIA_PREFIX + "live";
+  var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION, ARIA_ATOMIC, ARIA_LIVE];
   var CLASS_ROOT = PROJECT_CODE;
   var CLASS_SLIDER = PROJECT_CODE + "__slider";
   var CLASS_TRACK = PROJECT_CODE + "__track";
@@ -773,7 +788,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function setup() {
       collect();
-      identify();
+      init();
       addClass(root, classes = getClasses());
     }
 
@@ -783,11 +798,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function destroy() {
-      [root, track, list].forEach(function (elm) {
-        removeAttribute(elm, "style");
-      });
       empty(slides);
       removeClass(root, classes);
+      removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style"));
     }
 
     function refresh() {
@@ -824,11 +837,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       });
     }
 
-    function identify() {
+    function init() {
       var id = root.id || uniqueId(PROJECT_CODE);
       root.id = id;
       track.id = track.id || id + "-track";
       list.id = list.id || id + "-list";
+      setAttribute(root, ARIA_ROLEDESCRIPTION, "carousel");
     }
 
     function find(selector) {
@@ -846,15 +860,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     });
   }
 
-  var ROLE = "role";
-  var ARIA_CONTROLS = "aria-controls";
-  var ARIA_CURRENT = "aria-current";
-  var ARIA_LABEL = "aria-label";
-  var ARIA_HIDDEN = "aria-hidden";
-  var TAB_INDEX = "tabindex";
-  var DISABLED = "disabled";
-  var ARIA_ORIENTATION = "aria-orientation";
-  var ALL_ATTRIBUTES = [ROLE, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, TAB_INDEX, DISABLED];
   var SLIDE = "slide";
   var LOOP = "loop";
   var FADE = "fade";
@@ -881,8 +886,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function mount() {
       if (!isClone) {
         slide.id = root.id + "-slide" + pad(index + 1);
+        setAttribute(slide, ROLE, "group");
+        setAttribute(slide, ARIA_ROLEDESCRIPTION, "slide");
       }
 
+      listen();
+    }
+
+    function listen() {
       bind(slide, "click keydown", function (e) {
         emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, self, e);
       });
@@ -946,12 +957,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       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, hidden ? -1 : null);
-        });
-      }
+      setAttribute(focusableNodes || [], TAB_INDEX, hidden ? -1 : null);
 
       if (visible !== hasClass(slide, CLASS_VISIBLE)) {
         toggleClass(slide, CLASS_VISIBLE, visible);
@@ -1773,8 +1779,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       if (prev && next) {
         if (!arrows.prev) {
           var id = Elements.track.id;
-          setAttribute(prev, ARIA_CONTROLS, id);
-          setAttribute(next, ARIA_CONTROLS, id);
+          setAttribute([prev, next], ARIA_CONTROLS, id);
           arrows.prev = prev;
           arrows.next = next;
           listen();
@@ -1789,8 +1794,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       if (created) {
         remove(wrapper);
       } else {
-        removeAttribute(prev, ALL_ATTRIBUTES);
-        removeAttribute(next, ALL_ATTRIBUTES);
+        removeAttribute([prev, next], ALL_ATTRIBUTES);
       }
     }
 
@@ -2337,10 +2341,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function destroy() {
       unbind(target, KEYBOARD_EVENT);
-
-      if (isHTMLElement(target)) {
-        removeAttribute(target, TAB_INDEX);
-      }
     }
 
     function disable(value) {

dist/types/index.d.ts

@@ -1491,6 +1491,7 @@ declare const CLASS_AUTOPLAY: string;
 declare const CLASS_PLAY: string;
 declare const CLASS_PAUSE: string;
 declare const CLASS_SPINNER: string;
+declare const CLASS_SR: string;
 declare const CLASS_INITIALIZED = "is-initialized";
 declare const CLASS_ACTIVE = "is-active";
 declare const CLASS_PREV = "is-prev";
@@ -1520,4 +1521,4 @@ declare const CLASSES: {
     spinner: string;
 };
 
-export { AnyFunction, ArrowsComponent, AutoplayComponent, BaseComponent, CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SLIDER, CLASS_SPINNER, CLASS_TRACK, CLASS_VISIBLE, ClonesComponent, ComponentConstructor, Components, ControllerComponent, CoverComponent, DirectionComponent, DragComponent, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, ElementsComponent, EventBus, EventBusCallback, EventBusObject, EventHandler, EventInterface, EventInterfaceObject, EventMap, KeyboardComponent, LayoutComponent, LazyLoadComponent, MoveComponent, Options, OptionsComponent, PaginationComponent, PaginationData, PaginationItem, RequestInterval, RequestIntervalInterface, ResponsiveOptions, STATUS_CLASSES, ScrollComponent, SlideComponent, SlidesComponent, Splide, SplideRenderer, State, StateObject, SyncComponent, SyncTarget, Throttle, ThrottleInstance, TransitionComponent, WheelComponent, Splide as default };
+export { AnyFunction, ArrowsComponent, AutoplayComponent, BaseComponent, CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SLIDER, CLASS_SPINNER, CLASS_SR, CLASS_TRACK, CLASS_VISIBLE, ClonesComponent, ComponentConstructor, Components, ControllerComponent, CoverComponent, DirectionComponent, DragComponent, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, ElementsComponent, EventBus, EventBusCallback, EventBusObject, EventHandler, EventInterface, EventInterfaceObject, EventMap, KeyboardComponent, LayoutComponent, LazyLoadComponent, MoveComponent, Options, OptionsComponent, PaginationComponent, PaginationData, PaginationItem, RequestInterval, RequestIntervalInterface, ResponsiveOptions, STATUS_CLASSES, ScrollComponent, SlideComponent, SlidesComponent, Splide, SplideRenderer, State, StateObject, SyncComponent, SyncTarget, Throttle, ThrottleInstance, TransitionComponent, WheelComponent, Splide as default };

src/js/components/Arrows/Arrows.ts

@@ -87,8 +87,7 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
       if ( ! arrows.prev ) {
         const { id } = Elements.track;
 
-        setAttribute( prev, ARIA_CONTROLS, id );
-        setAttribute( next, ARIA_CONTROLS, id );
+        setAttribute( [ prev, next ], ARIA_CONTROLS, id );
 
         arrows.prev = prev;
         arrows.next = next;
@@ -109,8 +108,7 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
     if ( created ) {
       remove( wrapper );
     } else {
-      removeAttribute( prev, ALL_ATTRIBUTES );
-      removeAttribute( next, ALL_ATTRIBUTES );
+      removeAttribute( [ prev, next ], ALL_ATTRIBUTES );
     }
   }
 

src/js/components/Elements/Elements.ts

@@ -1,3 +1,4 @@
+import { ALL_ATTRIBUTES, ARIA_ROLEDESCRIPTION } from '../../constants/attributes';
 import {
   CLASS_ACTIVE,
   CLASS_ARROW_NEXT,
@@ -32,6 +33,7 @@ import {
   query,
   removeAttribute,
   removeClass,
+  setAttribute,
   uniqueId,
 } from '../../utils';
 
@@ -110,7 +112,7 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
    */
   function setup(): void {
     collect();
-    identify();
+    init();
     addClass( root, ( classes = getClasses() ) );
   }
 
@@ -126,12 +128,9 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
    * Destroys the component.
    */
   function destroy(): void {
-    [ root, track, list ].forEach( elm => {
-      removeAttribute( elm, 'style' );
-    } );
-
     empty( slides );
     removeClass( root, classes );
+    removeAttribute( [ root, track, list ], ALL_ATTRIBUTES.concat( 'style' ) );
   }
 
   /**
@@ -182,13 +181,15 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
   }
 
   /**
-   * Assigns unique IDs to essential elements.
+   * Initializes essential elements.
    */
-  function identify(): void {
+  function init(): void {
     const id = root.id || uniqueId( PROJECT_CODE );
     root.id  = id;
     track.id = track.id || `${ id }-track`;
     list.id  = list.id || `${ id }-list`;
+
+    setAttribute( root, ARIA_ROLEDESCRIPTION, 'carousel' );
   }
 
   /**

src/js/components/Elements/test/attributes.test.ts

@@ -0,0 +1,26 @@
+import { ARIA_ROLEDESCRIPTION, TAB_INDEX } from '../../../constants/attributes';
+import { init } from '../../../test';
+
+
+describe( 'Elements', () => {
+  test( 'can assign aria attributes.', () => {
+    const splide = init();
+
+    expect( splide.root.getAttribute( ARIA_ROLEDESCRIPTION ) ).toBe( 'carousel' );
+  } );
+
+  test( 'can remove assigned attributes.', () => {
+    const splide = init( { keyboard: 'focused' } );
+    const { root, track, list } = splide.Components.Elements;
+
+    expect( root.getAttribute( TAB_INDEX ) ).not.toBeNull();
+
+    splide.destroy();
+
+    expect( root.getAttribute( ARIA_ROLEDESCRIPTION ) ).toBeNull();
+    expect( root.getAttribute( TAB_INDEX ) ).toBeNull();
+
+    expect( track.getAttribute( 'style' ) ).toBeNull();
+    expect( list.getAttribute( 'style' ) ).toBeNull();
+  } );
+} );

src/js/components/Keyboard/Keyboard.ts

@@ -1,9 +1,9 @@
 import { TAB_INDEX } from '../../constants/attributes';
-import { EVENT_UPDATED, EVENT_MOVE } from '../../constants/events';
+import { EVENT_MOVE, EVENT_UPDATED } from '../../constants/events';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { includes, isHTMLElement, nextTick, removeAttribute, setAttribute } from '../../utils';
+import { includes, nextTick, setAttribute } from '../../utils';
 
 
 /**
@@ -87,10 +87,6 @@ export function Keyboard( Splide: Splide, Components: Components, options: Optio
    */
   function destroy(): void {
     unbind( target, KEYBOARD_EVENT );
-
-    if ( isHTMLElement( target ) ) {
-      removeAttribute( target, TAB_INDEX );
-    }
   }
 
   /**

src/js/components/Slides/Slide.ts

@@ -3,7 +3,7 @@ import {
   ARIA_CONTROLS,
   ARIA_CURRENT,
   ARIA_HIDDEN,
-  ARIA_LABEL,
+  ARIA_LABEL, ARIA_ROLEDESCRIPTION,
   ROLE,
   TAB_INDEX,
 } from '../../constants/attributes';
@@ -103,8 +103,17 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
   function mount( this: SlideComponent ): void {
     if ( ! isClone ) {
       slide.id = `${ root.id }-slide${ pad( index + 1 ) }`;
+      setAttribute( slide, ROLE, 'group' );
+      setAttribute( slide, ARIA_ROLEDESCRIPTION, 'slide' );
     }
 
+    listen();
+  }
+
+  /**
+   * Listens to some events.
+   */
+  function listen(): void {
     bind( slide, 'click keydown', e => {
       emit( e.type === 'click' ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, self, e );
     } );
@@ -194,12 +203,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
 
     setAttribute( slide, ARIA_HIDDEN, hidden || null );
     setAttribute( slide, TAB_INDEX, ! hidden && options.slideFocus ? 0 : null );
-
-    if ( focusableNodes ) {
-      focusableNodes.forEach( node => {
-        setAttribute( node, TAB_INDEX, hidden ? -1 : null );
-      } );
-    }
+    setAttribute( focusableNodes || [], TAB_INDEX, hidden ? -1 : null );
 
     if ( visible !== hasClass( slide, CLASS_VISIBLE ) ) {
       toggleClass( slide, CLASS_VISIBLE, visible );

src/js/constants/attributes.ts

@@ -1,11 +1,16 @@
-export const ROLE             = 'role';
-export const ARIA_CONTROLS    = 'aria-controls';
-export const ARIA_CURRENT     = 'aria-current';
-export const ARIA_LABEL       = 'aria-label';
-export const ARIA_HIDDEN      = 'aria-hidden';
-export const TAB_INDEX        = 'tabindex';
-export const DISABLED         = 'disabled';
-export const ARIA_ORIENTATION = 'aria-orientation';
+export const ROLE      = 'role';
+export const TAB_INDEX = 'tabindex';
+export const DISABLED  = 'disabled';
+
+export const ARIA_PREFIX          = 'aria-';
+export const ARIA_CONTROLS        = `${ ARIA_PREFIX }controls`;
+export const ARIA_CURRENT         = `${ ARIA_PREFIX }current`;
+export const ARIA_LABEL           = `${ ARIA_PREFIX }label`;
+export const ARIA_HIDDEN          = `${ ARIA_PREFIX }hidden`;
+export const ARIA_ORIENTATION     = `${ ARIA_PREFIX }orientation`;
+export const ARIA_ROLEDESCRIPTION = `${ ARIA_PREFIX }roledescription`;
+export const ARIA_ATOMIC          = `${ ARIA_PREFIX }atomic`;
+export const ARIA_LIVE            = `${ ARIA_PREFIX }live`;
 
 /**
  * The array with all attributes.
@@ -14,11 +19,14 @@ export const ARIA_ORIENTATION = 'aria-orientation';
  */
 export const ALL_ATTRIBUTES = [
   ROLE,
+  TAB_INDEX,
+  DISABLED,
   ARIA_CONTROLS,
   ARIA_CURRENT,
   ARIA_LABEL,
   ARIA_HIDDEN,
   ARIA_ORIENTATION,
-  TAB_INDEX,
-  DISABLED,
+  ARIA_ROLEDESCRIPTION,
+  ARIA_ATOMIC,
+  ARIA_LIVE,
 ];

src/js/constants/classes.ts

@@ -20,6 +20,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';

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

@@ -2,32 +2,51 @@ import { removeAttribute } from './removeAttribute';
 
 
 describe( 'removeAttribute', () => {
-  beforeEach( () => {
-    document.body.innerHTML = '<div id="container"></div>';
-  } );
-
   test( 'can remove an attribute from an element.', () => {
-    const container = document.getElementById( 'container' );
+    const div = document.createElement( 'div' );
 
-    container.setAttribute( 'aria-hidden', 'true' );
-    container.setAttribute( 'tabindex', '-1' );
+    div.setAttribute( 'aria-hidden', 'true' );
+    div.setAttribute( 'tabindex', '-1' );
 
-    removeAttribute( container, 'aria-hidden' );
-    expect( container.getAttribute( 'aria-hidden' ) ).toBeNull();
-    expect( container.getAttribute( 'tabindex' ) ).not.toBeNull();
+    removeAttribute( div, 'aria-hidden' );
+    expect( div.getAttribute( 'aria-hidden' ) ).toBeNull();
+    expect( div.getAttribute( 'tabindex' ) ).not.toBeNull();
 
-    removeAttribute( container, 'tabindex' );
-    expect( container.getAttribute( 'tabindex' ) ).toBeNull();
+    removeAttribute( div, 'tabindex' );
+    expect( div.getAttribute( 'tabindex' ) ).toBeNull();
   } );
 
   test( 'can remove attributes from an element.', () => {
-    const container = document.getElementById( 'container' );
+    const div = document.createElement( 'div' );
+
+    div.setAttribute( 'aria-hidden', 'true' );
+    div.setAttribute( 'tabindex', '-1' );
+
+    removeAttribute( div, [ 'aria-hidden', 'tabindex' ] );
+    expect( div.getAttribute( 'aria-hidden' ) ).toBeNull();
+    expect( div.getAttribute( 'tabindex' ) ).toBeNull();
+  } );
+
+  test( 'can remove attributes from elements.', () => {
+    const div1     = document.createElement( 'div1' );
+    const div2     = document.createElement( 'div2' );
+    const div3     = document.createElement( 'div2' );
+    const divs     = [ div1, div2, div3 ];
+    const callback = jest.fn();
+
+    divs.forEach( div => {
+      div.setAttribute( 'aria-hidden', 'true' );
+      div.setAttribute( 'tabindex', '-1' );
+    } );
+
+    removeAttribute( divs, [ 'aria-hidden', 'tabindex' ] );
 
-    container.setAttribute( 'aria-hidden', 'true' );
-    container.setAttribute( 'tabindex', '-1' );
+    divs.forEach( div => {
+      expect( div.getAttribute( 'aria-hidden' ) ).toBeNull();
+      expect( div.getAttribute( 'tabindex' ) ).toBeNull();
+      callback();
+    } );
 
-    removeAttribute( container, [ 'aria-hidden', 'tabindex' ] );
-    expect( container.getAttribute( 'aria-hidden' ) ).toBeNull();
-    expect( container.getAttribute( 'tabindex' ) ).toBeNull();
+    expect( callback ).toHaveBeenCalledTimes( divs.length );
   } );
 } );

src/js/utils/dom/removeAttribute/removeAttribute.ts

@@ -4,13 +4,13 @@ import { forEach } from '../../array';
 /**
  * Removes attributes from the element.
  *
- * @param elm   - An element.
+ * @param elms  - An element or elements.
  * @param attrs - An attribute or attributes to remove.
  */
-export function removeAttribute( elm: Element, attrs: string | string[] ): void {
-  if ( elm ) {
+export function removeAttribute( elms: Element | Element[], attrs: string | string[] ): void {
+  forEach( elms, elm => {
     forEach( attrs, attr => {
-      elm.removeAttribute( attr );
+      elm && elm.removeAttribute( attr );
     } );
-  }
+  } );
 }

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

@@ -3,31 +3,50 @@ import { setAttribute } from './setAttribute';
 
 describe( 'setAttribute', () => {
   beforeEach( () => {
-    document.body.innerHTML = '<div id="container"></div>';
+    document.body.innerHTML = '<div id="div"></div>';
   } );
 
   test( 'can set an attribute to an element.', () => {
-    const container = document.getElementById( 'container' );
+    const div = document.createElement( 'div' );
 
-    setAttribute( container, 'id', 'newId' );
-    expect( container.id ).toBe( 'newId' );
+    setAttribute( div, 'id', 'newId' );
+    expect( div.id ).toBe( 'newId' );
 
-    setAttribute( container, 'aria-hidden', true );
-    expect( container.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
+    setAttribute( div, 'aria-hidden', true );
+    expect( div.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
 
-    setAttribute( container, 'tabindex', -1 );
-    expect( container.getAttribute( 'tabindex' ) ).toBe( '-1' );
+    setAttribute( div, 'tabindex', -1 );
+    expect( div.getAttribute( 'tabindex' ) ).toBe( '-1' );
+  } );
+
+  test( 'can set an attribute to elements.', () => {
+    const div1     = document.createElement( 'div' );
+    const div2     = document.createElement( 'div' );
+    const div3     = document.createElement( 'div' );
+    const divs     = [ div1, div2, div3 ];
+    const callback = jest.fn();
+
+    setAttribute( divs, 'aria-hidden', true );
+    setAttribute( divs, 'tabindex', -1 );
+
+    divs.forEach( div => {
+      expect( div.getAttribute( 'aria-hidden' ) ).toBe( 'true' );
+      expect( div.getAttribute( 'tabindex' ) ).toBe( '-1' );
+      callback();
+    } );
+
+    expect( callback ).toHaveBeenCalledTimes( divs.length );
   } );
 
   test( 'can set attributes by an object.', () => {
-    const container = document.getElementById( 'container' );
+    const div = document.createElement( 'div' );
 
-    setAttribute( container, {
+    setAttribute( div, {
       'aria-role'      : 'presentation',
       'contenteditable': true,
     } );
 
-    expect( container.getAttribute( 'aria-role' ) ).toBe( 'presentation' );
-    expect( container.getAttribute( 'contenteditable' ) ).toBe( 'true' );
+    expect( div.getAttribute( 'aria-role' ) ).toBe( 'presentation' );
+    expect( div.getAttribute( 'contenteditable' ) ).toBe( 'true' );
   } );
 } );

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

@@ -1,21 +1,24 @@
+import { forEach } from '../../array';
 import { forOwn } from '../../object';
 import { isNull, isObject } from '../../type/type';
 import { removeAttribute } from '../removeAttribute/removeAttribute';
 
 
-export function setAttribute( elm: Element, attr: string, value: string | number | boolean ): void;
-export function setAttribute( elm: Element, attrs: Record<string, string | number | boolean> ): void;
+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;
 
 export function setAttribute(
-  elm: Element,
+  elms: Element | Element[],
   attrs: string | Record<string, string | number | boolean>,
   value?: string | number | boolean
 ): void {
   if ( isObject( attrs ) ) {
     forOwn( attrs, ( value, name ) => {
-      setAttribute( elm, name, value );
+      setAttribute( elms, name, value );
     } );
   } else {
-    isNull( value ) ? removeAttribute( elm, attrs ) : elm.setAttribute( attrs, String( value ) );
+    forEach( elms, elm => {
+      isNull( value ) ? removeAttribute( elm, attrs ) : elm.setAttribute( attrs, String( value ) );
+    } );
   }
 }