I'm using Swiper with the Pagination module, I added a tab index to an anchor inside each card and I want the user to be able to use keyboard navigation on the anchors themselves.
My issue is that if I set the bullets to be clickable (which I want) I also get a tab index set to zero on each bullet and the keyboard experience becomes very confusing.
I tried using the renderBullet prop to pass a custom template, but it seems the tab index is added by some javascript in the library:
...
pagination={ {
clickable: true,
renderBullet: function (index, className) {
return `<span class="${className}" role="button" aria-label="Go to slide ${index + 1}"></span>`;
}
} }
...
Since this is somehting done by the library, how can I configure Swiper to make make the pagination bullets not focusable (or at least how can I reasonably disable them without forking the library)?
