feat: Accessible resize handles with keyboard activation (toggle button)

src/table/__integ__/resizable-columns.test.ts

@@ -104,7 +104,9 @@ class TablePage extends BasePageObject {
   async assertColumnWidth(columnIndex: number, expected: number) {
     await this.browser.waitUntil(async () => (await this.getColumnWidth(columnIndex)) === expected, {
       timeout: 1000,
-      timeoutMsg: `Column at index "${columnIndex}" should have width "${expected}"`,
+      timeoutMsg: `Column at index "${columnIndex}" should have width "${expected}". Observed width is "${await this.getColumnWidth(
+        columnIndex
+      )}".`,
     });
   }
 }
@@ -268,16 +270,12 @@ test(
     await page.keys(['Tab']);
     // wait for the resizer to attach handler
 
-    await page.keys(['ArrowRight']);
-    await page.assertColumnWidth(1, originalWidth + 10);
-    await expect(page.readTableWidth(1)).resolves.toEqual(originalWidth + 10);
-
-    await page.keys(['ArrowRight']);
+    await page.keys(['Enter', 'ArrowRight', 'ArrowRight', 'Enter']);
     await page.assertColumnWidth(1, originalWidth + 20);
     await expect(page.readTableWidth(1)).resolves.toEqual(originalWidth + 20);
 
-    await page.keys(['ArrowLeft']);
-    await page.assertColumnWidth(1, originalWidth + 10);
-    await expect(page.readTableWidth(1)).resolves.toEqual(originalWidth + 10);
+    await page.keys(['Enter', 'ArrowRight', 'Escape']);
+    await page.assertColumnWidth(1, originalWidth + 20);
+    await expect(page.readTableWidth(1)).resolves.toEqual(originalWidth + 20);
   })
 );

src/table/__tests__/resizable-columns.test.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import * as React from 'react';
 import times from 'lodash/times';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import createWrapper, { TableWrapper } from '../../../lib/components/test-utils/dom';
 import Table, { TableProps } from '../../../lib/components/table';
 import resizerStyles from '../../../lib/components/table/resizer/styles.css.js';
@@ -310,25 +310,71 @@
     HTMLElement.prototype.getBoundingClientRect = originalBoundingClientRect;
   });
 
-  test('resizes columns with keyboard to the lect', async () => {
+  test('ignores arrow keys before entering the dragging mode', () => {
     const onChange = jest.fn();
     const { wrapper } = renderTable(<Table {...defaultProps} onColumnWidthsChange={event => onChange(event.detail)} />);
     const columnResizerWrapper = wrapper.findColumnResizer(1)!;
 
     columnResizerWrapper.focus();
+    columnResizerWrapper.keydown(KeyCode.right);
+    columnResizerWrapper.click();
+
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+
+  test('activates and commits resize with resizer click', () => {
+    const onChange = jest.fn();
+    const { wrapper } = renderTable(<Table {...defaultProps} onColumnWidthsChange={event => onChange(event.detail)} />);
+    const columnResizerWrapper = wrapper.findColumnResizer(1)!;
+
+    columnResizerWrapper.focus();
+    columnResizerWrapper.click();
     columnResizerWrapper.keydown(KeyCode.left);
+    expect(columnResizerWrapper.getElement()).toHaveTextContent('140');
+
+    columnResizerWrapper.click();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith({ widths: [140, 300] });
+  });
+
+  test('discards resize with escape', () => {
+    const onChange = jest.fn();
+    const { wrapper } = renderTable(<Table {...defaultProps} onColumnWidthsChange={event => onChange(event.detail)} />);
+    const columnResizerWrapper = wrapper.findColumnResizer(1)!;
 
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith({ widths: [150 - 10, 300] });
-    });
+    columnResizerWrapper.focus();
+    columnResizerWrapper.click();
+
+    columnResizerWrapper.keydown(KeyCode.right);
+    expect(columnResizerWrapper.getElement()).toHaveTextContent('160');
+
+    columnResizerWrapper.keydown(KeyCode.escape);
+    expect(columnResizerWrapper.getElement()).toHaveTextContent('150');
+
+    columnResizerWrapper.click();
+
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+
+  test('discards resize on blur', () => {
+    const onChange = jest.fn();
+    const { wrapper } = renderTable(<Table {...defaultProps} onColumnWidthsChange={event => onChange(event.detail)} />);
+    const columnResizerWrapper = wrapper.findColumnResizer(1)!;
+
+    columnResizerWrapper.focus();
+    columnResizerWrapper.click();
 
     columnResizerWrapper.keydown(KeyCode.right);
+    expect(columnResizerWrapper.getElement()).toHaveTextContent('160');
+
+    wrapper.findColumnResizer(2)!.focus();
+    expect(columnResizerWrapper.getElement()).toHaveTextContent('150');
+
+    columnResizerWrapper.focus();
+    columnResizerWrapper.click();
 
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledTimes(2);
-      expect(onChange).toHaveBeenCalledWith({ widths: [150 + 10, 300] });
-    });
+    expect(onChange).toHaveBeenCalledTimes(0);
   });
 });
 
@@ -352,7 +398,7 @@
     const getResizeHandle = (columnIndex: number) =>
       wrapper.findColumnHeaders()[columnIndex].findByClassName(resizerStyles.resizer)!.getElement();
 
     expect(getResizeHandle(0)).toHaveAccessibleName('Id');
     expect(getResizeHandle(1)).toHaveAccessibleName('Description');
   });
 });

src/table/header-cell/index.tsx

@@ -1,18 +1,18 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
-import React from 'react';
+import React, { useRef } from 'react';
 import InternalIcon from '../../icon/internal';
 import { KeyCode } from '../../internal/keycode';
 import { TableProps } from '../interfaces';
 import { getSortingIconName, getSortingStatus, isSorted } from './utils';
 import styles from './styles.css.js';
 import { Resizer } from '../resizer';
-import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { useInternalI18n } from '../../i18n/context';
 import { StickyColumnsModel } from '../sticky-columns';
 import { TableRole } from '../table-role';
 import { TableThElement } from './th-element';
+import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 
 interface TableHeaderCellProps<ItemType> {
   className?: string;
@@ -82,13 +82,17 @@ export function TableHeaderCell<ItemType>({
     }
   };
 
-  const headerId = useUniqueId('table-header-');
+  const headerCellRef = useRef<HTMLElement>(null);
+  const mergedCellRef = useMergeRefs(headerCellRef, cellRef);
+  const getHeaderCell = () => headerCellRef.current;
+  const headerContentRef = useRef<HTMLDivElement>(null);
+  const getHeaderContent = () => headerContentRef.current;
 
   return (
     <TableThElement
       className={className}
       style={style}
-      cellRef={cellRef}
+      cellRef={mergedCellRef}
       sortingStatus={sortingStatus}
       sortingDisabled={sortingDisabled}
       hidden={hidden}
@@ -121,7 +125,10 @@ export function TableHeaderCell<ItemType>({
             }
           : {})}
       >
-        <div className={clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap'])} id={headerId}>
+        <div
+          ref={headerContentRef}
+          className={clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap'])}
+        >
           {column.header}
           {isEditable ? (
             <span
@@ -146,7 +153,8 @@ export function TableHeaderCell<ItemType>({
           showFocusRing={focusedComponent === `resize-control-${String(columnId)}`}
           onDragMove={newWidth => updateColumn(columnId, newWidth)}
           onFinish={onResizeFinish}
-          ariaLabelledby={headerId}
+          getHeaderCell={getHeaderCell}
+          getHeaderContent={getHeaderContent}
           minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}
         />
       )}

src/table/header-cell/th-element.tsx

@@ -19,7 +19,7 @@ interface TableThElementProps {
   resizableColumns?: boolean;
   columnId: PropertyKey;
   stickyState: StickyColumnsModel;
-  cellRef?: React.RefCallback<HTMLElement>;
+  cellRef?: React.Ref<HTMLElement>;
   tableRole: TableRole;
   children: React.ReactNode;
 }