Improve accesibility properties on Tables components

Author: Kubit

src/components/dataTable/__tests__/hooks/useDataTableStickyRightColumns.test.ts

@@ -13,25 +13,6 @@ describe('useDataTableStickyRightColumns', () => {
   let rightBoxShadowContainer: HTMLDivElement;
   let ref: React.RefObject<HTMLDivElement>;
 
-  beforeAll(() => {
-    global.ResizeObserver = class ResizeObserver {
-      callback;
-      constructor(callback) {
-        this.callback = callback;
-      }
-      observe() {
-        // Call the callback
-        this.callback();
-      }
-      unobserve() {
-        // do nothing
-      }
-      disconnect() {
-        // do nothing
-      }
-    };
-  });
-
   beforeEach(() => {
     wrapper = document.createElement('div');
     scrollableContainer = document.createElement('div');

src/components/dataTable/dataTableStandAlone.tsx

@@ -47,6 +47,7 @@ const DataTableStandAloneComponent = (
         tabIndex={hasScroll ? 0 : undefined}
       >
         <TableV2
+          aria-hidden={usingRowGroups ? true : undefined}
           autoLeftStickyCalc={false}
           autoRightStickyCalc={false}
           component={usingRowGroups ? 'div' : undefined}

src/components/table/stories/mockCustomizable.tsx

@@ -41,7 +41,7 @@ export const mockCustomizableTable = {
             <div>{value.surname}</div>
           </div>
         ) : (
-          (value.name.value ?? value.name)
+          value.name.value ?? value.name
         ),
     },
     {

src/components/tableRow/stories/argtypes.ts

@@ -72,6 +72,28 @@ export const argtypes = (
         category: CATEGORY_CONTROL.CUSTOMIZATION,
       },
     },
+    role: {
+      description: 'Role',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    tabIndex: {
+      description: 'Tab index',
+      type: { name: 'number' },
+      control: { type: 'number' },
+      table: {
+        type: {
+          summary: 'number',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
     onClick: {
       description: 'Click event',
       type: { name: 'function' },
@@ -82,6 +104,16 @@ export const argtypes = (
         category: CATEGORY_CONTROL.FUNCTIONS,
       },
     },
+    onKeyDown: {
+      description: 'Key down event',
+      type: { name: 'function' },
+      table: {
+        type: {
+          summary: 'React.KeyboardEventHandler<HTMLTableRowElement>',
+        },
+        category: CATEGORY_CONTROL.FUNCTIONS,
+      },
+    },
     onMouseEnter: {
       description: 'Mouse enter event',
       type: { name: 'function' },

src/components/tableRow/tableRowStandAlone.tsx

@@ -11,8 +11,11 @@ const TableRowStandAloneComponent = (
     id,
     active,
     hoverable = true,
+    role,
+    tabIndex,
     component,
     onClick,
+    onKeyDown,
     onMouseEnter,
     onMouseLeave,
   }: React.PropsWithChildren<ITableRowStandAlone>,
@@ -29,7 +32,10 @@ const TableRowStandAloneComponent = (
       data-hoverable={hoverable}
       data-testid={dataTestId}
       id={id}
+      role={role}
+      tabIndex={tabIndex}
       onClick={onClick}
+      onKeyDown={onKeyDown}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >

src/components/tableRow/types/tableRow.ts

@@ -7,10 +7,13 @@ export interface ITableRowStandAlone {
   id?: string;
   active?: boolean;
   hoverable?: boolean;
+  role?: string;
+  tabIndex?: number;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   component?: string | React.ComponentType<any>;
   dataTestId?: string;
   onClick?: React.MouseEventHandler<HTMLTableRowElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLTableRowElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLTableRowElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLTableRowElement>;
 }

src/components/tableV2/stories/argtypes.ts

@@ -68,6 +68,17 @@ export const argtypes = (
         category: CATEGORY_CONTROL.CUSTOMIZATION,
       },
     },
+    ['aria-hidden']: {
+      description: 'Aria hidden',
+      type: { name: 'boolean' },
+      control: { type: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
     ['aria-label']: {
       description: 'Only when it has scroll, scrollable container aria label',
       type: { name: 'string' },

src/components/tableV2/tableStandAlone.tsx

@@ -36,6 +36,7 @@ const TableStandAloneComponent = (
         data-table-scrollable-container
         $hasScrollDisabled={hasScrollDisabled}
         $styles={styles}
+        aria-hidden={props['aria-hidden']}
         aria-label={hasScroll ? props['aria-label'] : undefined}
         aria-labelledby={hasScroll ? props['aria-labelledby'] : undefined}
         data-testid={`${dataTestId}ScrollableContainer`}

src/components/tableV2/types/table.ts

@@ -3,6 +3,7 @@ import { CustomTokenTypes } from '@/types';
 import { TablePropsStylesTypeV2 } from './tableTheme';
 
 type TableScrollAriasType = {
+  ['aria-hidden']?: boolean;
   ['aria-label']?: string;
   ['aria-labelledby']?: string;
 };