feat(Table): aria-(colcount,colindex,rowcount,rowindex) support added

gravity-ui · Jul 29, 2024 · 038c163 · 038c163
1 parent cfd2b7c
commit 038c163
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 8 deletions.
diff --git a/src/components/FooterRow/FooterRow.tsx b/src/components/FooterRow/FooterRow.tsx
@@ -6,7 +6,7 @@ import type {FooterCellProps} from '../FooterCell';
 import {FooterCell} from '../FooterCell';
 import {b} from '../Table/Table.classname';
 
-export interface FooterRowProps<TData, TValue> {
+export interface FooterRowProps<TData, TValue> extends React.TdHTMLAttributes<HTMLTableRowElement> {
     cellClassName: FooterCellProps<TData, TValue>['className'];
     className?: string;
     footerGroup: HeaderGroup<TData>;
@@ -16,6 +16,7 @@ export const FooterRow = <TData, TValue>({
     cellClassName,
     className,
     footerGroup,
+    ...restProps
 }: FooterRowProps<TData, TValue>) => {
     const isEmptyRow = footerGroup.headers.every((header) => !header.column.columnDef.footer);
 
@@ -24,7 +25,7 @@ export const FooterRow = <TData, TValue>({
     }
 
     return (
-        <tr className={b('footer-row', className)}>
+        <tr className={b('footer-row', className)} {...restProps}>
             {footerGroup.headers.map((header) => (
                 <FooterCell key={header.column.id} className={cellClassName} header={header} />
             ))}

diff --git a/src/components/HeaderCell/HeaderCell.tsx b/src/components/HeaderCell/HeaderCell.tsx
@@ -4,6 +4,7 @@ import type {Header} from '@tanstack/react-table';
 import {flexRender} from '@tanstack/react-table';
 
 import {getCellStyles, getHeaderCellClassModes} from '../../utils';
+import {getHeaderCellCollIndex} from '../../utils/getHeaderCellCollIndex';
 import type {ResizeHandleProps} from '../ResizeHandle';
 import {ResizeHandle} from '../ResizeHandle';
 import type {SortIndicatorProps} from '../SortIndicator';
@@ -60,6 +61,7 @@ export const HeaderCell = <TData, TValue>({
             rowSpan={rowSpan > 1 ? rowSpan : undefined}
             onClick={header.column.getToggleSortingHandler()}
             style={getCellStyles(header)}
+            aria-colindex={getHeaderCellCollIndex(header)}
         >
             {flexRender(header.column.columnDef.header, header.getContext())}{' '}
             {header.column.getCanSort() &&

diff --git a/src/components/HeaderRow/HeaderRow.tsx b/src/components/HeaderRow/HeaderRow.tsx
@@ -7,7 +7,8 @@ import {HeaderCell} from '../HeaderCell';
 import type {ResizeHandleProps} from '../ResizeHandle';
 import {b} from '../Table/Table.classname';
 
-export interface HeaderRowProps<TData, TValue> {
+export interface HeaderRowProps<TData, TValue>
+    extends Omit<React.TdHTMLAttributes<HTMLTableRowElement>, 'className'> {
     cellClassName?: HeaderCellProps<TData, TValue>['className'];
     className?:
         | string
@@ -29,6 +30,7 @@ export const HeaderRow = <TData, TValue>({
     renderSortIndicator,
     resizeHandleClassName,
     sortIndicatorClassName,
+    ...restProps
 }: HeaderRowProps<TData, TValue>) => {
     const className = React.useMemo(() => {
         return typeof classNameProp === 'function'
@@ -37,7 +39,7 @@ export const HeaderRow = <TData, TValue>({
     }, [classNameProp, headerGroup, parentHeaderGroup]);
 
     return (
-        <tr className={b('header-row', className)}>
+        <tr className={b('header-row', className)} {...restProps}>
             {headerGroup.headers.map((header) => (
                 <HeaderCell
                     key={header.column.id}

diff --git a/src/components/Row/Row.tsx b/src/components/Row/Row.tsx
@@ -10,7 +10,8 @@ import type {GroupHeaderProps} from '../GroupHeader';
 import {GroupHeader} from '../GroupHeader';
 import {b} from '../Table/Table.classname';
 
-export interface RowProps<TData, TScrollElement extends Element | Window = HTMLDivElement> {
+export interface RowProps<TData, TScrollElement extends Element | Window = HTMLDivElement>
+    extends Omit<React.TdHTMLAttributes<HTMLTableRowElement>, 'className' | 'onClick'> {
     cellClassName?: CellProps<TData>['className'];
     className?: string | ((row: RowType<TData>) => string);
     getGroupTitle?: (row: RowType<TData>) => React.ReactNode;
@@ -57,6 +58,7 @@ export const Row = React.forwardRef(
             rowVirtualizer,
             style,
             virtualItem,
+            ...restProps
         }: RowProps<TData, TScrollElement>,
         ref: React.Ref<HTMLTableRowElement>,
     ) => {
@@ -83,7 +85,11 @@ export const Row = React.forwardRef(
                         row,
                     })
                 ) : (
-                    <Cell className={cellClassName} colSpan={row.getVisibleCells().length}>
+                    <Cell
+                        className={cellClassName}
+                        colSpan={row.getVisibleCells().length}
+                        aria-colindex={1}
+                    >
                         {renderGroupHeader ? (
                             renderGroupHeader({
                                 className: b('group-header', groupHeaderClassName),
@@ -107,7 +113,14 @@ export const Row = React.forwardRef(
 
             return row
                 .getVisibleCells()
-                .map((cell) => <Cell key={cell.id} cell={cell} className={cellClassName} />);
+                .map((cell) => (
+                    <Cell
+                        key={cell.id}
+                        cell={cell}
+                        aria-colindex={cell.column.getIndex() + 1}
+                        className={cellClassName}
+                    />
+                ));
         };
 
         return (
@@ -127,6 +140,7 @@ export const Row = React.forwardRef(
                 )}
                 onClick={handleClick}
                 data-index={virtualItem?.index}
+                {...restProps}
                 {...getRowAttributes?.(row)}
             >
                 {renderRowContent()}

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -98,12 +98,20 @@ export const Table = React.forwardRef(
         const headerGroups = withHeader && table.getHeaderGroups();
         const footerGroups = withFooter && table.getFooterGroups();
 
+        const colCount = table.getVisibleLeafColumns().length;
+        const headerRowCount = headerGroups ? headerGroups.length : 0;
+        const bodyRowCount = rows.length;
+        const footerRowCount = footerGroups ? footerGroups.length : 0;
+        const rowCount = bodyRowCount + headerRowCount + footerRowCount;
+
         return (
             <TableContextProvider getRowByIndex={getRowByIndex} enableNesting={enableNesting}>
                 <table
                     ref={ref}
                     className={b({'with-row-virtualization': Boolean(rowVirtualizer)}, className)}
                     data-dragging-row-index={draggingRowIndex > -1 ? draggingRowIndex : undefined}
+                    aria-colcount={colCount > 0 ? colCount : undefined}
+                    aria-rowcount={rowCount > 0 ? rowCount : undefined}
                 >
                     {headerGroups && (
                         <thead className={b('header', {sticky: stickyHeader}, headerClassName)}>
@@ -118,6 +126,7 @@ export const Table = React.forwardRef(
                                     renderSortIndicator={renderSortIndicator}
                                     resizeHandleClassName={resizeHandleClassName}
                                     sortIndicatorClassName={sortIndicatorClassName}
+                                    aria-rowindex={index + 1}
                                 />
                             ))}
                         </thead>
@@ -147,6 +156,7 @@ export const Table = React.forwardRef(
                                 virtualItem: rowVirtualizer
                                     ? (virtualItemOrRow as VirtualItem<HTMLTableRowElement>)
                                     : undefined,
+                                'aria-rowindex': headerRowCount + row.index + 1,
                             };
 
                             if (draggableContext) {
@@ -158,12 +168,13 @@ export const Table = React.forwardRef(
                     </tbody>
                     {footerGroups && (
                         <tfoot className={b('footer', {sticky: stickyFooter}, footerClassName)}>
-                            {footerGroups.map((footerGroup) => (
+                            {footerGroups.map((footerGroup, index) => (
                                 <FooterRow
                                     key={footerGroup.id}
                                     cellClassName={footerCellClassName}
                                     className={footerRowClassName}
                                     footerGroup={footerGroup}
+                                    aria-rowindex={headerRowCount + bodyRowCount + index + 1}
                                 />
                             ))}
                         </tfoot>

diff --git a/src/utils/getHeaderCellCollIndex.ts b/src/utils/getHeaderCellCollIndex.ts
@@ -0,0 +1,7 @@
+import type {Header} from '@tanstack/react-table';
+
+export const getHeaderCellCollIndex = <TData>(header: Header<TData, unknown>): number => {
+    return header.headerGroup.headers
+        .slice(0, header.index)
+        .reduce((acc, value) => acc + value.colSpan, 1);
+};