Remove `aria-pressed`.

dist/js/splide.js

@@ -692,7 +692,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var ARIA_ROLEDESCRIPTION = ARIA_PREFIX + "roledescription";
   var ARIA_ATOMIC = ARIA_PREFIX + "atomic";
   var ARIA_LIVE = ARIA_PREFIX + "live";
-  var ARIA_PRESSED = ARIA_PREFIX + "pressed";
   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_TRACK = PROJECT_CODE + "__track";
@@ -1924,7 +1923,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function update() {
       if (toggle) {
         toggleClass(toggle, CLASS_ACTIVE, !stopped);
-        setAttribute(toggle, ARIA_PRESSED, !stopped);
         setAttribute(toggle, ARIA_LABEL, options.i18n[stopped ? "play" : "pause"]);
       }
     }

src/js/components/Autoplay/Autoplay.ts

@@ -1,5 +1,5 @@
-import { ARIA_CONTROLS, ARIA_LABEL, ARIA_PRESSED } from '../../constants/attributes';
-import { CLASS_ACTIVE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY } from '../../constants/classes';
+import { ARIA_CONTROLS, ARIA_LABEL } from '../../constants/attributes';
+import { CLASS_ACTIVE } from '../../constants/classes';
 import {
   EVENT_AUTOPLAY_PAUSE,
   EVENT_AUTOPLAY_PLAY,
@@ -11,7 +11,7 @@ import {
 import { EventInterface, RequestInterval } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { display, getAttribute, query, setAttribute, style, toggleClass } from '../../utils';
+import { getAttribute, setAttribute, style, toggleClass } from '../../utils';
 import { INTERVAL_DATA_ATTRIBUTE } from './constants';
 
 
@@ -143,7 +143,6 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
   function update(): void {
     if ( toggle ) {
       toggleClass( toggle, CLASS_ACTIVE, ! stopped );
-      setAttribute( toggle, ARIA_PRESSED, ! stopped );
       setAttribute( toggle, ARIA_LABEL, options.i18n[ stopped ? 'play' : 'pause' ] );
     }
   }

src/js/components/Autoplay/test/button.test.ts

@@ -8,7 +8,6 @@ describe( 'Autoplay toggle button.', () => {
     const { toggle } = splide.Components.Elements;
 
     expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( true );
-    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'true' );
   } );
 
   test( 'should be inactive if `autoplay` option is `false`.', () => {
@@ -16,7 +15,6 @@ describe( 'Autoplay toggle button.', () => {
     const { toggle } = splide.Components.Elements;
 
     expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
-    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'false' );
   } );
 
   test( 'can start/pause autoplay and update the button status.', () => {
@@ -29,17 +27,14 @@ describe( 'Autoplay toggle button.', () => {
     fire( toggle, 'click' );
     expect( Autoplay.isPaused() ).toBe( true );
     expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
-    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'false' );
 
     fire( toggle, 'click' );
     expect( Autoplay.isPaused() ).toBe( false );
     expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( true );
-    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'true' );
 
     fire( toggle, 'click' );
     expect( Autoplay.isPaused() ).toBe( true );
     expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
-    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'false' );
   } );
 
   test( 'should not be inactive("Play" button) when the autoplay is just paused.', () => {
@@ -52,18 +47,15 @@ describe( 'Autoplay toggle button.', () => {
     fire( splide.Components.Elements.root, 'focusin' );
     expect( Autoplay.isPaused() ).toBe( true ); // Paused but not stopped
     expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( true );
-    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'true' );
 
     // Clicks the "pause" button, which stops the autoplay
     fire( toggle, 'click' );
     expect( Autoplay.isPaused() ).toBe( true );
     expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
-    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'false' );
 
     // Resumes autoplay but it still stops
     fire( splide.Components.Elements.root, 'focusout' );
     expect( Autoplay.isPaused() ).toBe( true );
     expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
-    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'false' );
   } );
 } );

src/js/constants/attributes.ts

@@ -12,7 +12,6 @@ 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`;
-export const ARIA_PRESSED         = `${ ARIA_PREFIX }pressed`;
 
 /**
  * The array with all attributes.

src/js/test/fixtures/html.ts

@@ -127,13 +127,8 @@ export const HTML_PROGRESS = `
 `;
 
 export const HTML_AUTOPLAY = `
-<div class="splide__autoplay">
-  <button class="splide__play">
-    Play
-  </button>
-
-  <button class="splide__pause">
-    Pause
-  </button>
-</div>
+<button class="splide__toggle">
+  <span class="splide__toggle__play">Play</span>
+  <span class="splide__toggle__pause">Pause</span>
+</button>
 `;

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

@@ -21,34 +21,36 @@ $settings = get_settings();
       var splide = new Splide( '#splide01', {
         // rewind       : true,
         type         : 'loop',
-        autoplay     : true,
-        pauseOnHover : false,
-        resetProgress: false,
+	      autoplay     : true,
+        // autoplay     : 'pause',
+        // pauseOnHover : false,
+        // resetProgress: false,
       } );
 
-      var toggleButton = document.querySelector( '.splide__toggle' );
+      // var toggleButton = document.querySelector( '.splide__toggle' );
 
-      splide.on( 'autoplay:play', function () {
-        toggleButton.classList.add( 'is-active' );
-        toggleButton.setAttribute( 'aria-label', 'Pause autoplay' );
-        toggleButton.textContent = 'Pause';
-      } );
-
-      splide.on( 'autoplay:pause', function () {
-        toggleButton.classList.remove( 'is-active' );
-        toggleButton.setAttribute( 'aria-label', 'Start autoplay' );
-        toggleButton.textContent = 'Play';
-      } );
+      // splide.on( 'autoplay:play', function () {
+      //   toggleButton.classList.add( 'is-active' );
+      //   toggleButton.setAttribute( 'aria-label', 'Pause autoplay' );
+      //   toggleButton.textContent = 'Pause';
+      // } );
+			//
+      // splide.on( 'autoplay:pause', function () {
+      //   toggleButton.classList.remove( 'is-active' );
+      //   toggleButton.setAttribute( 'aria-label', 'Start autoplay' );
+      //   toggleButton.textContent = 'Play';
+      // } );
 
-      toggleButton.addEventListener( 'click', function () {
-        var Autoplay = splide.Components.Autoplay;
+      // toggleButton.addEventListener( 'click', function () {
+      //   var Autoplay = splide.Components.Autoplay;
+			//
+      //   if ( Autoplay.isPaused() ) {
+      //     Autoplay.play();
+      //   } else {
+      //     Autoplay.pause();
+      //   }
+      // } );
 
-        if ( Autoplay.isPaused() ) {
-          Autoplay.play();
-        } else {
-          Autoplay.pause();
-        }
-      } );
 
       splide.mount();
     } );
@@ -79,15 +81,11 @@ $settings = get_settings();
     <div class="splide__progress__bar"></div>
   </div>
 
-  <div class="splide__autoplay">
-    <button class="splide__play">Play</button>
-    <button class="splide__pause">Pause</button>
-  </div>
+  <button class="splide__toggle" type="button">
+	  <span class="splide__toggle__play">Play</span>
+	  <span class="splide__toggle__pause">Pause</span>
+  </button>
 </div>
 
-<button class="splide__toggle is-active" type="button">
-  Pause
-</button>
-
 </body>
 </html>