From 55e06e97e7739d7f08cfd15425a4be10596e6d6a Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 10 Jul 2025 14:18:34 +0200
Subject: [PATCH] fix(Carousel): improve accessibility

Resolves #4494
---
 src/runtime/components/Carousel.vue                |  9 +++++----
 src/runtime/locale/ar.ts                           |  3 ++-
 src/runtime/locale/az.ts                           |  1 +
 src/runtime/locale/bg.ts                           |  1 +
 src/runtime/locale/bn.ts                           |  1 +
 src/runtime/locale/ca.ts                           |  1 +
 src/runtime/locale/ckb.ts                          |  3 ++-
 src/runtime/locale/cs.ts                           |  1 +
 src/runtime/locale/da.ts                           |  1 +
 src/runtime/locale/de.ts                           |  1 +
 src/runtime/locale/el.ts                           |  1 +
 src/runtime/locale/en.ts                           |  1 +
 src/runtime/locale/es.ts                           |  1 +
 src/runtime/locale/et.ts                           |  1 +
 src/runtime/locale/fa_ir.ts                        |  1 +
 src/runtime/locale/fi.ts                           |  1 +
 src/runtime/locale/fr.ts                           |  1 +
 src/runtime/locale/he.ts                           |  1 +
 src/runtime/locale/hi.ts                           |  3 ++-
 src/runtime/locale/hu.ts                           |  1 +
 src/runtime/locale/hy.ts                           |  1 +
 src/runtime/locale/id.ts                           |  1 +
 src/runtime/locale/it.ts                           |  1 +
 src/runtime/locale/ja.ts                           |  1 +
 src/runtime/locale/kk.ts                           |  1 +
 src/runtime/locale/km.ts                           |  3 ++-
 src/runtime/locale/ko.ts                           |  1 +
 src/runtime/locale/ky.ts                           |  1 +
 src/runtime/locale/lb.ts                           |  1 +
 src/runtime/locale/lt.ts                           |  1 +
 src/runtime/locale/mn.ts                           |  1 +
 src/runtime/locale/ms.ts                           |  1 +
 src/runtime/locale/nb_no.ts                        |  1 +
 src/runtime/locale/nl.ts                           |  1 +
 src/runtime/locale/pl.ts                           |  1 +
 src/runtime/locale/pt.ts                           |  1 +
 src/runtime/locale/pt_br.ts                        |  1 +
 src/runtime/locale/ro.ts                           |  1 +
 src/runtime/locale/ru.ts                           |  1 +
 src/runtime/locale/sk.ts                           |  1 +
 src/runtime/locale/sl.ts                           |  1 +
 src/runtime/locale/sv.ts                           |  1 +
 src/runtime/locale/th.ts                           |  1 +
 src/runtime/locale/tj.ts                           |  1 +
 src/runtime/locale/tr.ts                           |  1 +
 src/runtime/locale/ug_cn.ts                        |  1 +
 src/runtime/locale/uk.ts                           |  1 +
 src/runtime/locale/ur.ts                           |  1 +
 src/runtime/locale/uz.ts                           |  1 +
 src/runtime/locale/vi.ts                           |  1 +
 src/runtime/locale/zh_cn.ts                        |  1 +
 src/runtime/locale/zh_tw.ts                        |  1 +
 src/runtime/types/locale.ts                        |  1 +
 .../__snapshots__/Carousel-vue.spec.ts.snap        | 14 +++++++-------
 .../components/__snapshots__/Carousel.spec.ts.snap | 14 +++++++-------
 55 files changed, 75 insertions(+), 22 deletions(-)

diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue
index 3e562744..3a4ab78c 100644
--- 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>
diff --git a/src/runtime/locale/ar.ts b/src/runtime/locale/ar.ts
index b102b5cd..8739521c 100644
--- 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: 'إغلاق'
diff --git a/src/runtime/locale/az.ts b/src/runtime/locale/az.ts
index a9bdb86f..64d16d93 100644
--- 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: {
diff --git a/src/runtime/locale/bg.ts b/src/runtime/locale/bg.ts
index ead65c6b..7c7caafb 100644
--- 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: {
diff --git a/src/runtime/locale/bn.ts b/src/runtime/locale/bn.ts
index 43b5cc87..1a88ca23 100644
--- 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: {
diff --git a/src/runtime/locale/ca.ts b/src/runtime/locale/ca.ts
index 653db71f..23537561 100644
--- 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: {
diff --git a/src/runtime/locale/ckb.ts b/src/runtime/locale/ckb.ts
index 3919d539..3b92732d 100644
--- 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: {
diff --git a/src/runtime/locale/cs.ts b/src/runtime/locale/cs.ts
index a3eaca70..87752a17 100644
--- 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: {
diff --git a/src/runtime/locale/da.ts b/src/runtime/locale/da.ts
index 3917aa7a..79c0db2f 100644
--- 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: {
diff --git a/src/runtime/locale/de.ts b/src/runtime/locale/de.ts
index b6231696..397de375 100644
--- 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: {
diff --git a/src/runtime/locale/el.ts b/src/runtime/locale/el.ts
index 9f6645ad..39d8a6c4 100644
--- 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: {
diff --git a/src/runtime/locale/en.ts b/src/runtime/locale/en.ts
index 6bf0f3d7..2734b468 100644
--- 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: {
diff --git a/src/runtime/locale/es.ts b/src/runtime/locale/es.ts
index d455f89e..a2bbc60f 100644
--- 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: {
diff --git a/src/runtime/locale/et.ts b/src/runtime/locale/et.ts
index ee192acc..d1237587 100644
--- 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: {
diff --git a/src/runtime/locale/fa_ir.ts b/src/runtime/locale/fa_ir.ts
index ebc6c9e7..84a4f9a4 100644
--- 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: {
diff --git a/src/runtime/locale/fi.ts b/src/runtime/locale/fi.ts
index 9e1701a3..de370ebc 100644
--- 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: {
diff --git a/src/runtime/locale/fr.ts b/src/runtime/locale/fr.ts
index cd547aab..3b69821d 100644
--- 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: {
diff --git a/src/runtime/locale/he.ts b/src/runtime/locale/he.ts
index 2d010ba2..36f743a6 100644
--- 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: {
diff --git a/src/runtime/locale/hi.ts b/src/runtime/locale/hi.ts
index 22da4584..ec69400d 100644
--- 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: 'बंद करें'
diff --git a/src/runtime/locale/hu.ts b/src/runtime/locale/hu.ts
index 947c597a..4152dc3f 100644
--- 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: {
diff --git a/src/runtime/locale/hy.ts b/src/runtime/locale/hy.ts
index abf5d942..d296d543 100644
--- 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: {
diff --git a/src/runtime/locale/id.ts b/src/runtime/locale/id.ts
index 96d201c2..401b9681 100644
--- 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: {
diff --git a/src/runtime/locale/it.ts b/src/runtime/locale/it.ts
index 9b334827..a2bc323a 100644
--- 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: {
diff --git a/src/runtime/locale/ja.ts b/src/runtime/locale/ja.ts
index e469ecc7..2525f7f6 100644
--- 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: {
diff --git a/src/runtime/locale/kk.ts b/src/runtime/locale/kk.ts
index a1781c87..d2c1ccfd 100644
--- 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: {
diff --git a/src/runtime/locale/km.ts b/src/runtime/locale/km.ts
index 849fca47..41f7f8fe 100644
--- 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: 'បិទ'
diff --git a/src/runtime/locale/ko.ts b/src/runtime/locale/ko.ts
index 2122b5ab..16e0d3b8 100644
--- 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: {
diff --git a/src/runtime/locale/ky.ts b/src/runtime/locale/ky.ts
index 5a3eee83..4aa91484 100644
--- 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: {
diff --git a/src/runtime/locale/lb.ts b/src/runtime/locale/lb.ts
index e94cacd9..b5eb2c8e 100644
--- 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: {
diff --git a/src/runtime/locale/lt.ts b/src/runtime/locale/lt.ts
index 6bed04d0..4c215a35 100644
--- 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: {
diff --git a/src/runtime/locale/mn.ts b/src/runtime/locale/mn.ts
index f8b3cac8..2b02c1ec 100644
--- 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: {
diff --git a/src/runtime/locale/ms.ts b/src/runtime/locale/ms.ts
index ad1e3e28..b03bba8d 100644
--- 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: {
diff --git a/src/runtime/locale/nb_no.ts b/src/runtime/locale/nb_no.ts
index 04666562..a34b92e0 100644
--- 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: {
diff --git a/src/runtime/locale/nl.ts b/src/runtime/locale/nl.ts
index 5ca10ee9..9b815a0b 100644
--- 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: {
diff --git a/src/runtime/locale/pl.ts b/src/runtime/locale/pl.ts
index 809dd5df..4794b592 100644
--- 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: {
diff --git a/src/runtime/locale/pt.ts b/src/runtime/locale/pt.ts
index f79ccc57..318fb40a 100644
--- 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: {
diff --git a/src/runtime/locale/pt_br.ts b/src/runtime/locale/pt_br.ts
index 31929ee5..ab31ad20 100644
--- 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: {
diff --git a/src/runtime/locale/ro.ts b/src/runtime/locale/ro.ts
index a1bb59a0..135fc5ac 100644
--- 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: {
diff --git a/src/runtime/locale/ru.ts b/src/runtime/locale/ru.ts
index a68e134a..57b3cb08 100644
--- 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: {
diff --git a/src/runtime/locale/sk.ts b/src/runtime/locale/sk.ts
index 3f24e340..c781e94a 100644
--- 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: {
diff --git a/src/runtime/locale/sl.ts b/src/runtime/locale/sl.ts
index 199b77a1..36ca9bf3 100644
--- 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: {
diff --git a/src/runtime/locale/sv.ts b/src/runtime/locale/sv.ts
index 409f1d28..e729289d 100644
--- 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: {
diff --git a/src/runtime/locale/th.ts b/src/runtime/locale/th.ts
index a840a787..42d4ee2d 100644
--- 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: {
diff --git a/src/runtime/locale/tj.ts b/src/runtime/locale/tj.ts
index f2d20f96..580040be 100644
--- 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: {
diff --git a/src/runtime/locale/tr.ts b/src/runtime/locale/tr.ts
index 4066b98d..d5c0943c 100644
--- 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: {
diff --git a/src/runtime/locale/ug_cn.ts b/src/runtime/locale/ug_cn.ts
index 845e989d..8acb37c2 100644
--- 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: {
diff --git a/src/runtime/locale/uk.ts b/src/runtime/locale/uk.ts
index 3613b9f6..71530b6a 100644
--- 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: {
diff --git a/src/runtime/locale/ur.ts b/src/runtime/locale/ur.ts
index cb10c222..9c06b052 100644
--- 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: {
diff --git a/src/runtime/locale/uz.ts b/src/runtime/locale/uz.ts
index 81dd6fae..d13dc3eb 100644
--- 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: {
diff --git a/src/runtime/locale/vi.ts b/src/runtime/locale/vi.ts
index e7350773..62b770b1 100644
--- 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: {
diff --git a/src/runtime/locale/zh_cn.ts b/src/runtime/locale/zh_cn.ts
index 5bc2c85c..a521e1d2 100644
--- 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: {
diff --git a/src/runtime/locale/zh_tw.ts b/src/runtime/locale/zh_tw.ts
index 16af4db9..2ebc83e4 100644
--- 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: {
diff --git a/src/runtime/types/locale.ts b/src/runtime/types/locale.ts
index 8103dbb7..9ad8c1dc 100644
--- 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: {
diff --git a/test/components/__snapshots__/Carousel-vue.spec.ts.snap b/test/components/__snapshots__/Carousel-vue.spec.ts.snap
index bc18e3a0..ed7124c5 100644
--- 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>"
 `;
diff --git a/test/components/__snapshots__/Carousel.spec.ts.snap b/test/components/__snapshots__/Carousel.spec.ts.snap
index 7041f9eb..d1bd82f7 100644
--- 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>"
 `;