fix(Carousel): improve accessibility

Resolves #4494
2026-01-14 12:14:41 +01:00 · 2025-07-10 14:18:34 +02:00
parent a813ea700e
commit 55e06e97e7
55 changed files with 75 additions and 22 deletions
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -256,6 +256,7 @@ const scrollSnaps = ref<number[]>([])
 function onInit(api: EmblaCarouselType) {
  scrollSnaps.value = api?.scrollSnapList() || []
 }
+
 function onSelect(api: EmblaCarouselType) {
  canScrollNext.value = api?.canScrollNext() || false
  canScrollPrev.value = api?.canScrollPrev() || false
@@ -300,8 +301,7 @@ defineExpose({
        <div
          v-for="(item, index) in items"
          :key="index"
-          role="group"
-          aria-roledescription="slide"
+          v-bind="dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
          :class="ui.item({ class: [props.ui?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
        >
          <slot :item="item" :index="index" />
@@ -333,14 +333,15 @@ defineExpose({
        />
      </div>

-      <div v-if="dots" :class="ui.dots({ class: props.ui?.dots })">
+      <div v-if="dots" role="tablist" :aria-label="t('carousel.dots')" :class="ui.dots({ class: props.ui?.dots })">
        <template v-for="(_, index) in scrollSnaps" :key="index">
          <button
            type="button"
+            role="tab"
            :aria-label="t('carousel.goto', { slide: index + 1 })"
+            :aria-selected="selectedIndex === index"
            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
            :data-state="selectedIndex === index ? 'active' : undefined"
-            :aria-current="selectedIndex === index ? true : undefined"
            @click="scrollTo(index)"
          />
        </template>
--- a/src/runtime/locale/ar.ts
+++ b/src/runtime/locale/ar.ts
@@ -40,7 +40,8 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'السابق',
      next: 'التالي',
-      goto: 'الذهاب إلي شريحة {slide}'
+      dots: 'اختر الشريحة المراد عرضها',
+      goto: 'الذهاب إلى شريحة {slide}'
    },
    modal: {
      close: 'إغلاق'
--- a/src/runtime/locale/az.ts
+++ b/src/runtime/locale/az.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Əvvəlki',
      next: 'Növbəti',
+      dots: 'Göstərmək üçün slayd seçin',
      goto: 'Slayd {slide} keç'
    },
    modal: {
--- a/src/runtime/locale/bg.ts
+++ b/src/runtime/locale/bg.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Назад',
      next: 'Напред',
+      dots: 'Изберете слайд за показване',
      goto: 'Отидете на слайд {slide}'
    },
    modal: {
--- a/src/runtime/locale/bn.ts
+++ b/src/runtime/locale/bn.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'পূর্ববর্তী',
      next: 'পরবর্তী',
+      dots: 'প্রদর্শনের জন্য স্লাইড নির্বাচন করুন',
      goto: 'স্লাইড {slide} এ যান'
    },
    modal: {
--- a/src/runtime/locale/ca.ts
+++ b/src/runtime/locale/ca.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Anterior',
      next: 'Següent',
+      dots: 'Tria la diapositiva a mostrar',
      goto: 'Anar a la diapositiva {slide}'
    },
    modal: {
--- a/src/runtime/locale/ckb.ts
+++ b/src/runtime/locale/ckb.ts
@@ -38,8 +38,9 @@ export default defineLocale<Messages>({
      close: 'داخستن'
    },
    carousel: {
-      prev: 'پێشوو',
+      prev: 'پێشووی',
      next: 'داهاتوو',
+      dots: 'سلایدێک هەڵبژێرە بۆ پیشاندان',
      goto: 'بڕۆ بۆ سلایدی {slide}'
    },
    modal: {
--- a/src/runtime/locale/cs.ts
+++ b/src/runtime/locale/cs.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Předchozí',
      next: 'Další',
+      dots: 'Vyberte snímek k zobrazení',
      goto: 'Přejít na {slide}'
    },
    modal: {
--- a/src/runtime/locale/da.ts
+++ b/src/runtime/locale/da.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Forrige',
      next: 'Næste',
+      dots: 'Vælg dias til visning',
      goto: 'Gå til slide {slide}'
    },
    modal: {
--- a/src/runtime/locale/de.ts
+++ b/src/runtime/locale/de.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Zurück',
      next: 'Weiter',
+      dots: 'Folie zur Anzeige auswählen',
      goto: 'Gehe zu {slide}'
    },
    modal: {
--- a/src/runtime/locale/el.ts
+++ b/src/runtime/locale/el.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Προηγούμενο',
      next: 'Επόμενο',
+      dots: 'Επιλέξτε διαφάνεια για εμφάνιση',
      goto: 'Μετάβαση στη διαφάνεια {slide}'
    },
    modal: {
--- a/src/runtime/locale/en.ts
+++ b/src/runtime/locale/en.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Prev',
      next: 'Next',
+      dots: 'Choose slide to display',
      goto: 'Go to slide {slide}'
    },
    modal: {
--- a/src/runtime/locale/es.ts
+++ b/src/runtime/locale/es.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Anterior',
      next: 'Siguiente',
+      dots: 'Elegir diapositiva a mostrar',
      goto: 'Ir a la diapositiva {slide}'
    },
    modal: {
--- a/src/runtime/locale/et.ts
+++ b/src/runtime/locale/et.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Eel',
      next: 'Järg',
+      dots: 'Valige kuvatav slaid',
      goto: 'Mine slaidile {slide}'
    },
    modal: {
--- a/src/runtime/locale/fa_ir.ts
+++ b/src/runtime/locale/fa_ir.ts
@@ -40,6 +40,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'قبلی',
      next: 'بعدی',
+      dots: 'اسلاید مورد نظر برای نمایش را انتخاب کنید',
      goto: 'رفتن به اسلاید {slide}'
    },
    modal: {
--- a/src/runtime/locale/fi.ts
+++ b/src/runtime/locale/fi.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Edellinen',
      next: 'Seuraava',
+      dots: 'Valitse näytettävä dia',
      goto: 'Siirry sivulle {slide}'
    },
    modal: {
--- a/src/runtime/locale/fr.ts
+++ b/src/runtime/locale/fr.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Précédent',
      next: 'Suivant',
+      dots: 'Choisir la diapositive à afficher',
      goto: 'Aller à {slide}'
    },
    modal: {
--- a/src/runtime/locale/he.ts
+++ b/src/runtime/locale/he.ts
@@ -38,6 +38,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'הקודם',
      next: 'הבא',
+      dots: 'בחר שקופית להצגה',
      goto: 'מעבר ל {slide}'
    },
    modal: {
--- a/src/runtime/locale/hi.ts
+++ b/src/runtime/locale/hi.ts
@@ -39,7 +39,8 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'पिछला',
      next: 'अगला',
-      goto: 'स्लाइड {slide} पर जाएँ'
+      dots: 'प्रदर्शित करने के लिए स्लाइड चुनें',
+      goto: 'स्लाइड {slide} पर जाएं'
    },
    modal: {
      close: 'बंद करें'
--- a/src/runtime/locale/hu.ts
+++ b/src/runtime/locale/hu.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Előző',
      next: 'Következő',
+      dots: 'Válassza ki a megjelenítendő diát',
      goto: 'Ugrás ide {slide}'
    },
    modal: {
--- a/src/runtime/locale/hy.ts
+++ b/src/runtime/locale/hy.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Հետ',
      next: 'Առաջ',
+      dots: 'Ընտրեք ցուցադրելու սլայդը',
      goto: 'Անցնել {slide}-ին'
    },
    modal: {
--- a/src/runtime/locale/id.ts
+++ b/src/runtime/locale/id.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Sebelumnya',
      next: 'Berikutnya',
+      dots: 'Pilih slide untuk ditampilkan',
      goto: 'Pergi ke slide {slide}'
    },
    modal: {
--- a/src/runtime/locale/it.ts
+++ b/src/runtime/locale/it.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Precedente',
      next: 'Successiva',
+      dots: 'Scegli diapositiva da visualizzare',
      goto: 'Vai alla slide {slide}'
    },
    modal: {
--- a/src/runtime/locale/ja.ts
+++ b/src/runtime/locale/ja.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: '前へ',
      next: '次へ',
+      dots: '表示するスライドを選択',
      goto: 'スライド {slide} に移動'
    },
    modal: {
--- a/src/runtime/locale/kk.ts
+++ b/src/runtime/locale/kk.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Алдыңғы',
      next: 'Келесі',
+      dots: 'Көрсету үшін слайдты таңдаңыз',
      goto: '{slide} слайдқа өту'
    },
    modal: {
--- a/src/runtime/locale/km.ts
+++ b/src/runtime/locale/km.ts
@@ -39,7 +39,8 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'មុន',
      next: 'បន្ទាប់',
-      goto: 'លោតទៅកាន់ស្លាយ {slide}'
+      dots: 'ជ្រើសរើសស្លាយដើម្បីបង្ហាញ',
+      goto: 'ឡើងទៅស្លាយ {slide}'
    },
    modal: {
      close: 'បិទ'
--- a/src/runtime/locale/ko.ts
+++ b/src/runtime/locale/ko.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: '이전',
      next: '다음',
+      dots: '표시할 슬라이드 선택',
      goto: '{slide} 페이지로 이동'
    },
    modal: {
--- a/src/runtime/locale/ky.ts
+++ b/src/runtime/locale/ky.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Алдыңкы',
      next: 'Кийинки',
+      dots: 'Көрсөтүү үчүн слайдды тандаңыз',
      goto: '{slide} слайдга өтүү'
    },
    modal: {
--- a/src/runtime/locale/lb.ts
+++ b/src/runtime/locale/lb.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Präz.',
      next: 'Näch.',
+      dots: 'Wielt Dia fir ze weisen',
      goto: 'Gitt op d\'Slide {Slide}'
    },
    modal: {
--- a/src/runtime/locale/lt.ts
+++ b/src/runtime/locale/lt.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Atgal',
      next: 'Pirmyn',
+      dots: 'Pasirinkite skaidrę rodymui',
      goto: 'Eiti į skaidrę {slide}'
    },
    modal: {
--- a/src/runtime/locale/mn.ts
+++ b/src/runtime/locale/mn.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Өмнөх',
      next: 'Дараах',
+      dots: 'Харуулах слайдыг сонгоно уу',
      goto: '{slide}-р хуудсанд шилжих'
    },
    modal: {
--- a/src/runtime/locale/ms.ts
+++ b/src/runtime/locale/ms.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Sebelum',
      next: 'Seterusnya',
+      dots: 'Pilih slaid untuk dipaparkan',
      goto: 'Pergi ke slaid {slide}'
    },
    modal: {
--- a/src/runtime/locale/nb_no.ts
+++ b/src/runtime/locale/nb_no.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Forrige',
      next: 'Neste',
+      dots: 'Velg lysbilde som skal vises',
      goto: 'Gå til lysbilde {slide}'
    },
    modal: {
--- a/src/runtime/locale/nl.ts
+++ b/src/runtime/locale/nl.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Vorige',
      next: 'Volgende',
+      dots: 'Kies dia om weer te geven',
      goto: 'Ga naar dia {slide}'
    },
    modal: {
--- a/src/runtime/locale/pl.ts
+++ b/src/runtime/locale/pl.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Poprzedni',
      next: 'Następny',
+      dots: 'Wybierz slajd do wyświetlenia',
      goto: 'Idź do {slide}'
    },
    modal: {
--- a/src/runtime/locale/pt.ts
+++ b/src/runtime/locale/pt.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Anterior',
      next: 'Próximo',
+      dots: 'Escolher slide para exibir',
      goto: 'Ir ao diapositivo {slide}'
    },
    modal: {
--- a/src/runtime/locale/pt_br.ts
+++ b/src/runtime/locale/pt_br.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Anterior',
      next: 'Próximo',
+      dots: 'Escolher slide para exibir',
      goto: 'Ir para a slide {slide}'
    },
    modal: {
--- a/src/runtime/locale/ro.ts
+++ b/src/runtime/locale/ro.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Anterior',
      next: 'Următor',
+      dots: 'Alegeți diapozitivul de afișat',
      goto: 'Mergi la diapozitivul {slide}'
    },
    modal: {
--- a/src/runtime/locale/ru.ts
+++ b/src/runtime/locale/ru.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Назад',
      next: 'Далее',
+      dots: 'Выберите слайд для отображения',
      goto: 'Перейти к {slide}'
    },
    modal: {
--- a/src/runtime/locale/sk.ts
+++ b/src/runtime/locale/sk.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Predchádzajúci',
      next: 'Nasledujúci',
+      dots: 'Vyberte snímku na zobrazenie',
      goto: 'Prejsť na {slide}'
    },
    modal: {
--- a/src/runtime/locale/sl.ts
+++ b/src/runtime/locale/sl.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Nazaj',
      next: 'Naprej',
+      dots: 'Izberite diapozitiv za prikaz',
      goto: 'Pojdi na {slide}'
    },
    modal: {
--- a/src/runtime/locale/sv.ts
+++ b/src/runtime/locale/sv.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Föregående',
      next: 'Nästa',
+      dots: 'Välj bild att visa',
      goto: 'Gå till {slide}'
    },
    modal: {
--- a/src/runtime/locale/th.ts
+++ b/src/runtime/locale/th.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'ย้อนกลับ',
      next: 'ถัดไป',
+      dots: 'เลือกสไลด์ที่จะแสดง',
      goto: 'ไปที่ {slide}'
    },
    modal: {
--- a/src/runtime/locale/tj.ts
+++ b/src/runtime/locale/tj.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Қаблӣ',
      next: 'Баъдӣ',
+      dots: 'Слайдро барои намоиш интихоб кунед',
      goto: 'Ба слайди {slide} гузаред'
    },
    modal: {
--- a/src/runtime/locale/tr.ts
+++ b/src/runtime/locale/tr.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Önceki',
      next: 'Sonraki',
+      dots: 'Görüntülenecek slaydı seçin',
      goto: '{slide}. slayda git'
    },
    modal: {
--- a/src/runtime/locale/ug_cn.ts
+++ b/src/runtime/locale/ug_cn.ts
@@ -40,6 +40,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'ئالدىنقى بەت',
      next: 'كېيىنكى بەت',
+      dots: 'كۆرسىتىدىغان سلايدنى تاللاڭ',
      goto: '{slide}-بەتكە ئاتلاش'
    },
    modal: {
--- a/src/runtime/locale/uk.ts
+++ b/src/runtime/locale/uk.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Назад',
      next: 'Далі',
+      dots: 'Виберіть слайд для відображення',
      goto: 'Перейти до {slide}'
    },
    modal: {
--- a/src/runtime/locale/ur.ts
+++ b/src/runtime/locale/ur.ts
@@ -40,6 +40,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'پچھلا',
      next: 'اگلا',
+      dots: 'دکھانے کے لیے سلائیڈ منتخب کریں',
      goto: 'سلائیڈ {slide} پر جائیں'
    },
    modal: {
--- a/src/runtime/locale/uz.ts
+++ b/src/runtime/locale/uz.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Ortga',
      next: 'Oldinga',
+      dots: 'Koʻrsatish uchun slaydni tanlang',
      goto: '{slide}-slaydga o‘tish'
    },
    modal: {
--- a/src/runtime/locale/vi.ts
+++ b/src/runtime/locale/vi.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: 'Trước',
      next: 'Sau',
+      dots: 'Chọn slide để hiển thị',
      goto: 'Đi tới ô {slide}'
    },
    modal: {
--- a/src/runtime/locale/zh_cn.ts
+++ b/src/runtime/locale/zh_cn.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: '上一页',
      next: '下一页',
+      dots: '选择要显示的幻灯片',
      goto: '跳转到第 {slide} 页'
    },
    modal: {
--- a/src/runtime/locale/zh_tw.ts
+++ b/src/runtime/locale/zh_tw.ts
@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
    carousel: {
      prev: '上一頁',
      next: '下一頁',
+      dots: '選擇要顯示的投影片',
      goto: '跳轉到第 {slide} 頁'
    },
    modal: {
--- a/src/runtime/types/locale.ts
+++ b/src/runtime/types/locale.ts
@@ -33,6 +33,7 @@ export type Messages = {
  carousel: {
    prev: string
    next: string
+    dots: string
    goto: string
  }
  modal: {
--- a/test/components/snapshots/Carousel-vue.spec.ts.snap
+++ b/test/components/snapshots/Carousel-vue.spec.ts.snap
@@ -61,17 +61,17 @@ exports[`Carousel > renders with dots correctly 1`] = `
 "<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
  <div class="overflow-hidden">
    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
    </div>
  </div>
  <div class="">
    <!--v-if-->
-    <div class="absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3"></div>
+    <div role="tablist" aria-label="Choose slide to display" class="absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3"></div>
  </div>
 </div>"
 `;
--- a/test/components/snapshots/Carousel.spec.ts.snap
+++ b/test/components/snapshots/Carousel.spec.ts.snap
@@ -61,17 +61,17 @@ exports[`Carousel > renders with dots correctly 1`] = `
 "<div role="region" aria-roledescription="carousel" tabindex="0" class="relative focus:outline-none">
  <div class="overflow-hidden">
    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
-      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=1" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=2" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=3" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=4" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=5" width="300" height="300" class="rounded-lg"></div>
+      <div role="tabpanel" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/600/600?random=6" width="300" height="300" class="rounded-lg"></div>
    </div>
  </div>
  <div class="">
    <!--v-if-->
-    <div class="absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3"></div>
+    <div role="tablist" aria-label="Choose slide to display" class="absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3"></div>
  </div>
 </div>"
 `;