Add basic keyboard navigation tests

package.json

@@ -62,6 +62,7 @@
     "@storybook/react": "^6.1.11",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.6.0",
     "@types/faker": "^5.1.5",
     "@types/jest": "^26.0.19",
     "@types/lodash": "^4.14.165",

src/DataGrid.tsx

@@ -376,6 +376,19 @@ function DataGrid<R, SR>({
     onExpandedGroupIdsChange(newExpandedGroupIds);
   }
 
+  function onGridFocus() {
+    if (!isCellWithinBounds(selectedPosition)) {
+      // Tabbing into the grid should initiate keyboard navigation
+      const initialPosition: SelectCellState = { idx: 0, rowIdx: 0, mode: 'SELECT' };
+      if (isCellWithinBounds(initialPosition)) {
+        setSelectedPosition(initialPosition);
+      }
+    } else {
+      // otherwise if we already have a selected cell, we should scroll back to it when focusing the grid
+      scrollToCell(selectedPosition);
+    }
+  }
+
   function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
     const { key, keyCode } = event;
     const row = rows[selectedPosition.rowIdx];
@@ -930,6 +943,7 @@ function DataGrid<R, SR>({
             tabIndex={0}
             className={focusSinkClassname}
             onKeyDown={handleKeyDown}
+            onFocus={onGridFocus}
           />
           <div style={{ height: Math.max(rows.length * rowHeight, clientHeight) }} />
           {getViewportRows()}

test/keyboardNavigation.test.ts

@@ -0,0 +1,120 @@
+import userEvent from '@testing-library/user-event';
+import { fireEvent } from '@testing-library/react';
+import type { Column } from '../src';
+import { setup, getSelectedCell } from './utils';
+
+type Row = undefined;
+
+const rows: readonly Row[] = Array(100);
+
+const columns: readonly Column<Row>[] = [
+  { key: 'col1', name: 'col1' },
+  { key: 'col2', name: 'col2' },
+  { key: 'col3', name: 'col3' },
+  { key: 'col4', name: 'col4' },
+  { key: 'col5', name: 'col5' },
+  { key: 'col6', name: 'col6' },
+  { key: 'col7', name: 'col7' }
+];
+
+function validateCellPosition(x: number, y: number) {
+  const cell = getSelectedCell();
+  expect(cell).toHaveAttribute('aria-colindex', `${x + 1}`);
+  expect(cell!.parentNode).toHaveAttribute('aria-rowindex', `${y + 2}`);
+}
+
+test('basic keyboard navigation', () => {
+  setup({ columns, rows });
+
+  // no initial selection
+  expect(getSelectedCell()).not.toBeInTheDocument();
+
+  // tab into the grid
+  userEvent.tab();
+  validateCellPosition(0, 0);
+
+  // tab to the next cell
+  userEvent.tab();
+  validateCellPosition(1, 0);
+
+  // tab back to the previous cell
+  userEvent.tab({ shift: true });
+  validateCellPosition(0, 0);
+
+  // arrow navigation
+  userEvent.type(document.activeElement!, '{arrowdown}');
+  validateCellPosition(0, 1);
+  userEvent.type(document.activeElement!, '{arrowright}');
+  validateCellPosition(1, 1);
+  userEvent.type(document.activeElement!, '{arrowup}');
+  validateCellPosition(1, 0);
+  userEvent.type(document.activeElement!, '{arrowleft}');
+  validateCellPosition(0, 0);
+
+  // page {up,down}/home/end navigation
+  fireEvent.keyDown(document.activeElement!, { key: 'PageDown' });
+  validateCellPosition(0, 29);
+  fireEvent.keyDown(document.activeElement!, { key: 'PageDown' });
+  validateCellPosition(0, 58);
+  fireEvent.keyDown(document.activeElement!, { key: 'PageUp' });
+  validateCellPosition(0, 29);
+  fireEvent.keyDown(document.activeElement!, { key: 'End' });
+  validateCellPosition(6, 29);
+  fireEvent.keyDown(document.activeElement!, { key: 'Home' });
+  validateCellPosition(0, 29);
+  fireEvent.keyDown(document.activeElement!, { key: 'End', ctrlKey: true });
+  validateCellPosition(6, 99);
+  fireEvent.keyDown(document.activeElement!, { key: 'Home', ctrlKey: true });
+  validateCellPosition(0, 0);
+});
+
+test('at-bounds basic keyboard navigation', () => {
+  setup({ columns, rows });
+
+  // tab into the grid
+  userEvent.tab();
+  validateCellPosition(0, 0);
+
+  // arrow navigation
+  userEvent.type(document.activeElement!, '{arrowup}');
+  validateCellPosition(0, 0);
+  userEvent.type(document.activeElement!, '{arrowleft}');
+  validateCellPosition(0, 0);
+  fireEvent.keyDown(document.activeElement!, { key: 'End', ctrlKey: true });
+  validateCellPosition(6, 99);
+  userEvent.type(document.activeElement!, '{arrowdown}');
+  validateCellPosition(6, 99);
+  userEvent.type(document.activeElement!, '{arrowright}');
+  validateCellPosition(6, 99);
+
+  // page {up,down}/home/end navigation
+  fireEvent.keyDown(document.activeElement!, { key: 'End' });
+  validateCellPosition(6, 99);
+  fireEvent.keyDown(document.activeElement!, { key: 'End', ctrlKey: true });
+  validateCellPosition(6, 99);
+  fireEvent.keyDown(document.activeElement!, { key: 'PageDown' });
+  validateCellPosition(6, 99);
+  fireEvent.keyDown(document.activeElement!, { key: 'Home', ctrlKey: true });
+  validateCellPosition(0, 0);
+  fireEvent.keyDown(document.activeElement!, { key: 'Home' });
+  validateCellPosition(0, 0);
+  fireEvent.keyDown(document.activeElement!, { key: 'Home', ctrlKey: true });
+  validateCellPosition(0, 0);
+  fireEvent.keyDown(document.activeElement!, { key: 'PageUp' });
+  validateCellPosition(0, 0);
+
+  // shift+tab tabs out of the grid
+  userEvent.tab({ shift: true });
+  expect(document.body).toHaveFocus();
+
+  // tab at the end of a row selects the first cell on the next row
+  userEvent.tab();
+  fireEvent.keyDown(document.activeElement!, { key: 'End' });
+  userEvent.tab();
+  validateCellPosition(0, 1);
+
+  // tab at the end of the grid tabs out of the grid
+  fireEvent.keyDown(document.activeElement!, { key: 'End', ctrlKey: true });
+  userEvent.tab();
+  expect(document.body).toHaveFocus();
+});

test/setup.ts

@@ -21,3 +21,36 @@ Object.defineProperties(HTMLDivElement.prototype, {
     }
   }
 });
+
+// Basic scroll polyfill
+const scrollStates = new WeakMap<Element, { scrollTop: number; scrollLeft: number }>();
+
+function getScrollState(div: Element) {
+  if (scrollStates.has(div)) {
+    return scrollStates.get(div)!;
+  }
+  const scrollState = { scrollTop: 0, scrollLeft: 0 };
+  scrollStates.set(div, scrollState);
+  return scrollState;
+}
+
+Object.defineProperties(Element.prototype, {
+  scrollTop: {
+    get(this: Element) {
+      return getScrollState(this).scrollTop;
+    },
+    set(this: Element, value: number) {
+      getScrollState(this).scrollTop = value;
+      this.dispatchEvent(new Event('scroll'));
+    }
+  },
+  scrollLeft: {
+    get(this: Element) {
+      return getScrollState(this).scrollLeft;
+    },
+    set(this: Element, value: number) {
+      getScrollState(this).scrollLeft = value;
+      this.dispatchEvent(new Event('scroll'));
+    }
+  }
+});

test/utils.tsx

@@ -22,3 +22,7 @@ export function getCells() {
 export function getHeaderCells() {
   return screen.getAllByRole('columnheader');
 }
+
+export function getSelectedCell() {
+  return document.querySelector<HTMLDivElement>('.rdg-cell-selected');
+}