Quit assigning `tabindex` to the root element. Remove `outline: 0` from all `:focus` elements.

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__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}
+@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{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;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

@@ -2330,13 +2330,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       var keyboard = options.keyboard;
 
       if (keyboard) {
-        if (keyboard === "focused") {
-          target = root;
-          setAttribute(root, TAB_INDEX, 0);
-        } else {
-          target = window;
-        }
-
+        target = keyboard === "global" ? window : root;
         bind(target, KEYBOARD_EVENT, onKeydown);
       }
     }

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

@@ -1,5 +1,4 @@
 .splide {
-  outline: none;
   position: relative;
   visibility: hidden;
 

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

@@ -5,15 +5,10 @@
     flex-shrink: 0;
     list-style-type: none !important;
     margin: 0;
-    outline: none;
     position: relative;
 
     img {
       vertical-align: bottom;
     }
-
-    //&:not([aria-hidden]) {
-      //display: unset;
-    //}
   }
 }

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

@@ -2,14 +2,14 @@
 
 $outline: colors.$focus 3px solid !default;
 $outline-offset: 3px !default;
-$outline-offset-slide: -3px !default;
+$outline-offset-inset: -3px !default;
 
 @mixin focus-outline {
   outline: $outline;
   outline-offset: $outline-offset;
 }
 
-@mixin focus-outline-slide {
+@mixin focus-outline-inset {
   @include focus-outline;
-  outline-offset: $outline-offset-slide;
+  outline-offset: $outline-offset-inset;
 }

src/css/template/default/object/modifiers/nav.scss

@@ -32,12 +32,8 @@ $opacity-active: false !default;
           }
         }
 
-        &:focus {
-          outline: none;
-        }
-
         &:focus-visible {
-          @include mixins.focus-outline-slide;
+          @include mixins.focus-outline-inset;
         }
       }
     }

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

@@ -14,6 +14,7 @@ $button-border-radius: 50% !default;
 $button-transition: false !default;
 $opacity: .7 !default;
 $opacity-hover: .9 !default;
+$opacity-disabled: .3 !default;
 $left: 1em !default;
 $right: 1em !default;
 
@@ -55,7 +56,7 @@ $right: 1em !default;
       }
     }
 
-    &:hover {
+    &:hover:not(:disabled) {
       @if $opacity-hover {
         opacity: $opacity-hover;
       }
@@ -71,14 +72,16 @@ $right: 1em !default;
       }
     }
 
-    &:focus {
-      outline: none;
-    }
-
     &:focus-visible {
       @include mixins.focus-outline;
     }
 
+    &:disabled {
+      @if $opacity-disabled {
+        opacity: $opacity-disabled;
+      }
+    }
+
     &--prev {
       left: $left;
 

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

@@ -62,10 +62,6 @@ $dot-transform-active: scale( 1.4 ) !default;
         }
       }
 
-      &:focus {
-        outline: none;
-      }
-
       &:focus-visible {
         @include mixins.focus-outline;
       }

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

@@ -11,7 +11,7 @@ $outline-offset: -2px !default;
     }
 
     &:focus-visible {
-      @include mixins.focus-outline-slide;
+      @include mixins.focus-outline-inset;
     }
   }
 }

src/js/components/Keyboard/Keyboard.ts

@@ -66,13 +66,7 @@ export function Keyboard( Splide: Splide, Components: Components, options: Optio
     const { keyboard } = options;
 
     if ( keyboard ) {
-      if ( keyboard === 'focused' ) {
-        target = root;
-        setAttribute( root, TAB_INDEX, 0 );
-      } else {
-        target = window;
-      }
-
+      target = keyboard === 'global' ? window : root;
       bind( target, KEYBOARD_EVENT, onKeydown );
     }
   }

src/js/components/Keyboard/test/general.test.ts

@@ -4,7 +4,7 @@ import { init, keydown, wait } from '../../../test';
 
 describe( 'Keyboard', () => {
   test( 'can control the slider by keyboards.', async () => {
-    const splide = init( { speed: 0, keyboard: true } );
+    const splide = init( { speed: 0, keyboard: 'global' } );
 
     keydown( 'ArrowRight' );
     expect( splide.index ).toBe( 1 );
@@ -26,7 +26,7 @@ describe( 'Keyboard', () => {
   } );
 
   test( 'can control the slider by keyboards in TTB mode.', async () => {
-    const splide = init( { direction: TTB, height: 1, speed: 0, keyboard: true } );
+    const splide = init( { direction: TTB, height: 1, speed: 0, keyboard: 'global' } );
 
     keydown( 'ArrowDown' );
     expect( splide.index ).toBe( 1 );
@@ -48,7 +48,7 @@ describe( 'Keyboard', () => {
   } );
 
   test( 'can control the slider by keyboards in RTL mode.', async () => {
-    const splide = init( { direction: RTL, speed: 0, keyboard: true } );
+    const splide = init( { direction: RTL, speed: 0, keyboard: 'global' } );
 
     keydown( 'ArrowLeft' );
     expect( splide.index ).toBe( 1 );
@@ -73,14 +73,12 @@ describe( 'Keyboard', () => {
     const splide = init( { keyboard: 'focused', speed: 0 } );
     const { root } = splide;
 
-    expect( root.tabIndex ).toBe( 0 );
-
     keydown( 'ArrowRight' );
     expect( splide.index ).toBe( 0 );
 
     await wait();
 
-    splide.root.focus();
+    splide.Components.Arrows.arrows.prev.focus();
 
     await wait();
 
@@ -89,7 +87,7 @@ describe( 'Keyboard', () => {
   } );
 
   test( 'can disable the keyboard input.', async () => {
-    const splide = init( { speed: 0, keyboard: true } );
+    const splide = init( { speed: 0, keyboard: 'global' } );
     const { disable } = splide.Components.Keyboard;
 
     keydown( 'ArrowRight' );