chore(components): [table-v2] accessibility improvement (#11891)

docs/examples/table-v2/grouping-header.vue

@@ -83,6 +83,7 @@ const CustomizedHeader: FunctionalComponent<
         groupCells.push(
           <div
             class="flex items-center justify-center custom-header-cell"
+            role="columnheader"
             style={{
               ...cells[columnIndex].props!.style,
               width: `${width}px`,

packages/components/table-v2/src/components/header-row.tsx

@@ -36,7 +36,7 @@ const TableV2HeaderRow = defineComponent({
       }
 
       return (
-        <div class={props.class} style={style}>
+        <div class={props.class} style={style} role="row">
           {Cells}
         </div>
       )

packages/components/table-v2/src/components/header.tsx

@@ -94,7 +94,12 @@ const TableV2Header = defineComponent({
       if (props.height <= 0) return
 
       return (
-        <div ref={headerRef} class={props.class} style={unref(headerStyle)}>
+        <div
+          ref={headerRef}
+          class={props.class}
+          style={unref(headerStyle)}
+          role="rowgroup"
+        >
           <div style={unref(rowStyle)} class={ns.e('header')}>
             {renderDynamicRows()}
             {renderFixedRows()}

packages/components/table-v2/src/components/row.tsx

@@ -210,6 +210,7 @@ const TableV2Row = defineComponent({
             ref={rowRef}
             class={props.class}
             style={_measured ? style : exceptHeightStyle}
+            role="row"
             {...attrs}
             {...unref(eventHandlers)}
           >
@@ -224,6 +225,7 @@ const TableV2Row = defineComponent({
           ref={rowRef}
           class={props.class}
           style={style}
+          role="row"
           {...unref(eventHandlers)}
         >
           {ColumnCells}

packages/components/table-v2/src/renderers/cell.tsx

@@ -122,7 +122,7 @@ const CellRenderer: FunctionalComponent<CellRendererProps> = (
   }
 
   return (
-    <div class={kls} style={cellStyle} {...extraCellProps}>
+    <div class={kls} style={cellStyle} {...extraCellProps} role="cell">
       {IconOrPlaceholder}
       {Cell}
     </div>

packages/components/table-v2/src/renderers/header-cell.tsx

@@ -82,7 +82,7 @@ const HeaderCellRenderer: FunctionalComponent<HeaderCellRendererProps> = (
 
   // For now we don't deliver resizable column feature since it has some UX issue.
   return (
-    <div {...cellWrapperProps}>
+    <div {...cellWrapperProps} role="columnheader">
       {Cell}
 
       {sortable && (

packages/components/table-v2/src/table-grid.tsx

@@ -228,6 +228,7 @@ const TableGrid = defineComponent({
             width={width}
             height={unref(gridHeight)}
             class={ns.e('body')}
+            role="rowgroup"
             scrollbarStartGap={scrollbarStartGap}
             scrollbarEndGap={scrollbarEndGap}
             scrollbarAlwaysOn={scrollbarAlwaysOn}

packages/components/virtual-list/src/builders/build-grid.ts

@@ -639,6 +639,7 @@ const createGrid = ({
           {
             key: 0,
             class: ns.e('wrapper'),
+            role: props.role,
           },
           [
             h(

packages/components/virtual-list/src/props.ts

@@ -158,6 +158,7 @@ export const virtualizedGridProps = buildProps({
   vScrollbarSize: scrollbarSize,
   scrollbarStartGap: startGap,
   scrollbarEndGap: endGap,
+  role: String,
   ...virtualizedProps,
 } as const)