Swiperの勝手に挿入されてしまうrole属性を削除したい

Question

Swiperを使用し、スライダーを作成しています。

window.addEventListener('DOMContentLoaded', function() {
    var Slide = new Swiper('.slide', {
        autoplay: {
            delay: 10000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
            reverseDirection: false
        },
        slidesPerView: 1,
        breakpoints: {
            768: {
                slidesPerView: 1
            },
            1024: {
                slidesPerView: 2
            },
            1401: {
                slidesPerView: 3
            }
        },
        loopedSlides: 6,
        loop: true,
        pagination: {
            el: ".pagination",
            clickable: true
        },
        speed: 500,
    });
}, false);

上記のようにコントロール用のjsを記述していますが、paginationを使用した場合、ディペロッパーツールで確認すると、以下のように対象のスライド部分へ勝手にrole属性が付与されてしまっています。

<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1">

Swiper公式のParameters部分や、Pagination・Accessibility (a11y)などを見てもこの該当部分の削除の仕方が分からず、こちらに相談させていただきました。
もし分かる方がいればご教示いただけませんでしょうか。
よろしくお願いいたします。

Answer 1

pagination: {
    el: ".pagination",
    clickable: true
 },

の**clickableがtrueになっていることが原因**ですので、

pagination: {
    el: ".pagination",
    clickable: false
 },

のようにclickableをfalseにすればrole属性は挿入されません。

role=buttonが挿入される理由は、ページネーションをクリックすることによるスライドの遷移を行うためです。
ページネーションが、何枚目のスライドなのかを示すだけの表示で、クリックによるスライドの選択が必要ないのならclickable: falseにしてください。
もし、クリックによるスライドの選択が必要ならこのrole属性はそのためのものですので放置でOKです。

Comments

[Gin_nosuke]

早々にご回答いただき誠にありがとうございます。
また、説明が不足していたようで申し訳ございません。

ページネーションのクリックの機能は残しつつ、自動挿入のroleだけ削除出来ないものか、という質問でした。
clickableをtueの状態ではやはりrole属性の挿入は消せないのですかね・・。

現在制作中のサイトで、クライアント側のデザイン仕様上、該当部分のbuttonサイズが大きく出来ず、LighthouseスコアでのMOBILE FRIENDLY項目で「Tap targets are not sized appropriately」の表示が出ており、role属性を削除出来れば、解決するかなと思い、上記のような方法で対応できないかと考えました。

構造化的に無理やりな感じでしたので、やはり厳しいですかね、、。