feat: Table grid nav api

pages/table-fragments/grid-navigation-custom.page.tsx

@@ -339,6 +339,12 @@ function EditableStateCell({ value, onChange }: { value: InstanceState; onChange
   const [active, setActive] = useState(false);
   const dialogRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (active) {
+      dialogRef.current?.querySelector('input')?.focus();
+    }
+  }, [active]);
+
   if (!active) {
     return value === 'TERMINATED' ? (
       <StatusIndicator {...stateToStatusIndicator[value]} />

pages/table/editable.page.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { ForwardedRef, forwardRef, useEffect, useRef, useState } from 'react';
+import React, { ForwardedRef, forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import Header from '~components/header';
 import Input from '~components/input';
 import Alert from '~components/alert';
@@ -9,9 +9,16 @@ import Select, { SelectProps } from '~components/select';
 import TimeInput, { TimeInputProps } from '~components/time-input';
 import Autosuggest, { AutosuggestProps } from '~components/autosuggest';
 import Multiselect, { MultiselectProps } from '~components/multiselect';
-import { Link, Box, Button, Modal, SpaceBetween } from '~components';
+import { Link, Box, Button, Modal, SpaceBetween, Checkbox } from '~components';
 import { initialItems, DistributionInfo, tlsVersions, originSuggestions, tagOptions } from './editable-data';
 import ScreenshotArea from '../utils/screenshot-area';
+import AppContext, { AppContextType } from '../app/app-context';
+
+type PageContext = React.Context<
+  AppContextType<{
+    keyboardNavigation: boolean;
+  }>
+>;
 
 let __editStateDirty = false;
 
@@ -201,7 +208,10 @@ let errorsMeta = new WeakMap<DistributionInfo, string>();
 
 const Demo = forwardRef(
   (
-    { setModalVisible }: { setModalVisible: React.Dispatch<React.SetStateAction<boolean>> },
+    {
+      setModalVisible,
+      keyboardNavigation,
+    }: { setModalVisible: React.Dispatch<React.SetStateAction<boolean>>; keyboardNavigation: boolean },
     tableRef: ForwardedRef<TableProps.Ref>
   ) => {
     const [items, setItems] = useState(initialItems);
@@ -253,12 +263,16 @@ const Demo = forwardRef(
         resizableColumns={true}
         ariaLabels={ariaLabels}
         stickyHeader={true}
+        enableKeyboardNavigation={keyboardNavigation}
       />
     );
   }
 );
 
 export default function () {
+  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
+  const keyboardNavigation = urlParams.keyboardNavigation ?? false;
+
   const [modalVisible, setModalVisible] = useState(false);
   const tableRef = useRef<TableProps.Ref>(null);
 
@@ -275,37 +289,48 @@ export default function () {
   });
 
   return (
-    <ScreenshotArea disableAnimations={true}>
-      <input data-testid="focus" aria-label="focus input" />
-      <Demo setModalVisible={setModalVisible} ref={tableRef} />
-      <Modal
-        visible={modalVisible}
-        header="Discard changes"
-        closeAriaLabel="Close modal"
-        onDismiss={withCleanState(() => setModalVisible(false))}
-        footer={
-          <Box float="right">
-            <SpaceBetween direction="horizontal" size="xs">
-              <Button variant="link" onClick={withCleanState(() => setModalVisible(false))}>
-                Cancel
-              </Button>
-              <Button
-                variant="primary"
-                onClick={withCleanState(() => {
-                  setModalVisible(false);
-                  tableRef.current?.cancelEdit?.();
-                })}
-              >
-                Discard
-              </Button>
-            </SpaceBetween>
-          </Box>
-        }
+    <>
+      <Checkbox
+        checked={keyboardNavigation}
+        onChange={event => {
+          setUrlParams({ keyboardNavigation: event.detail.checked });
+          window.location.reload();
+        }}
       >
-        <Alert type="warning" statusIconAriaLabel="Warning">
-          Are you sure you want to discard any unsaved changes?
-        </Alert>
-      </Modal>
-    </ScreenshotArea>
+        Keyboard navigation
+      </Checkbox>
+      <ScreenshotArea disableAnimations={true}>
+        <input data-testid="focus" aria-label="focus input" />
+        <Demo setModalVisible={setModalVisible} ref={tableRef} keyboardNavigation={keyboardNavigation} />
+        <Modal
+          visible={modalVisible}
+          header="Discard changes"
+          closeAriaLabel="Close modal"
+          onDismiss={withCleanState(() => setModalVisible(false))}
+          footer={
+            <Box float="right">
+              <SpaceBetween direction="horizontal" size="xs">
+                <Button variant="link" onClick={withCleanState(() => setModalVisible(false))}>
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  onClick={withCleanState(() => {
+                    setModalVisible(false);
+                    tableRef.current?.cancelEdit?.();
+                  })}
+                >
+                  Discard
+                </Button>
+              </SpaceBetween>
+            </Box>
+          }
+        >
+          <Alert type="warning" statusIconAriaLabel="Warning">
+            Are you sure you want to discard any unsaved changes?
+          </Alert>
+        </Modal>
+      </ScreenshotArea>
+    </>
   );
 }

pages/table/inline-actions.page.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useContext } from 'react';
 import Box from '~components/box';
 import Button from '~components/button';
 import ButtonDropdown from '~components/button-dropdown';
@@ -11,6 +11,14 @@ import ScreenshotArea from '../utils/screenshot-area';
 import { Instance, generateItems } from './generate-data';
 import { columnsConfig, selectionLabels } from './shared-configs';
 import Link from '~components/link';
+import AppContext, { AppContextType } from '../app/app-context';
+import { Checkbox } from '~components';
+
+type PageContext = React.Context<
+  AppContextType<{
+    keyboardNavigation: boolean;
+  }>
+>;
 
 const items = generateItems(10);
 
@@ -148,63 +156,82 @@ const columnDefinitionsOnlyIcons: TableProps.ColumnDefinition<Instance>[] = [
 ];
 
 export default function () {
+  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
+  const keyboardNavigation = urlParams.keyboardNavigation ?? false;
+
   return (
-    <ScreenshotArea style={{ padding: '10px 50px' }}>
-      <Box padding="l">
-        <h1>Tables with inline actions</h1>
-        <SpaceBetween size="l">
-          <Table
-            ariaLabels={selectionLabels}
-            header={<Header>Table with single actions</Header>}
-            columnDefinitions={columnDefinitionsSingle}
-            items={items}
-          />
-          <Table
-            ariaLabels={selectionLabels}
-            header={<Header>Table with multiple actions</Header>}
-            columnDefinitions={columnDefinitionsMultiple}
-            items={items}
-          />
-          <Table
-            ariaLabels={selectionLabels}
-            header={
-              <Header
-                actions={
-                  <SpaceBetween size="xs" direction="horizontal">
-                    <ButtonDropdown
-                      items={[
-                        { id: 'connect', text: 'Connect' },
-                        { id: 'view', text: 'View details' },
-                        { id: 'manage', text: 'Manage instances' },
-                      ]}
-                    >
-                      Actions
-                    </ButtonDropdown>
-                    <Button variant="primary">Launch instance</Button>
-                  </SpaceBetween>
-                }
-              >
-                Table with action dropdowns
-              </Header>
-            }
-            selectionType="multi"
-            columnDefinitions={columnDefinitionsDropdown}
-            items={items}
-          />
-          <Table
-            ariaLabels={selectionLabels}
-            header={<Header>Table with mixed actions</Header>}
-            columnDefinitions={columnDefinitionsMixed}
-            items={items}
-          />
-          <Table
-            ariaLabels={selectionLabels}
-            header={<Header>Table with only icon actions</Header>}
-            columnDefinitions={columnDefinitionsOnlyIcons}
-            items={items}
-          />
-        </SpaceBetween>
-      </Box>
-    </ScreenshotArea>
+    <>
+      <Checkbox
+        checked={keyboardNavigation}
+        onChange={e => {
+          setUrlParams({ keyboardNavigation: e.detail.checked });
+          window.location.reload();
+        }}
+      >
+        Keyboard navigation
+      </Checkbox>
+      <ScreenshotArea style={{ padding: '10px 50px' }}>
+        <Box padding="l">
+          <h1>Tables with inline actions</h1>
+          <SpaceBetween size="l">
+            <Table
+              ariaLabels={selectionLabels}
+              header={<Header>Table with single actions</Header>}
+              columnDefinitions={columnDefinitionsSingle}
+              items={items}
+              enableKeyboardNavigation={keyboardNavigation}
+            />
+            <Table
+              ariaLabels={selectionLabels}
+              header={<Header>Table with multiple actions</Header>}
+              columnDefinitions={columnDefinitionsMultiple}
+              items={items}
+              enableKeyboardNavigation={keyboardNavigation}
+            />
+            <Table
+              ariaLabels={selectionLabels}
+              header={
+                <Header
+                  actions={
+                    <SpaceBetween size="xs" direction="horizontal">
+                      <ButtonDropdown
+                        items={[
+                          { id: 'connect', text: 'Connect' },
+                          { id: 'view', text: 'View details' },
+                          { id: 'manage', text: 'Manage instances' },
+                        ]}
+                      >
+                        Actions
+                      </ButtonDropdown>
+                      <Button variant="primary">Launch instance</Button>
+                    </SpaceBetween>
+                  }
+                >
+                  Table with action dropdowns
+                </Header>
+              }
+              selectionType="multi"
+              columnDefinitions={columnDefinitionsDropdown}
+              items={items}
+              enableKeyboardNavigation={keyboardNavigation}
+            />
+            <Table
+              ariaLabels={selectionLabels}
+              header={<Header>Table with mixed actions</Header>}
+              columnDefinitions={columnDefinitionsMixed}
+              items={items}
+              enableKeyboardNavigation={keyboardNavigation}
+            />
+            <Table
+              ariaLabels={selectionLabels}
+              header={<Header>Table with only icon actions</Header>}
+              columnDefinitions={columnDefinitionsOnlyIcons}
+              items={items}
+              enableKeyboardNavigation={keyboardNavigation}
+            />
+          </SpaceBetween>
+        </Box>
+      </ScreenshotArea>
+    </>
   );
 }

pages/table/resizable-columns.page.tsx

@@ -97,6 +97,7 @@ type PageContext = React.Context<
     stickyHeader: boolean;
     resizableColumns: boolean;
     fullPage: boolean;
+    keyboardNavigation: boolean;
   }>
 >;
 
@@ -105,6 +106,7 @@ export default function App() {
   const wrapLines = urlParams.wrapLines ?? false;
   const stickyHeader = urlParams.stickyHeader ?? false;
   const resizableColumns = urlParams.resizableColumns ?? true;
+  const keyboardNavigation = urlParams.keyboardNavigation ?? false;
   const fullPage = urlParams.fullPage ?? false;
 
   const [renderKey, setRenderKey] = useState(0);
@@ -161,6 +163,15 @@ export default function App() {
             <Checkbox checked={fullPage} onChange={event => setUrlParams({ fullPage: event.detail.checked })}>
               Full page table
             </Checkbox>
+            <Checkbox
+              checked={keyboardNavigation}
+              onChange={event => {
+                setUrlParams({ keyboardNavigation: event.detail.checked });
+                window.location.reload();
+              }}
+            >
+              Keyboard navigation
+            </Checkbox>
           </div>
           <div>
             {columnsConfig.map(column => (
@@ -200,6 +211,7 @@ export default function App() {
           onSortingChange={event => setSorting(event.detail)}
           onColumnWidthsChange={handleWidthChange}
           variant={fullPage ? 'full-page' : undefined}
+          enableKeyboardNavigation={keyboardNavigation}
         />
       </ScreenshotArea>
     </SpaceBetween>

pages/table/sticky-columns.page.tsx

@@ -19,6 +19,7 @@ type DemoContext = React.Context<
     resizableColumns: boolean;
     stickyHeader: boolean;
     sortingDisabled: boolean;
+    enableKeyboardNavigation: boolean;
     selectionType: undefined | 'single' | 'multi';
     stickyColumnsFirst: string;
     stickyColumnsLast: string;
@@ -190,6 +191,16 @@ export default () => {
             >
               Sorting disabled
             </Checkbox>
+
+            <Checkbox
+              checked={urlParams.enableKeyboardNavigation}
+              onChange={event => {
+                setUrlParams({ enableKeyboardNavigation: event.detail.checked });
+                window.location.reload();
+              }}
+            >
+              Keyboard navigation
+            </Checkbox>
           </FormField>
 
           <FormField label="Selection type">

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -12953,6 +12953,13 @@ Use it in conjunction with the content display preference of the [collection pre
       "optional": true,
       "type": "string",
     },
+    Object {
+      "description": "Use this property to activate advanced keyboard navigation and focusing behaviors.
+When set to \`true\` table cells become navigable with arrow keys and the entire table has a single Tab stop.",
+      "name": "enableKeyboardNavigation",
+      "optional": true,
+      "type": "boolean",
+    },
     Object {
       "description": " Use this property to inform screen readers which range of items is currently displayed in the table.
  It specifies the index (1-based) of the first item in the table.