feat(table): #99 add props accesibility

- add aria-rowcount in table - add aria-colcount in table - add aria-rowindex in row - add aria-colindex in cell
DevoInc · Nov 11, 2024 · 8451ad2 · 8451ad2
1 parent 24452bf
commit 8451ad2
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 14 deletions.
diff --git a/packages/table/src/core/Cell/Cell.tsx b/packages/table/src/core/Cell/Cell.tsx
@@ -16,7 +16,7 @@ import { StyledCellWrapper } from './StyledCellWrapper';
 interface CellProps {
   cellDef: TCellDef;
   colDef: TColDef;
-  colSpan?: number;
+  colIndex?: number;
   data: unknown;
   height?: number;
   offsetX?: number;
@@ -29,7 +29,7 @@ interface CellProps {
 export const Cell: React.FC<CellProps> = ({
   cellDef,
   colDef,
-  colSpan,
+  colIndex,
   data,
   height,
   offsetX,
@@ -49,7 +49,6 @@ export const Cell: React.FC<CellProps> = ({
   return (
     <StyledCell
       aria-selected={isEditMode}
-      colSpan={colSpan}
       css={mergeStyles(colDef?.style ?? '', cellDef?.style ?? '')}
       onDoubleClick={onDoubleClick}
       ref={cellRef}
@@ -69,6 +68,7 @@ export const Cell: React.FC<CellProps> = ({
           onCellMouseLeave({ colDef, cellDef, rowDef });
         }
       }}
+      aria-colindex={colIndex}
     >
       <StyledCellWrapper
         $clickable={colDef.editable}

diff --git a/packages/table/src/core/Row/Row.tsx b/packages/table/src/core/Row/Row.tsx
@@ -11,15 +11,15 @@ import { useTheme } from 'styled-components';
 interface RowProps extends StyledTableRowProps {
   rowData: { [key: string]: unknown };
   columnVirtualizer: Virtualizer<HTMLDivElement, Element>;
-  index: number;
+  rowIndex: number;
   height?: number;
   start?: number;
 }
 
 export const Row: React.FC<RowProps> = ({
   columnVirtualizer,
   rowData,
-  index,
+  rowIndex,
   height,
   start,
 }) => {
@@ -35,7 +35,7 @@ export const Row: React.FC<RowProps> = ({
   const theme = useTheme();
 
   const rowDef = (getRowDef(rowDefs, rowData.id as string) ?? {}) as TRowDef;
-  const stripedConditional = () => (stripedFn(index, rowData) ? 'even' : 'odd');
+  const stripedConditional = () => (stripedFn(rowIndex, rowData) ? 'even' : 'odd');
   return (
     <StyledTableRow
       $even={striped ? stripedConditional() : 'odd'}
@@ -46,7 +46,7 @@ export const Row: React.FC<RowProps> = ({
         typeof rowDef?.style === 'function'
           ? rowDef?.style({
               theme,
-              evenOddType: striped && (index + 1) % 2 === 0 ? 'even' : 'odd',
+              evenOddType: striped && (rowIndex + 1) % 2 === 0 ? 'even' : 'odd',
               striped,
             })
           : rowDef?.style
@@ -56,6 +56,7 @@ export const Row: React.FC<RowProps> = ({
         height: `${height}px`,
         transform: `translateY(${start}px)`,
       }}
+      aria-rowindex={rowIndex}
     >
       {rowDef?.cellRenderer ? (
         <Cell
@@ -67,18 +68,18 @@ export const Row: React.FC<RowProps> = ({
             id: 'afterRow',
             cellRenderer: rowDef.cellRenderer,
           }}
-          colSpan={colDefs.length}
+          colIndex={0}
           data={null}
           height={height}
           key={`cell-0`}
           offsetX={0}
           row={rowData}
-          rowIndex={index}
+          rowIndex={rowIndex}
           rowDef={rowDef}
           width={columnVirtualizer.getTotalSize()}
         />
       ) : (
-        colDefs.map((colDef) => {
+        colDefs.map((colDef, index) => {
           const cellDef = getCellDef(cellDefs, colDef.id, rowDef.id);
           const virtualColumn = columnVirtualizer
             .getVirtualItems()
@@ -93,7 +94,8 @@ export const Row: React.FC<RowProps> = ({
                 key={`cell-${colDef.id}`}
                 offsetX={virtualColumn?.start}
                 row={rowData}
-                rowIndex={index}
+                rowIndex={rowIndex}
+                colIndex={index}
                 rowDef={rowDef}
                 width={virtualColumn?.size}
               />

diff --git a/packages/table/src/core/TableBody/TableBody.tsx b/packages/table/src/core/TableBody/TableBody.tsx
@@ -31,7 +31,7 @@ export const TableBody: React.FC<TableBodyProps> = ({
           key={'tb_' + virtualRow.key}
           columnVirtualizer={columnVirtualizer}
           rowData={data[virtualRow.index]}
-          index={virtualRow.index}
+          rowIndex={virtualRow.index}
           height={virtualRow.size}
           start={virtualRow.start}
         />

diff --git a/packages/table/src/core/TableWrapper/TableWrapper.tsx b/packages/table/src/core/TableWrapper/TableWrapper.tsx
@@ -17,7 +17,7 @@ import { StyledTableWrapper } from './StyledTableWrapper';
 
 export const TableWrapper: React.FC = () => {
   const theme = useTheme();
-  const { maxHeight, data, showFilters, density, rowDefs } =
+  const { maxHeight, data, showFilters, density, rowDefs, colDefs } =
     React.useContext(TableContext);
 
   const ref = React.useRef<HTMLDivElement>();
@@ -49,7 +49,13 @@ export const TableWrapper: React.FC = () => {
       $maxHeight={maxHeight}
       style={{ opacity: size?.width > 0 ? 1 : 0 }}
     >
-      <StyledTable $height={height} $width={width}>
+      <StyledTable
+        $height={height}
+        $width={width}
+        role={'grid'}
+        aria-rowcount={data.length}
+        aria-colcount={colDefs.length}
+      >
         <TableHead
           items={columnVirtualizer?.getVirtualItems() ?? []}
           scrolled={rowVirtualizer.scrollOffset !== 0}