Use the `focus-in` custom class instead of `:focus-visible` to display a focus ring.

dist/js/splide.cjs.js

@@ -379,7 +379,7 @@ function EventBinder() {
       });
     } else {
       e = document.createEvent("CustomEvent");
-      e.initEvent(type, bubbles, false);
+      e.initCustomEvent(type, bubbles, false, detail);
     }
 
     target.dispatchEvent(e);
@@ -711,8 +711,8 @@ var CLASS_PREV = "is-prev";
 var CLASS_NEXT = "is-next";
 var CLASS_VISIBLE = "is-visible";
 var CLASS_LOADING = "is-loading";
-var CLASS_FOCUS_VISIBLE = "has-focus-visible";
-var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_VISIBLE];
+var CLASS_FOCUS_IN = "is-focus-in";
+var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_IN];
 var CLASSES = {
   slide: CLASS_SLIDE,
   clone: CLASS_CLONE,
@@ -782,7 +782,7 @@ function Elements(Splide2, Components2, options) {
       capture: true
     });
     bind(root, "focusin", function () {
-      toggleClass(root, CLASS_FOCUS_VISIBLE, !!isUsingKey);
+      toggleClass(root, CLASS_FOCUS_IN, !!isUsingKey);
     });
   }
 
@@ -887,10 +887,9 @@ function Slide$1(Splide2, index, slideIndex, slide) {
 
   function mount() {
     if (!isClone) {
-      var noDescription = pagination || options.slideFocus || isNavigation;
       slide.id = root.id + "-slide" + pad(index + 1);
       setAttribute(slide, ROLE, pagination ? "tabpanel" : "group");
-      setAttribute(slide, ARIA_ROLEDESCRIPTION, noDescription ? "" : i18n.slide);
+      setAttribute(slide, ARIA_ROLEDESCRIPTION, i18n.slide);
       setAttribute(slide, ARIA_LABEL, label || format(i18n.slideLabel, [index + 1, Splide2.length]));
     }
 
@@ -925,6 +924,7 @@ 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" : "");
+    slideFocus && removeAttribute(slide, ARIA_ROLEDESCRIPTION);
   }
 
   function onMove() {
@@ -1829,7 +1829,7 @@ function Arrows(Splide2, Components2, options) {
   }
 
   function createArrow(prev2) {
-    var arrow = "<button class=\"" + classes.arrow + " " + (prev2 ? classes.prev : classes.next) + "\" type=\"button\"><svg xmlns=\"" + XML_NAME_SPACE + "\" viewBox=\"0 0 " + SIZE + " " + SIZE + "\" width=\"" + SIZE + "\" height=\"" + SIZE + "\"><path d=\"" + (options.arrowPath || PATH) + "\" />";
+    var arrow = "<button class=\"" + classes.arrow + " " + (prev2 ? classes.prev : classes.next) + "\" type=\"button\"><svg xmlns=\"" + XML_NAME_SPACE + "\" viewBox=\"0 0 " + SIZE + " " + SIZE + "\" width=\"" + SIZE + "\" height=\"" + SIZE + "\" focusable=\"false\"><path d=\"" + (options.arrowPath || PATH) + "\" />";
     return parseHtml(arrow);
   }
 
@@ -2626,7 +2626,8 @@ function Sync(Splide2, Components2, options) {
   var events = [];
 
   function setup() {
-    options.slideFocus = isNavigation && isUndefined(options.slideFocus);
+    var slideFocus = options.slideFocus;
+    options.slideFocus = isUndefined(slideFocus) ? isNavigation : slideFocus;
   }
 
   function mount() {
@@ -3629,7 +3630,7 @@ exports.CLASS_ARROW_NEXT = CLASS_ARROW_NEXT;
 exports.CLASS_ARROW_PREV = CLASS_ARROW_PREV;
 exports.CLASS_CLONE = CLASS_CLONE;
 exports.CLASS_CONTAINER = CLASS_CONTAINER;
-exports.CLASS_FOCUS_VISIBLE = CLASS_FOCUS_VISIBLE;
+exports.CLASS_FOCUS_IN = CLASS_FOCUS_IN;
 exports.CLASS_INITIALIZED = CLASS_INITIALIZED;
 exports.CLASS_LIST = CLASS_LIST;
 exports.CLASS_LOADING = CLASS_LOADING;

dist/js/splide.esm.js

@@ -374,7 +374,7 @@ function EventBinder() {
       });
     } else {
       e = document.createEvent("CustomEvent");
-      e.initEvent(type, bubbles, false);
+      e.initCustomEvent(type, bubbles, false, detail);
     }
 
     target.dispatchEvent(e);
@@ -706,8 +706,8 @@ var CLASS_PREV = "is-prev";
 var CLASS_NEXT = "is-next";
 var CLASS_VISIBLE = "is-visible";
 var CLASS_LOADING = "is-loading";
-var CLASS_FOCUS_VISIBLE = "has-focus-visible";
-var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_VISIBLE];
+var CLASS_FOCUS_IN = "is-focus-in";
+var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_IN];
 var CLASSES = {
   slide: CLASS_SLIDE,
   clone: CLASS_CLONE,
@@ -777,7 +777,7 @@ function Elements(Splide2, Components2, options) {
       capture: true
     });
     bind(root, "focusin", function () {
-      toggleClass(root, CLASS_FOCUS_VISIBLE, !!isUsingKey);
+      toggleClass(root, CLASS_FOCUS_IN, !!isUsingKey);
     });
   }
 
@@ -882,10 +882,9 @@ function Slide$1(Splide2, index, slideIndex, slide) {
 
   function mount() {
     if (!isClone) {
-      var noDescription = pagination || options.slideFocus || isNavigation;
       slide.id = root.id + "-slide" + pad(index + 1);
       setAttribute(slide, ROLE, pagination ? "tabpanel" : "group");
-      setAttribute(slide, ARIA_ROLEDESCRIPTION, noDescription ? "" : i18n.slide);
+      setAttribute(slide, ARIA_ROLEDESCRIPTION, i18n.slide);
       setAttribute(slide, ARIA_LABEL, label || format(i18n.slideLabel, [index + 1, Splide2.length]));
     }
 
@@ -920,6 +919,7 @@ 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" : "");
+    slideFocus && removeAttribute(slide, ARIA_ROLEDESCRIPTION);
   }
 
   function onMove() {
@@ -1824,7 +1824,7 @@ function Arrows(Splide2, Components2, options) {
   }
 
   function createArrow(prev2) {
-    var arrow = "<button class=\"" + classes.arrow + " " + (prev2 ? classes.prev : classes.next) + "\" type=\"button\"><svg xmlns=\"" + XML_NAME_SPACE + "\" viewBox=\"0 0 " + SIZE + " " + SIZE + "\" width=\"" + SIZE + "\" height=\"" + SIZE + "\"><path d=\"" + (options.arrowPath || PATH) + "\" />";
+    var arrow = "<button class=\"" + classes.arrow + " " + (prev2 ? classes.prev : classes.next) + "\" type=\"button\"><svg xmlns=\"" + XML_NAME_SPACE + "\" viewBox=\"0 0 " + SIZE + " " + SIZE + "\" width=\"" + SIZE + "\" height=\"" + SIZE + "\" focusable=\"false\"><path d=\"" + (options.arrowPath || PATH) + "\" />";
     return parseHtml(arrow);
   }
 
@@ -2621,7 +2621,8 @@ function Sync(Splide2, Components2, options) {
   var events = [];
 
   function setup() {
-    options.slideFocus = isNavigation && isUndefined(options.slideFocus);
+    var slideFocus = options.slideFocus;
+    options.slideFocus = isUndefined(slideFocus) ? isNavigation : slideFocus;
   }
 
   function mount() {
@@ -3616,4 +3617,4 @@ var SplideRenderer = /*#__PURE__*/function () {
   return SplideRenderer;
 }();
 
-export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_FOCUS_VISIBLE, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, 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_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBinder, 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_CLONE, CLASS_CONTAINER, CLASS_FOCUS_IN, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, 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_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBinder, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };

dist/js/splide.js

@@ -375,7 +375,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         });
       } else {
         e = document.createEvent("CustomEvent");
-        e.initEvent(type, bubbles, false);
+        e.initCustomEvent(type, bubbles, false, detail);
       }
 
       target.dispatchEvent(e);
@@ -705,8 +705,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var CLASS_NEXT = "is-next";
   var CLASS_VISIBLE = "is-visible";
   var CLASS_LOADING = "is-loading";
-  var CLASS_FOCUS_VISIBLE = "has-focus-visible";
-  var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_VISIBLE];
+  var CLASS_FOCUS_IN = "is-focus-in";
+  var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_IN];
   var CLASSES = {
     slide: CLASS_SLIDE,
     clone: CLASS_CLONE,
@@ -776,7 +776,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         capture: true
       });
       bind(root, "focusin", function () {
-        toggleClass(root, CLASS_FOCUS_VISIBLE, !!isUsingKey);
+        toggleClass(root, CLASS_FOCUS_IN, !!isUsingKey);
       });
     }
 
@@ -1823,7 +1823,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function createArrow(prev2) {
-      var arrow = "<button class=\"" + classes.arrow + " " + (prev2 ? classes.prev : classes.next) + "\" type=\"button\"><svg xmlns=\"" + XML_NAME_SPACE + "\" viewBox=\"0 0 " + SIZE + " " + SIZE + "\" width=\"" + SIZE + "\" height=\"" + SIZE + "\"><path d=\"" + (options.arrowPath || PATH) + "\" />";
+      var arrow = "<button class=\"" + classes.arrow + " " + (prev2 ? classes.prev : classes.next) + "\" type=\"button\"><svg xmlns=\"" + XML_NAME_SPACE + "\" viewBox=\"0 0 " + SIZE + " " + SIZE + "\" width=\"" + SIZE + "\" height=\"" + SIZE + "\" focusable=\"false\"><path d=\"" + (options.arrowPath || PATH) + "\" />";
       return parseHtml(arrow);
     }
 

dist/types/index.d.ts

@@ -1599,7 +1599,7 @@ declare const CLASS_PREV = "is-prev";
 declare const CLASS_NEXT = "is-next";
 declare const CLASS_VISIBLE = "is-visible";
 declare const CLASS_LOADING = "is-loading";
-declare const CLASS_FOCUS_VISIBLE = "has-focus-visible";
+declare const CLASS_FOCUS_IN = "is-focus-in";
 /**
  * The array with all status classes.
  *
@@ -1623,4 +1623,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_CLONE, CLASS_CONTAINER, CLASS_FOCUS_VISIBLE, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, CLASS_TRACK, CLASS_VISIBLE, Cast, 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_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, ElementsComponent, EventBinder, EventBinderObject, EventInterface, EventInterfaceObject, EventMap, Head, KeyboardComponent, LayoutComponent, LazyLoadComponent, LiveComponent, MediaComponent, MoveComponent, Options, PaginationComponent, PaginationData, PaginationItem, Push, RequestInterval, RequestIntervalInterface, Resolve, ResponsiveOptions, STATUS_CLASSES, ScrollComponent, Shift, ShiftN, 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_CLONE, CLASS_CONTAINER, CLASS_FOCUS_IN, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, CLASS_TRACK, CLASS_VISIBLE, Cast, 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_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, ElementsComponent, EventBinder, EventBinderObject, EventInterface, EventInterfaceObject, EventMap, Head, KeyboardComponent, LayoutComponent, LazyLoadComponent, LiveComponent, MediaComponent, MoveComponent, Options, PaginationComponent, PaginationData, PaginationItem, Push, RequestInterval, RequestIntervalInterface, Resolve, ResponsiveOptions, STATUS_CLASSES, ScrollComponent, Shift, ShiftN, SlideComponent, SlidesComponent, Splide, SplideRenderer, State, StateObject, SyncComponent, SyncTarget, Throttle, ThrottleInstance, TransitionComponent, WheelComponent, Splide as default };

src/css/template/default/foundation/mixins.scss

@@ -10,15 +10,14 @@ $outline-offset-inset: -3px !default;
   }
 }
 
-@mixin focus-outline {
+@mixin focus-outline( $offset: $outline-offset ) {
   outline: $outline;
-  outline-offset: $outline-offset;
+  outline-offset: $offset;
 }
 
 @mixin focus-outline-inset {
   @supports ( outline-offset: $outline-offset-inset ) {
-    @include focus-outline;
-    outline-offset: $outline-offset-inset;
+    @include focus-outline( $outline-offset-inset );
   }
 
   /* IE does not support outline-offset */

src/css/template/default/object/objects/arrow.scss

@@ -19,6 +19,8 @@ $left: 1em !default;
 $right: 1em !default;
 
 .splide {
+  $root: &;
+
   &__arrow {
     background: $button-background;
     border: $button-border;
@@ -72,10 +74,6 @@ $right: 1em !default;
       }
     }
 
-    &:focus-visible {
-      @include mixins.focus-outline;
-    }
-
     &:disabled {
       @if $opacity-disabled {
         opacity: $opacity-disabled;
@@ -94,4 +92,10 @@ $right: 1em !default;
       right: $right;
     }
   }
+
+  &.is-focus-in {
+    #{ $root }__arrow:focus {
+      @include mixins.focus-outline;
+    }
+  }
 }

src/css/template/default/object/objects/pagination.scss

@@ -17,6 +17,8 @@ $dot-transition: transform .2s linear !default;
 $dot-transform-active: scale( 1.4 ) !default;
 
 .splide {
+  $root: &;
+
   &__pagination {
     bottom: $bottom;
     left: 0;
@@ -61,8 +63,12 @@ $dot-transform-active: scale( 1.4 ) !default;
           background: $dot-background-hover;
         }
       }
+    }
+  }
 
-      &:focus-visible {
+  &.is-focus-in {
+    #{ $root }__pagination {
+      &__page:focus {
         @include mixins.focus-outline;
       }
     }

src/css/template/default/object/objects/slide.scss

@@ -14,16 +14,13 @@ $outline-offset: -2px !default;
       border-radius: $border-radius;
     }
 
+    // Gets rid of a focus ring in IE and Safari
     &:focus {
       outline: 0;
     }
-
-    &:focus-visible {
-      @include mixins.focus-outline-inset;
-    }
   }
 
-  &.has-focus-visible {
+  &.is-focus-in {
     #{ $root }__slide:focus {
       @include mixins.focus-outline-inset;
     }

src/css/template/default/object/objects/toggle.scss

@@ -1,10 +1,14 @@
 @use '../../foundation/mixins';
 
 .splide {
+  $root: &;
+
   &__toggle {
     cursor: pointer;
+  }
 
-    &:focus-visible {
+  &.is-focus-in {
+    #{ $root }__toggle:focus {
       @include mixins.focus-outline;
     }
   }

src/js/components/Arrows/Arrows.ts

@@ -173,6 +173,7 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
 
   /**
    * Creates an arrow button.
+   * In IE, A SVG element is focusable.
    *
    * @param prev - Determines whether to create a previous or next arrow.
    *
@@ -180,7 +181,7 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
    */
   function createArrow( prev: boolean ): HTMLButtonElement {
     const arrow = `<button class="${ classes.arrow } ${ prev ? classes.prev : classes.next }" type="button">`
-      +	`<svg xmlns="${ XML_NAME_SPACE }" viewBox="0 0 ${ SIZE } ${ SIZE }" width="${ SIZE }" height="${ SIZE }">`
+      +	`<svg xmlns="${ XML_NAME_SPACE }" viewBox="0 0 ${ SIZE } ${ SIZE }" width="${ SIZE }" height="${ SIZE }" focusable="false">`
       + `<path d="${ options.arrowPath || PATH }" />`;
 
     return parseHtml<HTMLButtonElement>( arrow );

src/js/components/Elements/Elements.ts

@@ -5,7 +5,7 @@ import {
   CLASS_ARROW_PREV,
   CLASS_ARROWS,
   CLASS_CLONE,
-  CLASS_FOCUS_VISIBLE,
+  CLASS_FOCUS_IN,
   CLASS_LIST,
   CLASS_PAGINATION,
   CLASS_PROGRESS_BAR,
@@ -145,7 +145,7 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
     }, { capture: true } );
 
     bind( root, 'focusin', () => {
-      toggleClass( root, CLASS_FOCUS_VISIBLE, !! isUsingKey );
+      toggleClass( root, CLASS_FOCUS_IN, !! isUsingKey );
     } );
   }
 

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

@@ -1,4 +1,4 @@
-import { CLASS_FOCUS_VISIBLE } from '../../../constants/classes';
+import { CLASS_FOCUS_IN } from '../../../constants/classes';
 import { fire, init } from '../../../test';
 
 
@@ -9,7 +9,7 @@ describe( 'Focus', () => {
     fire( document, 'keydown' );
     fire( splide.root, 'focusin' );
 
-    expect( splide.root.classList.contains( CLASS_FOCUS_VISIBLE ) ).toBe( true );
+    expect( splide.root.classList.contains( CLASS_FOCUS_IN ) ).toBe( true );
   } );
 
   test( 'can remove the status class from the root when detecting pointerdown.', () => {
@@ -18,12 +18,12 @@ describe( 'Focus', () => {
     fire( document, 'keydown' );
     fire( splide.root, 'focusin' );
 
-    expect( splide.root.classList.contains( CLASS_FOCUS_VISIBLE ) ).toBe( true );
+    expect( splide.root.classList.contains( CLASS_FOCUS_IN ) ).toBe( true );
 
     fire( splide.root, 'mousedown' );
     fire( splide.root, 'focusin' );
 
-    expect( splide.root.classList.contains( CLASS_FOCUS_VISIBLE ) ).toBe( false );
+    expect( splide.root.classList.contains( CLASS_FOCUS_IN ) ).toBe( false );
   } );
 
   test( 'should not add the status class when focus comes into the root by pointing devices.', () => {
@@ -32,6 +32,6 @@ describe( 'Focus', () => {
     fire( document, 'mousedown' );
     fire( splide.root, 'focusin' );
 
-    expect( splide.root.classList.contains( CLASS_FOCUS_VISIBLE ) ).toBe( false );
+    expect( splide.root.classList.contains( CLASS_FOCUS_IN ) ).toBe( false );
   } );
 } );

src/js/constants/classes.ts

@@ -26,7 +26,7 @@ export const CLASS_PREV            = 'is-prev';
 export const CLASS_NEXT            = 'is-next';
 export const CLASS_VISIBLE         = 'is-visible';
 export const CLASS_LOADING         = 'is-loading';
-export const CLASS_FOCUS_VISIBLE   = 'has-focus-visible';
+export const CLASS_FOCUS_IN        = 'is-focus-in';
 
 
 /**
@@ -40,7 +40,7 @@ export const STATUS_CLASSES = [
   CLASS_PREV,
   CLASS_NEXT,
   CLASS_LOADING,
-  CLASS_FOCUS_VISIBLE,
+  CLASS_FOCUS_IN,
 ];
 
 /**

src/js/constructors/EventBinder/EventBinder.ts

@@ -107,7 +107,7 @@ export function EventBinder(): EventBinderObject {
       e = new CustomEvent( type, { bubbles, detail } );
     } else {
       e = document.createEvent( 'CustomEvent' );
-      e.initEvent( type, bubbles, false );
+      e.initCustomEvent( type, bubbles, false, detail );
     }
 
     target.dispatchEvent( e );