fix(components): [carousel] improve a11y (#15579)

* fix(a11y): carousel buttons do not have an accessible name * fix: eslint warnings * chore: change the label content * feat: improve i18n
2024-11-27 02:01:15 +08:00 · 2024-02-03 14:03:41 +08:00 · 2024-02-03 14:03:41 +08:00 · 73f4d0f57b
commit 73f4d0f57b
parent c46fe7f080
60 changed files with 304 additions and 2 deletions
--- a/packages/components/carousel/src/carousel.vue
+++ b/packages/components/carousel/src/carousel.vue
@ -13,6 +13,7 @@
          "
          type="button"
          :class="[ns.e('arrow'), ns.em('arrow', 'left')]"
+          :aria-label="t('el.carousel.leftArrow')"
          @mouseenter="handleButtonEnter('left')"
          @mouseleave="handleButtonLeave"
          @click.stop="throttledArrowClick(activeIndex - 1)"
@ -30,6 +31,7 @@
          "
          type="button"
          :class="[ns.e('arrow'), ns.em('arrow', 'right')]"
+          :aria-label="t('el.carousel.rightArrow')"
          @mouseenter="handleButtonEnter('right')"
          @mouseleave="handleButtonLeave"
          @click.stop="throttledArrowClick(activeIndex + 1)"
@ -55,7 +57,10 @@
        @mouseenter="throttledIndicatorHover(index)"
        @click.stop="handleIndicatorClick(index)"
      >
-        <button :class="ns.e('button')">
+        <button
+          :class="ns.e('button')"
+          :aria-label="t('el.carousel.indicator', { index: index + 1 })"
+        >
          <span v-if="hasLabel">{{ item.props.label }}</span>
        </button>
      </li>
@ -67,7 +72,7 @@
 import { computed, unref } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
 import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
-import { useNamespace } from '@element-plus/hooks'
+import { useLocale, useNamespace } from '@element-plus/hooks'
 import { carouselEmits, carouselProps } from './carousel'
 import { useCarousel } from './use-carousel'

@ -103,6 +108,8 @@ const {
 } = useCarousel(props, emit, COMPONENT_NAME)
 const ns = useNamespace('carousel')

+const { t } = useLocale()
+
 const carouselClasses = computed(() => {
  const classes = [ns.b(), ns.m(props.direction)]
  if (unref(isCardType)) {
--- a/packages/locale/lang/af.ts
+++ b/packages/locale/lang/af.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/ar-eg.ts
+++ b/packages/locale/lang/ar-eg.ts
@ -148,5 +148,10 @@ export default {
      confirmButtonText: 'نعم',
      cancelButtonText: 'لا',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/ar.ts
+++ b/packages/locale/lang/ar.ts
@ -143,5 +143,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/az.ts
+++ b/packages/locale/lang/az.ts
@ -126,5 +126,10 @@ export default {
    empty: {
      description: 'Məlumat yoxdur',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/bg.ts
+++ b/packages/locale/lang/bg.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/bn.ts
+++ b/packages/locale/lang/bn.ts
@ -125,5 +125,10 @@ export default {
      confirmButtonText: 'হ্যা',
      cancelButtonText: 'না',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/ca.ts
+++ b/packages/locale/lang/ca.ts
@ -122,5 +122,10 @@ export default {
      confirmButtonText: 'Sí',
      cancelButtonText: 'No',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/ckb.ts
+++ b/packages/locale/lang/ckb.ts
@ -161,5 +161,10 @@ export default {
      confirmButtonText: 'بەڵێ',
      cancelButtonText: 'نەخێر',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/cs.ts
+++ b/packages/locale/lang/cs.ts
@ -125,5 +125,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/da.ts
+++ b/packages/locale/lang/da.ts
@ -122,5 +122,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/de.ts
+++ b/packages/locale/lang/de.ts
@ -129,5 +129,10 @@ export default {
      confirmButtonText: 'Ja',
      cancelButtonText: 'Nein',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/el.ts
+++ b/packages/locale/lang/el.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/en.ts
+++ b/packages/locale/lang/en.ts
@ -166,5 +166,10 @@ export default {
      confirmButtonText: 'Yes',
      cancelButtonText: 'No',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left',
+      rightArrow: 'Carousel arrow right',
+      indicator: 'Carousel switch to index {index}',
+    },
  },
 }
--- a/packages/locale/lang/eo.ts
+++ b/packages/locale/lang/eo.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/es.ts
+++ b/packages/locale/lang/es.ts
@ -122,5 +122,10 @@ export default {
      confirmButtonText: 'Si',
      cancelButtonText: 'No',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/et.ts
+++ b/packages/locale/lang/et.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Jah',
      cancelButtonText: 'Ei',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/eu.ts
+++ b/packages/locale/lang/eu.ts
@ -128,5 +128,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/fa.ts
+++ b/packages/locale/lang/fa.ts
@ -128,5 +128,10 @@ export default {
      confirmButtonText: 'بله',
      cancelButtonText: 'خیر',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/fi.ts
+++ b/packages/locale/lang/fi.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/fr.ts
+++ b/packages/locale/lang/fr.ts
@ -160,5 +160,10 @@ export default {
      confirmButtonText: 'Oui',
      cancelButtonText: 'Non',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/he.ts
+++ b/packages/locale/lang/he.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'כן',
      cancelButtonText: 'לא',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/hr.ts
+++ b/packages/locale/lang/hr.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/hu.ts
+++ b/packages/locale/lang/hu.ts
@ -122,5 +122,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/hy-am.ts
+++ b/packages/locale/lang/hy-am.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/id.ts
+++ b/packages/locale/lang/id.ts
@ -125,5 +125,10 @@ export default {
      confirmButtonText: 'Ya',
      cancelButtonText: 'Tidak',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/it.ts
+++ b/packages/locale/lang/it.ts
@ -122,5 +122,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/ja.ts
+++ b/packages/locale/lang/ja.ts
@ -128,5 +128,10 @@ export default {
      confirmButtonText: 'はい',
      cancelButtonText: 'いいえ',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/kk.ts
+++ b/packages/locale/lang/kk.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/km.ts
+++ b/packages/locale/lang/km.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'យល់ព្រម',
      cancelButtonText: 'មិនព្រម',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/ko.ts
+++ b/packages/locale/lang/ko.ts
@ -156,5 +156,10 @@ export default {
      confirmButtonText: '예',
      cancelButtonText: '아니오',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/ku.ts
+++ b/packages/locale/lang/ku.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/ky.ts
+++ b/packages/locale/lang/ky.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/lt.ts
+++ b/packages/locale/lang/lt.ts
@ -128,5 +128,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/lv.ts
+++ b/packages/locale/lang/lv.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/mg.ts
+++ b/packages/locale/lang/mg.ts
@ -125,5 +125,10 @@ export default {
      confirmButtonText: 'Eny',
      cancelButtonText: 'Tsy',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/mn.ts
+++ b/packages/locale/lang/mn.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/nb-no.ts
+++ b/packages/locale/lang/nb-no.ts
@ -122,5 +122,10 @@ export default {
      confirmButtonText: 'Ja',
      cancelButtonText: 'Nei',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/nl.ts
+++ b/packages/locale/lang/nl.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Ja',
      cancelButtonText: 'Nee',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/pa.ts
+++ b/packages/locale/lang/pa.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/pl.ts
+++ b/packages/locale/lang/pl.ts
@ -128,5 +128,10 @@ export default {
      confirmButtonText: 'Tak',
      cancelButtonText: 'Nie',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/pt-br.ts
+++ b/packages/locale/lang/pt-br.ts
@ -128,5 +128,10 @@ export default {
      confirmButtonText: 'Sim',
      cancelButtonText: 'Não',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/pt.ts
+++ b/packages/locale/lang/pt.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/ro.ts
+++ b/packages/locale/lang/ro.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/ru.ts
+++ b/packages/locale/lang/ru.ts
@ -128,5 +128,10 @@ export default {
      confirmButtonText: 'OK',
      cancelButtonText: 'Отмена',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/sk.ts
+++ b/packages/locale/lang/sk.ts
@ -125,5 +125,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/sl.ts
+++ b/packages/locale/lang/sl.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/sr.ts
+++ b/packages/locale/lang/sr.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Да',
      cancelButtonText: 'Не',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/sv.ts
+++ b/packages/locale/lang/sv.ts
@ -128,5 +128,10 @@ export default {
      confirmButtonText: 'Ja',
      cancelButtonText: 'Nej',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/sw.ts
+++ b/packages/locale/lang/sw.ts
@ -162,5 +162,10 @@ export default {
      confirmButtonText: 'ndio',
      cancelButtonText: 'hapana',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/ta.ts
+++ b/packages/locale/lang/ta.ts
@ -122,5 +122,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/th.ts
+++ b/packages/locale/lang/th.ts
@ -128,5 +128,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/tk.ts
+++ b/packages/locale/lang/tk.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/tr.ts
+++ b/packages/locale/lang/tr.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Evet',
      cancelButtonText: 'Hayır',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/ug-cn.ts
+++ b/packages/locale/lang/ug-cn.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/uk.ts
+++ b/packages/locale/lang/uk.ts
@ -128,5 +128,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/uz-uz.ts
+++ b/packages/locale/lang/uz-uz.ts
@ -123,5 +123,10 @@ export default {
      confirmButtonText: 'Yes', // to be translated
      cancelButtonText: 'No', // to be translated
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/vi.ts
+++ b/packages/locale/lang/vi.ts
@ -128,5 +128,10 @@ export default {
      confirmButtonText: 'Ok',
      cancelButtonText: 'Huỷ',
    },
+    carousel: {
+      leftArrow: 'Carousel arrow left', // to be translated
+      rightArrow: 'Carousel arrow right', // to be translated
+      indicator: 'Carousel switch to index {index}', // to be translated
+    },
  },
 }
--- a/packages/locale/lang/zh-cn.ts
+++ b/packages/locale/lang/zh-cn.ts
@ -130,5 +130,10 @@ export default {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    },
+    carousel: {
+      leftArrow: '上一张幻灯片',
+      rightArrow: '下一张幻灯片',
+      indicator: '幻灯片切换至索引 {index}',
+    },
  },
 }
--- a/packages/locale/lang/zh-tw.ts
+++ b/packages/locale/lang/zh-tw.ts
@ -164,5 +164,10 @@ export default {
      confirmButtonText: '確認',
      cancelButtonText: '取消',
    },
+    carousel: {
+      leftArrow: '上一張投影片',
+      rightArrow: '下一張投影片',
+      indicator: '投影片切換至索引 {index}',
+    },
  },
 }