Add the `disable()` method to the Keyboard component.

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.5.8
+ * Version  : 3.6.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1912,9 +1912,10 @@ function Drag(Splide2, Components2, options) {
 }
 
 const IE_ARROW_KEYS = ["Left", "Right", "Up", "Down"];
+const KEYBOARD_EVENT = "keydown";
 function Keyboard(Splide2, Components2, options) {
   const { on, bind, unbind } = EventInterface(Splide2);
-  const { root } = Components2.Elements;
+  const { root } = Splide2;
   const { resolve } = Components2.Direction;
   let target;
   let disabled;
@@ -1924,7 +1925,7 @@ function Keyboard(Splide2, Components2, options) {
     on(EVENT_MOVE, onMove);
   }
   function init() {
-    const { keyboard = "global" } = options;
+    const { keyboard } = options;
     if (keyboard) {
       if (keyboard === "focused") {
         target = root;
@@ -1932,19 +1933,23 @@ function Keyboard(Splide2, Components2, options) {
       } else {
         target = window;
       }
-      bind(target, "keydown", onKeydown);
+      bind(target, KEYBOARD_EVENT, onKeydown);
     }
   }
   function destroy() {
-    unbind(target, "keydown");
+    unbind(target, KEYBOARD_EVENT);
     if (isHTMLElement(target)) {
       removeAttribute(target, TAB_INDEX);
     }
   }
+  function disable(value) {
+    disabled = value;
+  }
   function onMove() {
+    const _disabled = disabled;
     disabled = true;
     nextTick(() => {
-      disabled = false;
+      disabled = _disabled;
     });
   }
   function onUpdated() {
@@ -1964,7 +1969,8 @@ function Keyboard(Splide2, Components2, options) {
   }
   return {
     mount,
-    destroy
+    destroy,
+    disable
   };
 }
 
@@ -2271,6 +2277,7 @@ const DEFAULTS = {
   pauseOnHover: true,
   pauseOnFocus: true,
   resetProgress: true,
+  keyboard: true,
   easing: "cubic-bezier(0.25, 1, 0.5, 1)",
   drag: true,
   direction: "ltr",

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.5.8
+ * Version  : 3.6.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1908,9 +1908,10 @@ function Drag(Splide2, Components2, options) {
 }
 
 const IE_ARROW_KEYS = ["Left", "Right", "Up", "Down"];
+const KEYBOARD_EVENT = "keydown";
 function Keyboard(Splide2, Components2, options) {
   const { on, bind, unbind } = EventInterface(Splide2);
-  const { root } = Components2.Elements;
+  const { root } = Splide2;
   const { resolve } = Components2.Direction;
   let target;
   let disabled;
@@ -1920,7 +1921,7 @@ function Keyboard(Splide2, Components2, options) {
     on(EVENT_MOVE, onMove);
   }
   function init() {
-    const { keyboard = "global" } = options;
+    const { keyboard } = options;
     if (keyboard) {
       if (keyboard === "focused") {
         target = root;
@@ -1928,19 +1929,23 @@ function Keyboard(Splide2, Components2, options) {
       } else {
         target = window;
       }
-      bind(target, "keydown", onKeydown);
+      bind(target, KEYBOARD_EVENT, onKeydown);
     }
   }
   function destroy() {
-    unbind(target, "keydown");
+    unbind(target, KEYBOARD_EVENT);
     if (isHTMLElement(target)) {
       removeAttribute(target, TAB_INDEX);
     }
   }
+  function disable(value) {
+    disabled = value;
+  }
   function onMove() {
+    const _disabled = disabled;
     disabled = true;
     nextTick(() => {
-      disabled = false;
+      disabled = _disabled;
     });
   }
   function onUpdated() {
@@ -1960,7 +1965,8 @@ function Keyboard(Splide2, Components2, options) {
   }
   return {
     mount,
-    destroy
+    destroy,
+    disable
   };
 }
 
@@ -2267,6 +2273,7 @@ const DEFAULTS = {
   pauseOnHover: true,
   pauseOnFocus: true,
   resetProgress: true,
+  keyboard: true,
   easing: "cubic-bezier(0.25, 1, 0.5, 1)",
   drag: true,
   direction: "ltr",

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.5.8
+ * Version  : 3.6.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -2304,6 +2304,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   var IE_ARROW_KEYS = ["Left", "Right", "Up", "Down"];
+  var KEYBOARD_EVENT = "keydown";
 
   function Keyboard(Splide2, Components2, options) {
     var _EventInterface13 = EventInterface(Splide2),
@@ -2311,7 +2312,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         bind = _EventInterface13.bind,
         unbind = _EventInterface13.unbind;
 
-    var root = Components2.Elements.root;
+    var root = Splide2.root;
     var resolve = Components2.Direction.resolve;
     var target;
     var disabled;
@@ -2323,8 +2324,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function init() {
-      var _options$keyboard = options.keyboard,
-          keyboard = _options$keyboard === void 0 ? "global" : _options$keyboard;
+      var keyboard = options.keyboard;
 
       if (keyboard) {
         if (keyboard === "focused") {
@@ -2334,22 +2334,27 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           target = window;
         }
 
-        bind(target, "keydown", onKeydown);
+        bind(target, KEYBOARD_EVENT, onKeydown);
       }
     }
 
     function destroy() {
-      unbind(target, "keydown");
+      unbind(target, KEYBOARD_EVENT);
 
       if (isHTMLElement(target)) {
         removeAttribute(target, TAB_INDEX);
       }
     }
 
+    function disable(value) {
+      disabled = value;
+    }
+
     function onMove() {
+      var _disabled = disabled;
       disabled = true;
       nextTick(function () {
-        disabled = false;
+        disabled = _disabled;
       });
     }
 
@@ -2373,7 +2378,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     return {
       mount: mount,
-      destroy: destroy
+      destroy: destroy,
+      disable: disable
     };
   }
 
@@ -2763,6 +2769,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     pauseOnHover: true,
     pauseOnFocus: true,
     resetProgress: true,
+    keyboard: true,
     easing: "cubic-bezier(0.25, 1, 0.5, 1)",
     drag: true,
     direction: "ltr",

dist/types/components/Keyboard/Keyboard.d.ts

@@ -6,6 +6,7 @@ import { BaseComponent, Components, Options } from '../../types';
  * @since 3.0.0
  */
 export interface KeyboardComponent extends BaseComponent {
+    disable(disabled: boolean): void;
 }
 /**
  * The component for controlling the slider by keyboards.

dist/types/components/Keyboard/Keyboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Keyboard.d.ts","sourceRoot":"","sources":["Keyboard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa;CACvD;AASD;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CA4FtG"}
+{"version":3,"file":"Keyboard.d.ts","sourceRoot":"","sources":["Keyboard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAC;CACpC;AAgBD;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CAuGtG"}

dist/types/constants/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAKnC;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,OAoBtB,CAAC"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAKnC;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,OAqBtB,CAAC"}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.5.8",
+  "version": "3.6.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.5.8",
+  "version": "3.6.0",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

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

@@ -70,7 +70,7 @@ $right: 1em !default;
       }
     }
 
-    &:focus {
+    &:focus:not(:focus-visible) {
       outline: none;
     }
 

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

@@ -59,7 +59,7 @@ $dot-transform-active: scale( 1.4 ) !default;
         }
       }
 
-      &:focus {
+      &:focus:not(:focus-visible) {
         outline: none;
       }
     }

src/js/components/Keyboard/Keyboard.ts

@@ -12,15 +12,23 @@ import { includes, isHTMLElement, nextTick, removeAttribute, setAttribute } from
  * @since 3.0.0
  */
 export interface KeyboardComponent extends BaseComponent {
+  disable( disabled: boolean ): void;
 }
 
 /**
- * The collection of arrow keys of IE.
+ * Arrow keys of IE.
  *
  * @since 3.0.0
  */
 const IE_ARROW_KEYS = [ 'Left', 'Right', 'Up', 'Down' ];
 
+/**
+ * The keyboard event name.
+ *
+ * @since 3.6.0
+ */
+const KEYBOARD_EVENT = 'keydown';
+
 /**
  * The component for controlling the slider by keyboards.
  *
@@ -34,7 +42,7 @@ const IE_ARROW_KEYS = [ 'Left', 'Right', 'Up', 'Down' ];
  */
 export function Keyboard( Splide: Splide, Components: Components, options: Options ): KeyboardComponent {
   const { on, bind, unbind } = EventInterface( Splide );
-  const { root } = Components.Elements;
+  const { root } = Splide;
   const { resolve } = Components.Direction;
 
   /**
@@ -60,7 +68,7 @@ export function Keyboard( Splide: Splide, Components: Components, options: Optio
    * Initializes the component.
    */
   function init(): void {
-    const { keyboard = 'global' } = options;
+    const { keyboard } = options;
 
     if ( keyboard ) {
       if ( keyboard === 'focused' ) {
@@ -70,7 +78,7 @@ export function Keyboard( Splide: Splide, Components: Components, options: Optio
         target = window;
       }
 
-      bind( target, 'keydown', onKeydown );
+      bind( target, KEYBOARD_EVENT, onKeydown );
     }
   }
 
@@ -78,20 +86,30 @@ export function Keyboard( Splide: Splide, Components: Components, options: Optio
    * Destroys the component.
    */
   function destroy(): void {
-    unbind( target, 'keydown' );
+    unbind( target, KEYBOARD_EVENT );
 
     if ( isHTMLElement( target ) ) {
       removeAttribute( target, TAB_INDEX );
     }
   }
 
+  /**
+   * Disables the keyboard input.
+   *
+   * @param value - Toggles disabling/enabling the keyboard input.
+   */
+  function disable( value: boolean ): void {
+    disabled = value;
+  }
+
   /**
    * Called when the slider moves.
    * To avoid the slider from moving twice, wait for a tick.
    */
   function onMove(): void {
+    const _disabled = disabled;
     disabled = true;
-    nextTick( () => { disabled = false } );
+    nextTick( () => { disabled = _disabled } );
   }
 
   /**
@@ -123,5 +141,6 @@ export function Keyboard( Splide: Splide, Components: Components, options: Optio
   return {
     mount,
     destroy,
+    disable,
   };
 }

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

@@ -87,4 +87,31 @@ describe( 'Keyboard', () => {
     keydown( 'ArrowRight', root );
     expect( splide.index ).toBe( 1 );
   } );
+
+  test( 'can disable the keyboard input.', async () => {
+    const splide = init( { speed: 0 } );
+    const { disable } = splide.Components.Keyboard;
+
+    keydown( 'ArrowRight' );
+    expect( splide.index ).toBe( 1 );
+
+    await wait();
+
+    disable( true );
+
+    keydown( 'ArrowRight' );
+    expect( splide.index ).toBe( 1 );
+
+    await wait();
+
+    keydown( 'ArrowLeft' );
+    expect( splide.index ).toBe( 1 );
+
+    await wait();
+
+    disable( false );
+
+    keydown( 'ArrowLeft' );
+    expect( splide.index ).toBe( 0 );
+  } );
 } );

src/js/constants/defaults.ts

@@ -21,6 +21,7 @@ export const DEFAULTS: Options = {
   pauseOnHover     : true,
   pauseOnFocus     : true,
   resetProgress    : true,
+  keyboard         : true,
   easing           : 'cubic-bezier(0.25, 1, 0.5, 1)',
   drag             : true,
   direction        : 'ltr',

src/js/test/php/examples/sync.php

@@ -20,7 +20,7 @@ $settings = get_settings();
         width      : 800,
         type       : 'loop',
         heightRatio: 0.3,
-        perPage    : 2,
+        perPage    : 1,
         waitForTransition: false,
         breakpoints: {
           1000: {