fix(VDatatable): Add aria-labels for select and sort control elements

packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx

@@ -115,6 +115,19 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
       return item.order === 'asc' ? props.sortAscIcon : props.sortDescIcon
     }
 
+    function getSortedAriaLabel (column: InternalDataTableHeader) {
+      if (!isSorted(column)) {
+        return t('$vuetify.dataTable.ariaLabel.sortNone')
+      }
+      const item = sortBy.value.find(item => item.key === column.key)
+
+      if (!item) {
+        return t('$vuetify.dataTable.ariaLabel.sortAscending')
+      }
+
+      return item.order === 'asc' ? t('$vuetify.dataTable.ariaLabel.sortAscending') : t('$vuetify.dataTable.ariaLabel.sortDescending')
+    }
+
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color)
 
     const { displayClasses, mobile } = useDisplay(props)
@@ -140,6 +153,16 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
       loaderClasses.value,
     ]))
 
+    function getSelectedAreaLabel () {
+      if (allSelected.value) {
+        return t('$vuetify.dataTable.ariaLabel.allRowsSelected')
+      }
+      if (someSelected.value) {
+        return t('$vuetify.dataTable.ariaLabel.someRowsSelected')
+      }
+      return t('$vuetify.dataTable.ariaLabel.noRowSelected')
+    }
+
     const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => {
       const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand'
       const headerProps = mergeProps(props.headerProps ?? {}, column.headerProps ?? {})
@@ -194,6 +217,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
                     modelValue={ allSelected.value }
                     indeterminate={ someSelected.value && !allSelected.value }
                     onUpdate:modelValue={ selectAll }
+                    aria-label={ getSelectedAreaLabel() }
                   />
                 ))
               }
@@ -206,6 +230,8 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
                       key="icon"
                       class="v-data-table-header__sort-icon"
                       icon={ getSortIcon(column) }
+                      aria-label={ getSortedAriaLabel(column) }
+
                     />
                   )}
                   { props.multiSort && isSorted(column) && (
@@ -262,7 +288,6 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
               variant="underlined"
               onClick:clear={ () => sortBy.value = [] }
               appendIcon={ appendIcon.value }
-              onClick:append={ () => selectAll(!allSelected.value) }
             >
               {{
                 ...slots,

packages/vuetify/src/components/VDataTable/VDataTableRow.tsx

@@ -9,6 +9,7 @@ import { useHeaders } from './composables/headers'
 import { useSelection } from './composables/select'
 import { useSort } from './composables/sort'
 import { makeDisplayProps, useDisplay } from '@/composables/display'
+import { useLocale } from '@/composables/locale'
 
 // Utilities
 import { toDisplayString, withModifiers } from 'vue'
@@ -57,12 +58,18 @@ export const VDataTableRow = genericComponent<new <T>(
   props: makeVDataTableRowProps(),
 
   setup (props, { slots }) {
+    const { t } = useLocale()
     const { displayClasses, mobile } = useDisplay(props, 'v-data-table__tr')
     const { isSelected, toggleSelect, someSelected, allSelected, selectAll } = useSelection()
     const { isExpanded, toggleExpand } = useExpanded()
     const { toggleSort, sortBy, isSorted } = useSort()
     const { columns } = useHeaders()
 
+    function getSelectedAreaLabel (item: any) {
+      const identifier = isSelected([item]) ? '$vuetify.dataTable.ariaLabel.rowSelected' : '$vuetify.dataTable.ariaLabel.rowNotSelected'
+      return t(identifier, props.index ? props.index + 1 : 1)
+    }
+
     useRender(() => (
       <tr
         class={[
@@ -156,6 +163,7 @@ export const VDataTableRow = genericComponent<new <T>(
                           (event: Event) => toggleSelect(item, props.index, event as PointerEvent),
                           ['stop']
                         )}
+                        aria-label={ getSelectedAreaLabel(item) }
                       />
                     )
                   }

packages/vuetify/src/locale/af.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Aktiveer om sortering te verwyder.',
       activateDescending: 'Aktiveer om aflopend te sorteer.',
       activateAscending: 'Aktiveer om oplopend te sorteer.',
+      noRowSelected: 'alle rye is gekies.',
+      rowNotSelected: 'Kies ry {0}.',
+      rowSelected: 'Ry {0] gekies.',
+      allRowsSelected: 'Alle rye is gekies.',
+      someRowsSelected: 'Sommige rye is gekies.',
     },
     sortBy: 'Sorteer volgens',
   },

packages/vuetify/src/locale/ar.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'نشط لإزالة الترتيب.',
       activateDescending: 'نشط للترتيب تنازلياً.',
       activateAscending: 'نشط للترتيب تصاعدياً.',
+      noRowSelected: 'لم يتم تحديد أي صف',
+      rowNotSelected: 'حدد الصف {0}',
+      rowSelected: '{0} تم تحديد الصف',
+      allRowsSelected: 'تم تحديد جميع الصفوف',
+      someRowsSelected: 'تم تحديد بعض الصفوف',
     },
     sortBy: 'رتب حسب',
   },

packages/vuetify/src/locale/az.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Sıralamanı yığışdır.',
       activateDescending: 'Azalan sıra ilə düz.',
       activateAscending: 'Artan sıra ilə düz.',
+      noRowSelected: 'Heç bir sıra seçilməyib.',
+      rowNotSelected: '{0} sıra seçilməyib.',
+      rowSelected: '{0} sıra seçilir.',
+      allRowsSelected: 'Bütün sıralar seçilir.',
+      someRowsSelected: 'Bəzi sıralar seçilir.',
     },
     sortBy: 'Sırala',
   },

packages/vuetify/src/locale/bg.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Активирай за премахване на подредбата.',
       activateDescending: 'Активирай за подредба в намаляващ ред.',
       activateAscending: 'Активирай за подредба в нарастващ ред.',
+      noRowSelected: 'Не е избран ред',
+      rowNotSelected: 'Ред {0} не е избран.',
+      rowSelected: 'Ред {0}  е избран.',
+      allRowsSelected: 'Всички редове са избрани.',
+      someRowsSelected: 'Някои редове са избрани.',
     },
     sortBy: 'Сортирай по',
   },

packages/vuetify/src/locale/ca.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Premi per treure la ordenació.',
       activateDescending: 'Premi per ordenar descendent.',
       activateAscending: 'Premi per ordenar ascendent.',
+      noRowSelected: 'No s\'ha seleccionat cap fila',
+      rowNotSelected: 'La fila {0} està seleccionada.',
+      rowSelected: 'Fila {0} seleccionada',
+      allRowsSelected: 'Totes les files estan seleccionades.',
+      someRowsSelected: 'Algunes files estan seleccionades.',
     },
     sortBy: 'Ordenat per',
   },

packages/vuetify/src/locale/ckb.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'چالاککردن بۆ لابردنی ڕیزکردن.',
       activateDescending: 'چالاککردن بۆ ڕیزکردنی سەربەرەوخوار.',
       activateAscending: 'چالاککردن بۆ ڕیزکردنی سەر بەرەو ژوور.',
+      noRowSelected: 'Select all',
+      rowNotSelected: 'Select row {0}',
+      rowSelected: 'Row {0} is selected',
+      allRowsSelected: 'هەموو ڕیزەکان هەڵدەبژێردرێن',
+      someRowsSelected: 'هەندێک ڕیز هەڵدەبژێردرێن',
     },
     sortBy: 'ڕیزکردن بەپێی',
   },

packages/vuetify/src/locale/cs.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Aktivováním vypnete řazení.',
       activateDescending: 'Aktivováním se bude řadit sestupně.',
       activateAscending: 'Aktivováním se bude řadit vzestupně.',
+      noRowSelected: 'žádný řádek vybrán.',
+      rowNotSelected: 'Řádek {0} není vybrán.',
+      rowSelected: 'Vybrán řádek {0}.',
+      allRowsSelected: 'Všechny řádky jsou vybrány',
+      someRowsSelected: 'Některé řádky jsou vybrány',
     },
     sortBy: 'Řadit dle',
   },

packages/vuetify/src/locale/da.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Aktiver for at fjerne sortering.',
       activateDescending: 'Aktiver for at sortere faldende.',
       activateAscending: 'Aktiver for at sortere stigende.',
+      noRowSelected: 'Ingen række er valgt',
+      rowNotSelected: 'Række {0} er ikke valgt',
+      rowSelected: 'Række {0} er valgt',
+      allRowsSelected: 'Alle rækker er valgt',
+      someRowsSelected: 'Nogle rækker er valgt',
     },
     sortBy: 'Sorter efter',
   },

packages/vuetify/src/locale/de.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Aktivieren um Sortierung zu entfernen.',
       activateDescending: 'Aktivieren um absteigend zu sortieren.',
       activateAscending: 'Aktivieren um aufsteigend zu sortieren.',
+      noRowSelected: 'Keine Zeile ist ausgewählt.',
+      rowNotSelected: 'Zeile {0} ist nicht ausgewählt.',
+      rowSelected: 'Zeile {0} ist ausgewählt.',
+      allRowsSelected: 'All Zeilen sind ausgewählt.',
+      someRowsSelected: 'Einige Zeilen sind ausgewählt.',
     },
     sortBy: 'Sortiere nach',
   },

packages/vuetify/src/locale/el.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Ενεργοποιήστε για να καταργήσετε την ταξινόμηση.',
       activateDescending: 'Ενεργοποιήστε για φθίνουσα ταξινόμηση.',
       activateAscending: 'Ενεργοποιήστε για αύξουσα ταξινόμηση.',
+      noRowSelected: 'Δεν έχει επιλεγεί καμία σειρά.',
+      rowNotSelected: 'Η σειρά {0} δεν είναι επιλεγμένη.',
+      rowSelected: 'Η σειρά {0} έχει επιλεγεί.',
+      allRowsSelected: 'Όλες οι σειρές έχουν επιλεγεί.',
+      someRowsSelected: 'Ορισμένες σειρές έχουν επιλεγεί.',
     },
     sortBy: 'Ταξινόμηση κατά',
   },

packages/vuetify/src/locale/en.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Activate to remove sorting.',
       activateDescending: 'Activate to sort descending.',
       activateAscending: 'Activate to sort ascending.',
+      noRowSelected: 'No row is selected.',
+      rowNotSelected: 'Row {0} is not selected.',
+      rowSelected: 'Row {0} is selected.',
+      allRowsSelected: 'All rows are selected.',
+      someRowsSelected: 'Some rows are selected.',
     },
     sortBy: 'Sort by',
   },

packages/vuetify/src/locale/es.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Pulse para quitar orden.',
       activateDescending: 'Pulse para ordenar de forma descendente.',
       activateAscending: 'Pulse para ordenar de forma ascendente.',
+      noRowSelected: 'No hay ninguna fila seleccionada.',
+      rowNotSelected: 'La fila {0} no está seleccionada.',
+      rowSelected: 'La fila {0} está seleccionada.',
+      allRowsSelected: 'Todas las filas están seleccionadas.',
+      someRowsSelected: 'Algunas filas están seleccionadas.',
     },
     sortBy: 'Ordenado por',
   },

packages/vuetify/src/locale/et.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Vajuta uuesti sorteerimise eemaldamiseks.',
       activateDescending: 'Vajuta uuesti, et sorteerida kahanevalt.',
       activateAscending: 'Vajuta kasvavalt sorteerimiseks.',
+      noRowSelected: 'Ühtegi rida pole valitud',
+      rowNotSelected: 'Rida {0} pole valitud.',
+      rowSelected: 'Rida {0} on valitud.',
+      allRowsSelected: 'Kõik read on valitud.',
+      someRowsSelected: 'Mõned read on valitud.',
     },
     sortBy: 'Sorteerimise alus',
   },

packages/vuetify/src/locale/fa.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'غیرفعال‌سازی مرتب‌سازی',
       activateDescending: 'غیرفعال‌سازی مرتب‌سازی نزولی',
       activateAscending: 'غیرفعال‌سازی مرتب‌سازی صعودی',
+      noRowSelected: 'هیچ ردیفی انتخاب نشده است',
+      rowNotSelected: 'ردیف {0} انتخاب نشده است',
+      rowSelected: 'ردیف {0] انتخاب شده است',
+      allRowsSelected: 'همه ردیف‌ها انتخاب شده‌اند',
+      someRowsSelected: 'برخی از ردیف‌ها انتخاب شده‌اند',
     },
     sortBy: 'مرتب‌سازی براساس',
   },

packages/vuetify/src/locale/fi.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Aktivoi lajittelun poistamiseksi.',
       activateDescending: 'Aktivoi laskevien laskevien lajittelemiseksi.',
       activateAscending: 'Aktivoi lajitella nouseva.',
+      noRowSelected: 'Yhtäkään riviä ei ole valittu.',
+      rowNotSelected: 'Riviä {0} ei ole valittu.',
+      rowSelected: 'Rivi {0} on valittu.',
+      allRowsSelected: 'Kaikki rivit on valittu.',
+      someRowsSelected: 'Jotkin rivit on valittu.',
     },
     sortBy: 'Järjestä',
   },

packages/vuetify/src/locale/fr.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Activer pour supprimer le tri.',
       activateDescending: 'Activer pour trier par ordre décroissant.',
       activateAscending: 'Activer pour trier par ordre croissant.',
+      noRowSelected: 'Aucune ligne n\'est sélectionnée.',
+      rowNotSelected: 'La ligne {0} n\'est pas sélectionnée.',
+      rowSelected: 'La ligne {0} est sélectionnée.',
+      allRowsSelected: 'Toutes les lignes sont sélectionnées.',
+      someRowsSelected: 'Certaines lignes sont sélectionnées.',
     },
     sortBy: 'Trier par',
   },

packages/vuetify/src/locale/he.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'הפעל להסרת המיון.',
       activateDescending: 'הפעל למיון יורד.',
       activateAscending: 'הפעל למיון עולה.',
+      noRowSelected: 'לא נבחרה שורה.',
+      rowNotSelected: '.ורה {0} לא נבחרה.',
+      rowSelected: 'שורה {0} נבחרה.',
+      allRowsSelected: 'כל השורות נבחרו.',
+      someRowsSelected: 'חלק מהשורות נבחרו.',
     },
     sortBy: 'סדר לפי',
   },

packages/vuetify/src/locale/hr.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Odaberite za uklanjanje sortiranja.',
       activateDescending: 'Odaberite za silazno sortiranje.',
       activateAscending: 'Odaberite za uzlazno sortiranje.',
+      noRowSelected: 'Nije odabran nijedan redak.',
+      rowNotSelected: 'Redak {0} nije odabran.',
+      rowSelected: 'Redak {0} je odabran.',
+      allRowsSelected: 'Svi redovi su odabrani.',
+      someRowsSelected: 'Neki su retci odabrani.',
     },
     sortBy: 'Sortirajte po',
   },

packages/vuetify/src/locale/hu.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Rendezés törlése.',
       activateDescending: 'Aktiváld a csökkenő rendezésért.',
       activateAscending: 'Aktiváld a növekvő rendezésért.',
+      noRowSelected: 'Nincs kijelölve sor.',
+      rowNotSelected: 'Az {0}. sor nincs kiválasztva.',
+      rowSelected: '{0}. sor van kiválasztva.',
+      allRowsSelected: 'Minden sor ki van jelölve.',
+      someRowsSelected: 'Néhány sor ki van jelölve.',
     },
     sortBy: 'Rendezés',
   },

packages/vuetify/src/locale/id.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Aktifkan untuk menghapus penyortiran.',
       activateDescending: 'Aktifkan untuk mengurutkan kebawah.',
       activateAscending: 'Aktifkan untuk mengurutkan keatas.',
+      noRowSelected: 'Tidak ada baris yang dipilih.',
+      rowNotSelected: 'Baris {0} tidak dipilih.',
+      rowSelected: 'Baris {0} dipilih.',
+      allRowsSelected: 'Semua baris dipilih.',
+      someRowsSelected: 'Beberapa baris dipilih.',
     },
     sortBy: 'Urutkan berdasar',
   },

packages/vuetify/src/locale/it.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: `Attiva per rimuovere l'ordinamento.`,
       activateDescending: 'Attiva per ordinare in ordine decrescente.',
       activateAscending: 'Attiva per ordinare in ordine crescente.',
+      noRowSelected: 'Nessuna riga è selezionata.',
+      rowNotSelected: 'La riga {0} non è selezionata.',
+      rowSelected: 'È selezionata la riga {0}.',
+      allRowsSelected: 'Tutte le righe sono selezionate.',
+      someRowsSelected: 'Alcune righe sono selezionate.',
     },
     sortBy: 'Ordina per',
   },

packages/vuetify/src/locale/ja.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'ソートを削除するには有効にしてください。',
       activateDescending: '降順の並び替えのためには有効にしてください。',
       activateAscending: '昇順のソートのためには有効にしてください。',
+      noRowSelected: '行が選択されていません。',
+      rowNotSelected: '行 {0} が選択されていません。',
+      rowSelected: '行 {0} が選択されています。',
+      allRowsSelected: 'すべての行が選択されています',
+      someRowsSelected: 'いくつかの行が選択されています',
     },
     sortBy: 'ソート方式',
   },

packages/vuetify/src/locale/km.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'ចុចដើម្បីដកតំណទំហំ។',
       activateDescending: 'ចុចដើម្បីតំណទំហំចុះរួម។',
       activateAscending: 'ចុចដើម្បីតំណទំហំឡើងរួម។',
+      noRowSelected: 'គ្មានជួរត្រូវបានជ្រើសរើសទេ។',
+      rowNotSelected: 'ជួរទី {0} មិនត្រូវបានជ្រើសរើសទេ។',
+      rowSelected: 'ជួរទី {0} ត្រូវបានជ្រើសរើស។',
+      allRowsSelected: 'ជួរទាំងអស់ត្រូវបានជ្រើសរើស។',
+      someRowsSelected: 'ជួរមួយចំនួនត្រូវបានជ្រើសរើស។',
     },
     sortBy: 'តម្រៀបតាម',
   },

packages/vuetify/src/locale/ko.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: '정렬을 취소하려면 활성화하세요.',
       activateDescending: '내림차순 정렬을 위해 활성화하세요.',
       activateAscending: '오름차순 정렬을 위해 활성화하세요.',
+      noRowSelected: '행이 선택되지 않았습니다.',
+      rowNotSelected: '행 1이 선택되지 않았습니다.',
+      rowSelected: '행 1이 선택되었습니다.',
+      allRowsSelected: '모든 행이 선택되었습니다.',
+      someRowsSelected: '일부 행이 선택되었습니다.',
     },
     sortBy: '정렬 기준',
   },

packages/vuetify/src/locale/lt.ts

@@ -20,6 +20,11 @@ export default {
       activateNone: 'Suaktyvinkite, jei norite rikiavimą pašalinti.',
       activateDescending: 'Suaktyvinkite, jei norite rikiuoti mažėjimo tvarka.',
       activateAscending: 'Suaktyvinkite, jei norite rikiuoti didėjimo tvarka.',
+      noRowSelected: 'Nepasirinkta nė viena eilutė.',
+      rowNotSelected: '{0} eilutė nepasirinkta.',
+      rowSelected: 'Pasirinkta {0} eilutė.',
+      allRowsSelected: 'Visos eilutės yra pasirinktos.',
+      someRowsSelected: 'Pasirinktos kelios eilutės.',
     },
     sortBy: 'Rikiuoti pagal',
   },