chore(components): [pagination] accessibility improvement (element-pl…

…us#11817)

* chore(components): [pagination] accessibility improvement

closed element-plus#11730

* test(components): [pagination] fix test

* test: add test

packages/components/pagination/__tests__/pagination.test.tsx

@@ -285,38 +285,37 @@ describe('Pagination', () => {
 
   describe('test a11y supports', () => {
     test('test a11y attributes', async () => {
+      // 1 2 3 4 5 6 ... 10
       const wrapper = mount(() => <Pagination total={100} />)
-      expect(wrapper.find('.el-pagination').attributes('aria-label')).toBe(
-        'pagination'
+      const prev = wrapper.find('.el-pagination .btn-prev')
+      const next = wrapper.find('.el-pagination .btn-next')
+      const pagers = wrapper.findAll('.el-pagination .el-pager .number')
+      const first = pagers[0]
+      const last = pagers[pagers.length - 1]
+
+      expect(prev.attributes('aria-label')).toBe('Go to previous page')
+      expect(next.attributes('aria-label')).toBe('Go to next page')
+      expect(last.attributes('aria-label')).toBe('page 10')
+      pagers.slice(0, 6).forEach((item, index) => {
+        expect(item.attributes('aria-label')).toBe(`page ${index + 1}`)
+      })
+      expect(wrapper.find('.more').attributes('aria-label')).toBe(
+        'Next 5 pages'
       )
-      expect(wrapper.find('.el-pagination').attributes('role')).toBe(
-        'pagination'
+
+      expect(prev.attributes('aria-disabled')).toBe('true')
+      expect(next.attributes('aria-disabled')).toBe('false')
+      expect(first.attributes('aria-current')).toBe('true')
+      expect(last.attributes('aria-current')).toBe('false')
+
+      await last.trigger('click')
+      expect(prev.attributes('aria-disabled')).toBe('false')
+      expect(next.attributes('aria-disabled')).toBe('true')
+      expect(first.attributes('aria-current')).toBe('false')
+      expect(last.attributes('aria-current')).toBe('true')
+      expect(wrapper.find('.more').attributes('aria-label')).toBe(
+        'Previous 5 pages'
       )
-      expect(
-        wrapper.find('.el-pagination .btn-prev').attributes('aria-disabled')
-      ).toBe('true')
-      expect(
-        wrapper.find('.el-pagination .btn-next').attributes('aria-disabled')
-      ).toBe('false')
-      expect(
-        wrapper.find('.el-pager li:first-child').attributes('aria-current')
-      ).toBe('true')
-      expect(
-        wrapper.find('.el-pager li:last-child').attributes('aria-current')
-      ).toBe('false')
-      await wrapper.find('.el-pager li:last-child').trigger('click')
-      expect(
-        wrapper.find('.el-pagination .btn-prev').attributes('aria-disabled')
-      ).toBe('false')
-      expect(
-        wrapper.find('.el-pagination .btn-next').attributes('aria-disabled')
-      ).toBe('true')
-      expect(
-        wrapper.find('.el-pager li:first-child').attributes('aria-current')
-      ).toBe('false')
-      expect(
-        wrapper.find('.el-pager li:last-child').attributes('aria-current')
-      ).toBe('true')
     })
 
     test('test tabindex interactive', async () => {

packages/components/pagination/src/components/jumper.vue

@@ -9,6 +9,7 @@
       :disabled="disabled"
       :model-value="innerValue"
       :validate-event="false"
+      :label="t('el.pagination.page')"
       type="number"
       @update:model-value="handleInput"
       @change="handleChange"

packages/components/pagination/src/components/next.vue

@@ -3,6 +3,7 @@
     type="button"
     class="btn-next"
     :disabled="internalDisabled"
+    :aria-label="nextText || t('el.pagination.next')"
     :aria-disabled="internalDisabled"
     @click="$emit('click', $event)"
   >
@@ -15,6 +16,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { useLocale } from '@element-plus/hooks'
 import { ElIcon } from '@element-plus/components/icon'
 import { paginationNextProps } from './next'
 
@@ -26,6 +28,8 @@ const props = defineProps(paginationNextProps)
 
 defineEmits(['click'])
 
+const { t } = useLocale()
+
 const internalDisabled = computed(
   () =>
     props.disabled ||

packages/components/pagination/src/components/pager.vue

@@ -8,6 +8,7 @@
       ]"
       class="number"
       :aria-current="currentPage === 1"
+      :aria-label="t('el.pagination.currentPage', { pager: 1 })"
       :tabindex="tabindex"
     >
       1
@@ -21,6 +22,7 @@
         nsPager.is('disabled', disabled),
       ]"
       :tabindex="tabindex"
+      :aria-label="t('el.pagination.prevPages', { pager: pagerCount - 2 })"
       @mouseenter="onMouseEnter(true)"
       @mouseleave="quickPrevHover = false"
       @focus="onFocus(true)"
@@ -38,6 +40,7 @@
       ]"
       class="number"
       :aria-current="currentPage === pager"
+      :aria-label="t('el.pagination.currentPage', { pager })"
       :tabindex="tabindex"
     >
       {{ pager }}
@@ -51,6 +54,7 @@
         nsPager.is('disabled', disabled),
       ]"
       :tabindex="tabindex"
+      :aria-label="t('el.pagination.nextPages', { pager: pagerCount - 2 })"
       @mouseenter="onMouseEnter()"
       @mouseleave="quickNextHover = false"
       @focus="onFocus()"
@@ -67,6 +71,7 @@
       ]"
       class="number"
       :aria-current="currentPage === pageCount"
+      :aria-label="t('el.pagination.currentPage', { pager: pageCount })"
       :tabindex="tabindex"
     >
       {{ pageCount }}
@@ -76,7 +81,7 @@
 <script lang="ts" setup>
 import { computed, ref, watchEffect } from 'vue'
 import { DArrowLeft, DArrowRight, MoreFilled } from '@element-plus/icons-vue'
-import { useNamespace } from '@element-plus/hooks'
+import { useLocale, useNamespace } from '@element-plus/hooks'
 import { paginationPagerProps } from './pager'
 defineOptions({
   name: 'ElPaginationPager',
@@ -85,6 +90,8 @@ const props = defineProps(paginationPagerProps)
 const emit = defineEmits(['change'])
 const nsPager = useNamespace('pager')
 const nsIcon = useNamespace('icon')
+const { t } = useLocale()
+
 const showPrevMore = ref(false)
 const showNextMore = ref(false)
 const quickPrevHover = ref(false)

packages/components/pagination/src/components/prev.vue

@@ -3,6 +3,7 @@
     type="button"
     class="btn-prev"
     :disabled="internalDisabled"
+    :aria-label="prevText || t('el.pagination.prev')"
     :aria-disabled="internalDisabled"
     @click="$emit('click', $event)"
   >
@@ -15,6 +16,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { useLocale } from '@element-plus/hooks'
 import { ElIcon } from '@element-plus/components/icon'
 import { paginationPrevEmits, paginationPrevProps } from './prev'
 
@@ -25,6 +27,8 @@ defineOptions({
 const props = defineProps(paginationPrevProps)
 defineEmits(paginationPrevEmits)
 
+const { t } = useLocale()
+
 const internalDisabled = computed(
   () => props.disabled || props.currentPage <= 1
 )

packages/components/pagination/src/pagination.ts

@@ -407,8 +407,6 @@ export default defineComponent({
       return h(
         'div',
         {
-          role: 'pagination',
-          'aria-label': 'pagination',
           class: [
             ns.b(),
             ns.is('background', props.background),

packages/locale/lang/af.ts

@@ -76,6 +76,12 @@ export default {
       pagesize: '/page',
       total: 'Totaal {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
     },
     messagebox: {
       title: 'Boodskap',

packages/locale/lang/ar.ts

@@ -89,6 +89,12 @@ export default {
       pagesize: '/صفحة',
       total: 'الكل {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
     },
     dialog: {
       close: 'أغلق هذا التبويب',

packages/locale/lang/az.ts

@@ -76,6 +76,12 @@ export default {
       pagesize: '/səhifə',
       total: 'Toplam {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
     },
     messagebox: {
       title: 'Mesaj',

packages/locale/lang/bg.ts

@@ -76,6 +76,12 @@ export default {
       pagesize: '/страница',
       total: 'Общо {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
     },
     messagebox: {
       title: 'Съобщение',

packages/locale/lang/bn.ts

@@ -76,6 +76,12 @@ export default {
       pagesize: '/পেজ',
       total: 'মোট {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
       deprecationWarning:
         'অপ্রচলিত (Deprecated) ব্যাবহার পওয়া গেছে, আরও জানতে চাইলে, দয়া করে el-pagination এর ডকুমেন্টেশন দেখুন',
     },

packages/locale/lang/ca.ts

@@ -76,6 +76,12 @@ export default {
       pagesize: '/pàgina',
       total: 'Total {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
     },
     messagebox: {
       confirm: 'Acceptar',

packages/locale/lang/ckb.ts

@@ -100,6 +100,12 @@ export default {
       pagesize: '/لاپەڕە',
       total: 'کۆی گشتیی {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
       deprecationWarning:
         'بەکارهێنانی بەکارنەهێنراو دۆزراوەتەوە، تکایە بۆ وردەکاری زیاتر سەردانی بەڵگەنامەکانی el-pagination بکە',
     },

packages/locale/lang/cs.ts

@@ -78,6 +78,12 @@ export default {
       pagesize: 'na stranu',
       total: 'Celkem {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
     },
     messagebox: {
       title: 'Zpráva',

packages/locale/lang/da.ts

@@ -76,6 +76,12 @@ export default {
       pagesize: '/side',
       total: 'Total {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
     },
     messagebox: {
       confirm: 'OK',

packages/locale/lang/de.ts

@@ -78,6 +78,12 @@ export default {
       pagesize: ' pro Seite',
       total: 'Gesamt {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
     },
     messagebox: {
       confirm: 'OK',

packages/locale/lang/el.ts

@@ -76,6 +76,12 @@ export default {
       pagesize: '/σελίδα',
       total: 'Σύνολο {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
     },
     messagebox: {
       title: 'Μήνυμα',

packages/locale/lang/en.ts

@@ -100,6 +100,12 @@ export default {
       pagesize: '/page',
       total: 'Total {total}',
       pageClassifier: '',
+      page: 'Page',
+      prev: 'Go to previous page',
+      next: 'Go to next page',
+      currentPage: 'page {pager}',
+      prevPages: 'Previous {pager} pages',
+      nextPages: 'Next {pager} pages',
       deprecationWarning:
         'Deprecated usages detected, please refer to the el-pagination documentation for more details',
     },

packages/locale/lang/eo.ts

@@ -76,6 +76,12 @@ export default {
       pagesize: '/ paĝo',
       total: 'Entute {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
     },
     messagebox: {
       title: 'Mesaĝo',

packages/locale/lang/es.ts

@@ -76,6 +76,12 @@ export default {
       pagesize: '/página',
       total: 'Total {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
     },
     messagebox: {
       confirm: 'Aceptar',

packages/locale/lang/et.ts

@@ -76,6 +76,12 @@ export default {
       pagesize: '/page',
       total: 'Kokku {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
     },
     messagebox: {
       title: 'Teade',

packages/locale/lang/eu.ts

@@ -76,6 +76,12 @@ export default {
       pagesize: '/orria',
       total: 'Guztira {total}',
       pageClassifier: '',
+      page: 'Page', // to be translated
+      prev: 'Go to previous page', // to be translated
+      next: 'Go to next page', // to be translated
+      currentPage: 'page {pager}', // to be translated
+      prevPages: 'Previous {pager} pages', // to be translated
+      nextPages: 'Next {pager} pages', // to be translated
     },
     messagebox: {
       title: 'Mezua',