feat(VTable): add caption slot and pass aria-* to <table>

resolves #21805

Author: J-Sek

packages/api-generator/src/locale/en/VTable.json

@@ -1,6 +1,8 @@
 {
   "description": "Replacement for native `<table>` HTML element. Lightweight alternative to `v-data-table`.",
   "props": {
+    "ariaLabel": "Sets the accessible name of the underlying `<table>` element. Use when the table has no visible heading.",
+    "ariaLabelledby": "References the `id` of an element whose text labels the underlying `<table>` element.",
     "fixedFooter": "Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.",
     "fixedHeader": "Use the fixed-header prop together with the height prop to fix the header to the top of the table.",
     "gridlines": "Controls cell borders\n- **horizontal** draws lines between rows\n- **vertical** between columns (keeps horizontal lines of header and footer rows)\n- **all** / `true` draws both vertical and horizontal lines\n- `false` removes all lines.",
@@ -10,6 +12,7 @@
   },
   "slots": {
     "bottom": "Slot to add content below the table.",
+    "caption": "First slot inside `<table>` element epected to hold `<caption>` element within.",
     "top": "Slot to add content above the table.",
     "wrapper": "Slots for custom rendering of the table wrapper."
   }

packages/docs/src/data/new-in.json

@@ -167,6 +167,8 @@
   },
   "VDataTable": {
     "props": {
+      "ariaLabel": "4.1.0",
+      "ariaLabelledby": "4.1.0",
       "collapseIcon": "3.10.0",
       "expandIcon": "3.10.0",
       "expandStrategy": "4.1.0",
@@ -187,6 +189,7 @@
       "update:opened": "4.1.0"
     },
     "slots": {
+      "caption": "4.1.0",
       "expanded": "4.1.0",
       "group-summary": "3.10.0"
     },
@@ -199,6 +202,8 @@
   },
   "VDataTableServer": {
     "props": {
+      "ariaLabel": "4.1.0",
+      "ariaLabelledby": "4.1.0",
       "collapseIcon": "3.10.0",
       "expandIcon": "3.10.0",
       "expandStrategy": "4.1.0",
@@ -218,12 +223,15 @@
       "update:opened": "4.1.0"
     },
     "slots": {
+      "caption": "4.1.0",
       "expanded": "4.1.0",
       "group-summary": "3.10.0"
     }
   },
   "VDataTableVirtual": {
     "props": {
+      "ariaLabel": "4.1.0",
+      "ariaLabelledby": "4.1.0",
       "collapseIcon": "3.10.0",
       "expandIcon": "3.10.0",
       "expandStrategy": "4.1.0",
@@ -241,6 +249,7 @@
       "update:opened": "4.1.0"
     },
     "slots": {
+      "caption": "4.1.0",
       "expanded": "4.1.0",
       "group-summary": "3.10.0"
     }
@@ -534,7 +543,12 @@
   },
   "VTable": {
     "props": {
+      "ariaLabel": "4.1.0",
+      "ariaLabelledby": "4.1.0",
       "gridlines": "4.1.0"
+    },
+    "slots": {
+      "caption": "4.1.0"
     }
   },
   "VTabs": {

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

@@ -70,6 +70,7 @@ export type VDataTableSlotProps<T> = {
 
 export type VDataTableSlots<T> = VDataTableRowsSlots<T> & VDataTableHeadersSlots & {
   default: VDataTableSlotProps<T>
+  caption: never
   colgroup: VDataTableSlotProps<T>
   top: VDataTableSlotProps<T>
   body: VDataTableSlotProps<T>
@@ -291,6 +292,7 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
         >
           {{
             top: () => slots.top?.(slotProps.value),
+            caption: slots.caption,
             default: () => slots.default ? slots.default(slotProps.value) : (
               <>
                 { slots.colgroup?.(slotProps.value) }

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

@@ -177,6 +177,7 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
         >
           {{
             top: () => slots.top?.(slotProps.value),
+            caption: slots.caption,
             default: () => slots.default ? slots.default(slotProps.value) : (
               <>
                 { slots.colgroup?.(slotProps.value) }

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

@@ -42,6 +42,7 @@ type VDataTableVirtualSlotProps<T> = Omit<
 >
 
 export type VDataTableVirtualSlots<T> = VDataTableRowsSlots<T> & VDataTableHeadersSlots & {
+  caption: never
   colgroup: VDataTableVirtualSlotProps<T>
   top: VDataTableVirtualSlotProps<T>
   headers: VDataTableHeadersSlots['headers']
@@ -229,7 +230,11 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
                   height: convertToUnit(props.height),
                 }}
               >
-                <table>
+                <table
+                  aria-label={ props.ariaLabel }
+                  aria-labelledby={ props.ariaLabelledby }
+                >
+                  { slots.caption && <caption>{ slots.caption() }</caption> }
                   { slots.colgroup?.(slotProps.value) }
                   { !props.hideDefaultHeader && (
                     <thead key="thead">

packages/vuetify/src/components/VTable/VTable.tsx

@@ -19,12 +19,15 @@ export type VTableSlots = {
   top: never
   bottom: never
   wrapper: never
+  caption: never
 }
 
 export type Striped = null | 'odd' | 'even'
 export type Gridlines = 'horizontal' | 'vertical' | 'all'
 
 export const makeVTableProps = propsFactory({
+  ariaLabel: String,
+  ariaLabelledby: String,
   gridlines: {
     type: [Boolean, String] as PropType<boolean | Gridlines>,
     default: 'horizontal',
@@ -89,7 +92,11 @@ export const VTable = genericComponent<VTableSlots>()({
             class="v-table__wrapper"
             style={{ height: convertToUnit(props.height) }}
           >
-            <table>
+            <table
+              aria-label={ props.ariaLabel }
+              aria-labelledby={ props.ariaLabelledby }
+            >
+              { slots.caption?.() }
               { slots.default() }
             </table>
           </div>