feat(TableHeadRow): add tableId prop for improved accessibility

DevoInc · Jan 30, 2025 · fe2e330 · fe2e330
1 parent 0c521d8
commit fe2e330
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/table/src/core/TableHeadRow/TableHeadRow.tsx b/packages/table/src/core/TableHeadRow/TableHeadRow.tsx
@@ -7,14 +7,20 @@ interface TableHeadRowProps {
   density?: TDensity;
   showFilters: boolean;
   children: React.ReactNode;
+  tableId: string;
 }
 
 export const TableHeadRow: React.FC<TableHeadRowProps> = ({
   density,
   showFilters,
   children,
+  tableId,
 }) => (
-  <StyledTableHeadRow $density={density} $compactHeader={showFilters}>
+  <StyledTableHeadRow
+    $density={density}
+    $compactHeader={showFilters}
+    id={!showFilters ? `${tableId}__head_filter` : `${tableId}__head_name`}
+  >
     {children}
   </StyledTableHeadRow>
 );
diff --git a/packages/table/src/core/TableWrapper/TableWrapper.tsx b/packages/table/src/core/TableWrapper/TableWrapper.tsx
@@ -82,7 +82,11 @@ export const TableWrapper: React.FC = () => {
           scrolled={rowVirtualizer.scrollOffset !== 0}
           width={width}
         >
-          <TableHeadRow density={density} showFilters={showFilters}>
+          <TableHeadRow
+            density={density}
+            showFilters={showFilters}
+            tableId={id}
+          >
             {colDefs.map((colDef) => {
               const virtualColumn = items.find(
                 (item) => item.key === colDef.id,
@@ -111,7 +115,7 @@ export const TableWrapper: React.FC = () => {
             })}
           </TableHeadRow>
           {showFilters ? (
-            <TableHeadRow density={density} showFilters={false}>
+            <TableHeadRow density={density} showFilters={false} tableId={id}>
               {colDefs.map((colDef) => {
                 const virtualColumn = items.find(
                   (item) => item.key === colDef.id,
@@ -125,6 +129,7 @@ export const TableWrapper: React.FC = () => {
                       width={virtualColumn ? `${virtualColumn.size}px` : 'auto'}
                       offsetX={virtualColumn ? virtualColumn.start : undefined}
                       filter={true}
+                      title={colDef.headerName}
                     >
                       {colDef?.headerOnFilterPosition ? (
                         colDef?.headerRenderer ? (