Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?

Question

Tomasinar @Tomasinar

Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?

Сейчас, если прокликивать табом, то фокус сначала идет по ссылкам внутри hero__content, потом добирается до пагинации. При этом, когда фокус оказывается на ссылках неактивных слайдов, пагинация вообще пропадает (видимо, за экран, оставаясь на активном слайде). Как поправить всю эту штуку, чтобы работало корректно?

<section class="hero" >
        <div class="hero__swiper swiper">
          <ul class="hero__list swiper-wrapper">
            <li class="hero__item swiper-slide">
              <div class="hero__content">
                <h3>Собакен 1</h3>
                <p>Собакино описание</p>
                <a href="#">Смотреть породу</a>
              </div>
                <img class="hero__picture" width="500" height="800" src="./img/dog.jpg" alt="собакен">
            </li>
            <li class="hero__item swiper-slide">
              <div class="hero__content">
                <h3>Собакен 2</h3>
                <p>Собакино описание</p>
                <a href="#">Смотреть породу</a>
              </div>
                <img class="hero__picture" width="500" height="800" src="./img/dog.jpg" alt="собакен">
            </li>
            <li class="hero__item swiper-slide">
              <div class="hero__content">
                <h3>Собакен 3</h3>
                <p>Собакино описание</p>
                <a href="#">Смотреть породу</a>
              </div>
                <img class="hero__picture" width="500" height="800" src="./img/dog.jpg" alt="собакен">
            </li>
          </ul>
          <div class="hero__pagination swiper-pagination"></div>
        </div>
      </section>

const heroSwiper = new Swiper('.swiper', {
  direction: 'horizontal',
  loop: true,
  modules: [ Pagination ],

  pagination: {
    el: '.hero__pagination',
    bulletClass: 'hero__pagination-control',
    bulletActiveClass: 'hero__pagination-control--active',
    renderBullet: (index, className) => `<button class="${className}" type="button"><span class="visually-hidden">Слайд ${index + 1}</span></button>`,
    clickable: true,
  },

  watchSlidesProgress: true,
  slideActiveClass: 'hero__item--show',

});