【アクセシビリティ対応】SwiperのサムネイルをTabで操作する方法

実現したいこと

Swiperを使用した、スライダーアクセシビリティ対応

Tab操作でサムネイルをフォーカス
Enterを押して対象のスライドに遷移

フォーカス自体はできるのですが、スライダーと連動することができず困惑している状況です。
そもそも可能かどうかも含めてご教示いただけますと幸いです。

該当のソースコード

html
1  <div class="swiper-container slider">
2    <div class="swiper-wrapper">
3      <div class="swiper-slide"><img src="sample001.jpg" alt=""></div>
4      <div class="swiper-slide"><img src="sample002.jpg" alt=""></div>
5      <div class="swiper-slide"><img src="sample003.jpg" alt=""></div>
6      <div class="swiper-slide"><img src="sample004.jpg" alt=""></div>
7      <div class="swiper-slide"><img src="sample005.jpg" alt=""></div>
8      <div class="swiper-slide"><img src="sample006.jpg" alt=""></div>
9    </div>
10    <div class="swiper-button-next"></div>
11    <div class="swiper-button-prev"></div>
12  </div>
13
14  <!-- 
15    このサムネイルをTabでフォーカス〜Enterで sliderの画像を差し替えできるようにしたい 
16  -->
17  <div class="swiper-container slider-thumbnail">
18    <div class="swiper-wrapper">
19      <div class="swiper-slide"><img src="sample001.jpg" alt=""></div>
20      <div class="swiper-slide"><img src="sample002.jpg" alt=""></div>
21      <div class="swiper-slide"><img src="sample003.jpg" alt=""></div>
22      <div class="swiper-slide"><img src="sample004.jpg" alt=""></div>
23      <div class="swiper-slide"><img src="sample005.jpg" alt=""></div>
24      <div class="swiper-slide"><img src="sample006.jpg" alt=""></div>
25    </div>
26  </div>

JavaScript
1//サムネイル
2var sliderThumbnail = new Swiper('.slider-thumbnail', {
3  slidesPerView: 4,
4  freeMode: true,
5  watchSlidesVisibility: true,
6  watchSlidesProgress: true,
7});
8
9//スライダー
10var slider = new Swiper('.slider', {
11  navigation: {
12    nextEl: '.swiper-button-next',
13    prevEl: '.swiper-button-prev',
14  },
15  thumbs: {
16    swiper: sliderThumbnail
17  }
18});