Tabbing breaks slider if slides have links using glide.js

Question

I have a slider built with Glide.js that has 6 slides, all with links. It needs to be tabbable for our keyboard users, but so far it's not working.

If the user tabs through the page, it stops on every photo and then jumps to the first bullet below.

Then if the user clicks the first bullet it does nothing. as the user progresses through the bullets, the images slide and eventually go right off the screen into empty space. The best the user can then do is tab back to the first bullet which only brings them as far back as image 3. Is this a bug or is there something that can be done? I feel like I've tried everything.

Here's my code on code pen:
https://codepen.io/cristenrh/full/ExpwRNz

or an example on my website:
https://hewettcentral.com/cristen/carousel.html

I've tried using different variables for bullet one, like "<<". I've tried using glide.update() once the user gets to the first bullet and I've even tried glide.mount(). Neither work. The closest I've come is to start using negative numbers in the bullets, but that really breaks it further.

     <div class="content">
        <div class="glide">
            <div class="glide__track" data-glide-el="track">
                <ul class="glide__slides">
                    <li class="glide__slide">

                        <div
                            style="background-image:url(https://images.pexels.com/photos/291528/pexels-photo-291528.jpeg?auto=compress&cs=tinysrgb&w=800)">
                        </div>
                        <p>
                            <h3>Cake 1</h3>
                            <a href="recipe.html">Cake Recipe</a>
                        </p>
                    </li>


                    <li class="glide__slide">
                        <div
                            style="background-image:url(https://images.pexels.com/photos/1721934/pexels-photo-1721934.jpeg?auto=compress&cs=tinysrgb&w=800)">
                        </div><p>
                            <h3>Cake 2</h3>
                            <a href="recipe.html">Cake Recipe</a>
                        </p>

                    </li>
                    <li class="glide__slide">

                        <div
                            style="background-image:url(https://images.pexels.com/photos/1702373/pexels-photo-1702373.jpeg?auto=compress&cs=tinysrgb&w=800)">
                        </div>
                        <p>
                            <h3>Cake 3</h3>
                            <a href="recipe.html">Cake Recipe</a>
                        </p>
                    </li>
                    <li class="glide__slide">

                        <div
                            style="background-image:url(https://images.pexels.com/photos/369267/pexels-photo-369267.jpeg?auto=compress&cs=tinysrgb&w=800)">
                        </div>
                        <p>
                            <h3>Cake 4</h3>
                            <a href="recipe.html">Cake Recipe</a>
                        </p>
                    </li>
                    <li class="glide__slide">

                        <div
                            style="background-image:url(https://images.pexels.com/photos/2531546/pexels-photo-2531546.jpeg?auto=compress&cs=tinysrgb&w=800)">
                        </div>
                        <p>
                            <h3>Cake 5</h3>
                            <a href="r4ecipe.html">Cake Recipe</a>
                        </p>
                    </li>

                    <li class="glide__slide">

                        <div
                            style="background-image:url(https://images.pexels.com/photos/853004/pexels-photo-853004.jpeg?auto=compress&cs=tinysrgb&w=800)">
                        </div>
                        <p>
                            <h3>Cake 6</h3>
                            <a href="recipe.html">Cake Recipe</a>
                        </p>
                    </li>
     </ul>
            </div>
            <div class="glide bullet_holder">
                <div class="glide__bullets" data-glide-el="controls[nav]">
                    <button class="glide__bullet" data-glide-dir="=0"></button>
                    <button class="glide__bullet" data-glide-dir="=1"></button>
                    <button class="glide__bullet" data-glide-dir="=2"></button>
                    <button class="glide__bullet" data-glide-dir="=3"></button>
                    <button class="glide__bullet" data-glide-dir="=4"></button>
                    <button class="glide__bullet" data-glide-dir="=5"></button>
                </div>
            </div>
        </div>
    </div>
    </main>

JS: new Glide('.glide', { type: 'slider', autoplay: 0, keyboard: true, perView: 2, peek: 100, focusAt: 0 }).mount()

Answer 1

Sorry I'm a little late to the party, but I ran into the same problem and figured out how to solve it. Set the tabindex for links on non-active slides to -1 and then to 0 when the slide becomes active. This worked for me:

let glide = new Glide( '#rotator', {
  type: 'carousel',
});

glide.mount();

glide.on(['move.after', 'run'], function() {
  document.querySelectorAll( '#rotator li:not(.glide__slide--active) a' ).forEach( link => {
    link.setAttribute( 'tabindex', -1 );
  });
  document.querySelector( '#rotator li.glide__slide--active a' ).setAttribute( 'tabindex', 0 );
});