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

* fix(a11y): carousel buttons do not have an accessible name * fix: eslint warnings * chore: change the label content * feat: improve i18n
huster-zj · Feb 3, 2024 · 73f4d0f · 73f4d0f
1 parent c46fe7f
commit 73f4d0f
Show file tree

Hide file tree

Showing 60 changed files with 304 additions and 2 deletions.
diff --git 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)) {

diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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}',
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }
diff --git 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
+    },
   },
 }