fix(Carousel): improve accessibility

Resolves #4494

Author: benjamincanac

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>

src/runtime/locale/ar.ts

@@ -40,7 +40,8 @@ export default defineLocale<Messages>({
     carousel: {
       prev: 'السابق',
       next: 'التالي',
-      goto: 'الذهاب إلي شريحة {slide}'
+      dots: 'اختر الشريحة المراد عرضها',
+      goto: 'الذهاب إلى شريحة {slide}'
     },
     modal: {
       close: 'إغلاق'

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: {

src/runtime/locale/bg.ts

@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
     carousel: {
       prev: 'Назад',
       next: 'Напред',
+      dots: 'Изберете слайд за показване',
       goto: 'Отидете на слайд {slide}'
     },
     modal: {

src/runtime/locale/bn.ts

@@ -39,6 +39,7 @@ export default defineLocale<Messages>({
     carousel: {
       prev: 'পূর্ববর্তী',
       next: 'পরবর্তী',
+      dots: 'প্রদর্শনের জন্য স্লাইড নির্বাচন করুন',
       goto: 'স্লাইড {slide} এ যান'
     },
     modal: {

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: {

src/runtime/locale/ckb.ts

@@ -38,8 +38,9 @@ export default defineLocale<Messages>({
       close: 'داخستن'
     },
     carousel: {
-      prev: 'پێشوو',
+      prev: 'پێشووی',
       next: 'داهاتوو',
+      dots: 'سلایدێک هەڵبژێرە بۆ پیشاندان',
       goto: 'بڕۆ بۆ سلایدی {slide}'
     },
     modal: {

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: {

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: {

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: {