Bug Fix: `slideFocus` was overridden unexpectedly.

dist/js/splide.js

@@ -881,10 +881,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     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]));
       }
 
@@ -919,6 +918,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       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() {
@@ -2620,7 +2620,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var events = [];
 
     function setup() {
-      options.slideFocus = isNavigation && isUndefined(options.slideFocus);
+      var slideFocus = options.slideFocus;
+      options.slideFocus = isUndefined(slideFocus) ? isNavigation : slideFocus;
     }
 
     function mount() {

src/js/components/Slides/Slide.ts

@@ -106,11 +106,9 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    */
   function mount( this: SlideComponent ): void {
     if ( ! isClone ) {
-      const 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, Splide.length ] ) );
     }
 
@@ -155,6 +153,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, 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 );
   }
 
   /**

src/js/components/Slides/test/slide.test.ts

@@ -157,6 +157,22 @@ describe( 'Slide', () => {
     expect( visibleSlides ).toEqual( [ Slide0, Slide1 ] );
   } );
 
+  test( 'can toggle `tabindex` by visibility if `slideFocus` is enabled.', () => {
+    const splide = init( { speed: 0, slideFocus: true } );
+    const { Slides } = splide.Components;
+
+    const Slide0 = Slides.getAt( 0 );
+    const Slide1 = Slides.getAt( 1 );
+
+    expect( Slide0.slide.tabIndex ).toBe( 0 );
+    expect( Slide1.slide.tabIndex ).toBe( -1 );
+
+    splide.go( 1 );
+
+    expect( Slide0.slide.tabIndex ).toBe( -1 );
+    expect( Slide1.slide.tabIndex ).toBe( 0 );
+  } );
+
   test( 'can disable focus of focusable descendants when the slide gets hidden.', () => {
     const splide = init( { speed: 0 }, { mount: false } );
     const slide0 = document.querySelector( `.${ CLASS_SLIDE }` );

src/js/components/Sync/Sync.ts

@@ -56,7 +56,8 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
    * Called when the component is constructed.
    */
   function setup(): void {
-    options.slideFocus = isNavigation && isUndefined( options.slideFocus );
+    const { slideFocus } = options;
+    options.slideFocus = isUndefined( slideFocus ) ? isNavigation : slideFocus;
   }
 
   /**