Bug Fix: Reset the `paused` flag.

dist/js/splide.cjs.js

@@ -52,9 +52,6 @@ function isNull(subject) {
 function isHTMLElement(subject) {
   return subject instanceof HTMLElement;
 }
-function isHTMLButtonElement(subject) {
-  return subject instanceof HTMLButtonElement;
-}
 
 function toArray(value) {
   return isArray(value) ? value : [value];
@@ -705,6 +702,7 @@ function Elements(Splide2, Components2, options) {
       list,
       slides,
       arrows,
+      autoplay,
       prev: query(arrows, `.${CLASS_ARROW_PREV}`),
       next: query(arrows, `.${CLASS_ARROW_NEXT}`),
       bar: query(find(`.${CLASS_PROGRESS}`), `.${CLASS_PROGRESS_BAR}`),
@@ -1556,9 +1554,6 @@ function Autoplay(Splide2, Components2, options) {
     const prop = forPause ? "pause" : "play";
     const button = Elements[prop];
     if (button) {
-      if (!isHTMLButtonElement(button)) {
-        setAttribute(button, ROLE, "button");
-      }
       setAttribute(button, ARIA_CONTROLS, Elements.track.id);
       setAttribute(button, ARIA_LABEL, options.i18n[prop]);
       bind(button, "click", forPause ? pause : play);
@@ -1583,8 +1578,7 @@ function Autoplay(Splide2, Components2, options) {
   function play() {
     if (isPaused() && Components2.Slides.isEnough()) {
       interval.start(!options.resetProgress);
-      focused = false;
-      hovered = false;
+      focused = hovered = paused = false;
       emit(EVENT_AUTOPLAY_PLAY);
     }
   }

dist/js/splide.esm.js

@@ -48,9 +48,6 @@ function isNull(subject) {
 function isHTMLElement(subject) {
   return subject instanceof HTMLElement;
 }
-function isHTMLButtonElement(subject) {
-  return subject instanceof HTMLButtonElement;
-}
 
 function toArray(value) {
   return isArray(value) ? value : [value];
@@ -701,6 +698,7 @@ function Elements(Splide2, Components2, options) {
       list,
       slides,
       arrows,
+      autoplay,
       prev: query(arrows, `.${CLASS_ARROW_PREV}`),
       next: query(arrows, `.${CLASS_ARROW_NEXT}`),
       bar: query(find(`.${CLASS_PROGRESS}`), `.${CLASS_PROGRESS_BAR}`),
@@ -1552,9 +1550,6 @@ function Autoplay(Splide2, Components2, options) {
     const prop = forPause ? "pause" : "play";
     const button = Elements[prop];
     if (button) {
-      if (!isHTMLButtonElement(button)) {
-        setAttribute(button, ROLE, "button");
-      }
       setAttribute(button, ARIA_CONTROLS, Elements.track.id);
       setAttribute(button, ARIA_LABEL, options.i18n[prop]);
       bind(button, "click", forPause ? pause : play);
@@ -1579,8 +1574,7 @@ function Autoplay(Splide2, Components2, options) {
   function play() {
     if (isPaused() && Components2.Slides.isEnough()) {
       interval.start(!options.resetProgress);
-      focused = false;
-      hovered = false;
+      focused = hovered = paused = false;
       emit(EVENT_AUTOPLAY_PLAY);
     }
   }

dist/js/splide.js

@@ -62,10 +62,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     return subject instanceof HTMLElement;
   }
 
-  function isHTMLButtonElement(subject) {
-    return subject instanceof HTMLButtonElement;
-  }
-
   function toArray(value) {
     return isArray(value) ? value : [value];
   }
@@ -806,6 +802,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         list: list,
         slides: slides,
         arrows: arrows,
+        autoplay: autoplay,
         prev: query(arrows, "." + CLASS_ARROW_PREV),
         next: query(arrows, "." + CLASS_ARROW_NEXT),
         bar: query(find("." + CLASS_PROGRESS), "." + CLASS_PROGRESS_BAR),
@@ -1864,10 +1861,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       var button = Elements[prop];
 
       if (button) {
-        if (!isHTMLButtonElement(button)) {
-          setAttribute(button, ROLE, "button");
-        }
-
         setAttribute(button, ARIA_CONTROLS, Elements.track.id);
         setAttribute(button, ARIA_LABEL, options.i18n[prop]);
         bind(button, "click", forPause ? pause : play);
@@ -1897,8 +1890,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function play() {
       if (isPaused() && Components2.Slides.isEnough()) {
         interval.start(!options.resetProgress);
-        focused = false;
-        hovered = false;
+        focused = hovered = paused = false;
         emit(EVENT_AUTOPLAY_PLAY);
       }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Autoplay.d.ts","sourceRoot":"","sources":["Autoplay.ts"],"names":[],"mappings":"AAUA,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,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CAgJtG"}
+{"version":3,"file":"Autoplay.d.ts","sourceRoot":"","sources":["Autoplay.ts"],"names":[],"mappings":"AAUA,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,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CA2ItG"}

dist/types/components/Elements/Elements.d.ts

@@ -15,8 +15,9 @@ export interface ElementCollection {
     prev: HTMLButtonElement;
     next: HTMLButtonElement;
     bar: HTMLElement;
-    play: HTMLElement;
-    pause: HTMLElement;
+    autoplay: HTMLElement;
+    play: HTMLButtonElement;
+    pause: HTMLButtonElement;
 }
 /**
  * The interface for the Elements component.

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

@@ -1 +1 @@
-{"version":3,"file":"Elements.d.ts","sourceRoot":"","sources":["Elements.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,EAAE,iBAAiB,CAAC;IACxB,GAAG,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,WAAW,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa,EAAE,iBAAiB;CAC1E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CA4ItG"}
+{"version":3,"file":"Elements.d.ts","sourceRoot":"","sources":["Elements.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,EAAE,iBAAiB,CAAC;IACxB,GAAG,EAAE,WAAW,CAAC;IACjB,QAAQ,EAAE,WAAW,CAAC;IACtB,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa,EAAE,iBAAiB;CAC1E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CA6ItG"}

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

@@ -5,12 +5,14 @@
     flex-wrap: wrap;
     justify-content: center;
     margin: 0;
+    pointer-events: none;
 
     li {
       display: inline-block;
       line-height: 1;
       list-style-type: none;
       margin: 0;
+      pointer-events: auto;
     }
   }
 }

src/js/components/Autoplay/Autoplay.ts

@@ -1,4 +1,4 @@
-import { ARIA_CONTROLS, ARIA_LABEL, ROLE } from '../../constants/attributes';
+import { ARIA_CONTROLS, ARIA_LABEL } from '../../constants/attributes';
 import {
   EVENT_AUTOPLAY_PAUSE,
   EVENT_AUTOPLAY_PLAY,
@@ -10,7 +10,7 @@ import {
 import { EventInterface, RequestInterval } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { isHTMLButtonElement, setAttribute, style } from '../../utils';
+import { setAttribute, style } from '../../utils';
 
 
 /**
@@ -83,10 +83,6 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
     const button = Elements[ prop ];
 
     if ( button ) {
-      if ( ! isHTMLButtonElement( button ) ) {
-        setAttribute( button, ROLE, 'button' );
-      }
-
       setAttribute( button, ARIA_CONTROLS, Elements.track.id );
       setAttribute( button, ARIA_LABEL, options.i18n[ prop ] );
 
@@ -123,8 +119,7 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
   function play(): void {
     if ( isPaused() && Components.Slides.isEnough() ) {
       interval.start( ! options.resetProgress );
-      focused = false;
-      hovered = false;
+      focused = hovered = paused = false;
       emit( EVENT_AUTOPLAY_PLAY );
     }
   }

src/js/components/Elements/Elements.ts

@@ -38,8 +38,9 @@ export interface ElementCollection {
   prev: HTMLButtonElement;
   next: HTMLButtonElement;
   bar: HTMLElement;
-  play: HTMLElement;
-  pause: HTMLElement;
+  autoplay: HTMLElement;
+  play: HTMLButtonElement;
+  pause: HTMLButtonElement;
 }
 
 /**
@@ -154,6 +155,7 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
       list,
       slides,
       arrows,
+      autoplay,
       prev : query( arrows, `.${ CLASS_ARROW_PREV }` ),
       next : query( arrows, `.${ CLASS_ARROW_NEXT }` ),
       bar  : query( find( `.${ CLASS_PROGRESS }` ), `.${ CLASS_PROGRESS_BAR }` ),

src/js/test/assets/css/styles.css

@@ -11,6 +11,10 @@ img {
   height: auto;
 }
 
+button:focus {
+  outline: 2px solid yellowgreen;
+}
+
 .splide {
   margin: 2rem auto;
 }

src/js/test/php/examples/autoplay.php

@@ -0,0 +1,58 @@
+<?php
+require_once '../parts.php';
+require_once '../settings.php';
+
+$settings = get_settings();
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Autoplay</title>
+
+  <link rel="stylesheet" href="../../../../../dist/css/themes/splide-<?php echo $settings['theme'] ?>.min.css">
+  <link rel="stylesheet" href="../../assets/css/styles.css">
+  <script type="text/javascript" src="../../../../../dist/js/splide.js"></script>
+
+  <script>
+    document.addEventListener( 'DOMContentLoaded', function () {
+      var splide = new Splide( '#splide01', {
+        autoplay: true,
+        pauseOnHover: false,
+      } );
+
+      splide.on( 'autoplay:play', () => {
+        console.log( 'play' );
+      } );
+
+      splide.on( 'autoplay:pause', () => {
+        console.log( 'paused' );
+      } );
+
+      splide.mount();
+    } );
+  </script>
+</head>
+<body>
+
+<div id="splide01" class="splide">
+  <div class="splide__track">
+    <ul class="splide__list">
+      <?php render_slides(); ?>
+    </ul>
+  </div>
+
+  <div class="splide__progress">
+    <div class="splide__progress__bar"></div>
+  </div>
+
+  <div class="splide__autoplay">
+    <button class="splide__play">Play</button>
+    <button class="splide__pause">Pause</button>
+  </div>
+</div>
+
+</body>
+</html>