feat: Table grid navigation

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<{
+    enableKeyboardNavigation: boolean;
+  }>
+>;
 
 let __editStateDirty = false;
 
@@ -205,6 +212,7 @@ const Demo = forwardRef(
     tableRef: ForwardedRef<TableProps.Ref>
   ) => {
     const [items, setItems] = useState(initialItems);
+    const { urlParams } = useContext(AppContext as PageContext);
 
     const handleSubmit: TableProps.SubmitEditFunction<DistributionInfo> = async (currentItem, column, newValue) => {
       let value = newValue;
@@ -253,12 +261,14 @@ const Demo = forwardRef(
         resizableColumns={true}
         ariaLabels={ariaLabels}
         stickyHeader={true}
+        enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
       />
     );
   }
 );
 
 export default function () {
+  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
   const [modalVisible, setModalVisible] = useState(false);
   const tableRef = useRef<TableProps.Ref>(null);
 
@@ -275,37 +285,52 @@ 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>
-        }
-      >
-        <Alert type="warning" statusIconAriaLabel="Warning">
-          Are you sure you want to discard any unsaved changes?
-        </Alert>
-      </Modal>
-    </ScreenshotArea>
+    <Box margin="s">
+      <SpaceBetween size="s">
+        <Checkbox
+          checked={urlParams.enableKeyboardNavigation}
+          onChange={event => {
+            setUrlParams({ enableKeyboardNavigation: event.detail.checked });
+            window.location.reload();
+          }}
+        >
+          Keyboard navigation
+        </Checkbox>
+
+        <input data-testid="focus" aria-label="focus input" />
+      </SpaceBetween>
+
+      <ScreenshotArea disableAnimations={true}>
+        <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>
+          }
+        >
+          <Alert type="warning" statusIconAriaLabel="Warning">
+            Are you sure you want to discard any unsaved changes?
+          </Alert>
+        </Modal>
+      </ScreenshotArea>
+    </Box>
   );
 }

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<{
+    enableKeyboardNavigation: boolean;
+  }>
+>;
 
 const items = generateItems(10);
 
@@ -148,8 +156,20 @@ const columnDefinitionsOnlyIcons: TableProps.ColumnDefinition<Instance>[] = [
 ];
 
 export default function () {
+  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
+
   return (
     <ScreenshotArea style={{ padding: '10px 50px' }}>
+      <Checkbox
+        checked={urlParams.enableKeyboardNavigation}
+        onChange={event => {
+          setUrlParams({ enableKeyboardNavigation: event.detail.checked });
+          window.location.reload();
+        }}
+      >
+        Keyboard navigation
+      </Checkbox>
+
       <Box padding="l">
         <h1>Tables with inline actions</h1>
         <SpaceBetween size="l">
@@ -158,12 +178,14 @@ export default function () {
             header={<Header>Table with single actions</Header>}
             columnDefinitions={columnDefinitionsSingle}
             items={items}
+            enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
           />
           <Table
             ariaLabels={selectionLabels}
             header={<Header>Table with multiple actions</Header>}
             columnDefinitions={columnDefinitionsMultiple}
             items={items}
+            enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
           />
           <Table
             ariaLabels={selectionLabels}
@@ -190,18 +212,21 @@ export default function () {
             selectionType="multi"
             columnDefinitions={columnDefinitionsDropdown}
             items={items}
+            enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
           />
           <Table
             ariaLabels={selectionLabels}
             header={<Header>Table with mixed actions</Header>}
             columnDefinitions={columnDefinitionsMixed}
             items={items}
+            enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
           />
           <Table
             ariaLabels={selectionLabels}
             header={<Header>Table with only icon actions</Header>}
             columnDefinitions={columnDefinitionsOnlyIcons}
             items={items}
+            enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
           />
         </SpaceBetween>
       </Box>

pages/table/performance.page.tsx

@@ -1,12 +1,20 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import Button from '~components/button';
 import Box from '~components/box';
 import Header from '~components/header';
 import Input from '~components/input';
 import Table, { TableProps } from '~components/table';
 import ScreenshotArea from '../utils/screenshot-area';
+import AppContext, { AppContextType } from '../app/app-context';
+import { Checkbox, SpaceBetween } from '~components';
+
+type PageContext = React.Context<
+  AppContextType<{
+    enableKeyboardNavigation: boolean;
+  }>
+>;
 
 const COLUMN_COUNT = 100;
 
@@ -49,9 +57,11 @@ const columnDefinitions: Array<TableProps.ColumnDefinition<Item>> = [...new Arra
 
 export default function App() {
   const [isActive, setIsActive] = useState(false);
+  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
   return (
     <ScreenshotArea>
       <h1>Table performance test</h1>
+
       {isActive ? (
         <Table
           columnDefinitions={columnDefinitions}
@@ -71,17 +81,27 @@ export default function App() {
             </Box>
           }
           header={<Header>Table with inline editing</Header>}
+          enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
         />
       ) : (
-        <Button
-          onClick={() => {
-            setIsActive(true);
-            console.time('render');
-            requestAnimationFrame(() => console.timeEnd('render'));
-          }}
-        >
-          Render Table
-        </Button>
+        <SpaceBetween size="s">
+          <Checkbox
+            checked={urlParams.enableKeyboardNavigation}
+            onChange={event => setUrlParams({ enableKeyboardNavigation: event.detail.checked })}
+          >
+            Keyboard navigation
+          </Checkbox>
+
+          <Button
+            onClick={() => {
+              setIsActive(true);
+              console.time('render');
+              requestAnimationFrame(() => console.timeEnd('render'));
+            }}
+          >
+            Render Table
+          </Button>
+        </SpaceBetween>
       )}
     </ScreenshotArea>
   );

pages/table/resizable-columns.page.tsx

@@ -99,6 +99,7 @@ type PageContext = React.Context<
     fullPage: boolean;
     withColumnIds?: boolean;
     withSelection?: boolean;
+    enableKeyboardNavigation?: boolean;
   }>
 >;
 
@@ -111,6 +112,7 @@ export default function App() {
     fullPage = false,
     withColumnIds = true,
     withSelection = false,
+    enableKeyboardNavigation = false,
   } = urlParams;
 
   const [renderKey, setRenderKey] = useState(0);
@@ -173,6 +175,15 @@ export default function App() {
             <Checkbox checked={withSelection} onChange={event => setUrlParams({ withSelection: event.detail.checked })}>
               With row selection
             </Checkbox>
+            <Checkbox
+              checked={enableKeyboardNavigation}
+              onChange={event => {
+                setUrlParams({ enableKeyboardNavigation: event.detail.checked });
+                window.location.reload();
+              }}
+            >
+              Keyboard navigation
+            </Checkbox>
           </div>
           <div>
             {columnsConfig.map(column => (
@@ -213,6 +224,7 @@ export default function App() {
           onSortingChange={event => setSorting(event.detail)}
           onColumnWidthsChange={handleWidthChange}
           variant={fullPage ? 'full-page' : undefined}
+          enableKeyboardNavigation={enableKeyboardNavigation}
         />
       </ScreenshotArea>
     </SpaceBetween>

pages/table/selection.page.tsx

@@ -1,15 +1,35 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import SpaceBetween from '~components/space-between';
 import Table from '~components/table';
 import ScreenshotArea from '../utils/screenshot-area';
 import { ariaLabels, createSimpleItems, simpleColumns } from './shared-configs';
+import { Checkbox } from '~components';
+import AppContext, { AppContextType } from '../app/app-context';
 
-export default function () {
+type PageContext = React.Context<
+  AppContextType<{
+    enableKeyboardNavigation: boolean;
+  }>
+>;
+
+export default function Page() {
+  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
   return (
     <>
       <h1>Table selection</h1>
+
+      <Checkbox
+        checked={urlParams.enableKeyboardNavigation}
+        onChange={event => {
+          setUrlParams({ enableKeyboardNavigation: event.detail.checked });
+          window.location.reload();
+        }}
+      >
+        Keyboard navigation
+      </Checkbox>
+
       <ScreenshotArea disableAnimations={true}>
         <SpaceBetween size="m">
           <MultiSelection />
@@ -21,6 +41,7 @@ export default function () {
 }
 
 const MultiSelection = () => {
+  const { urlParams } = useContext(AppContext as PageContext);
   const [selectedItems, setSelectedItems] = useState([{ number: 2, text: 'Two' }]);
   return (
     <Table
@@ -32,11 +53,13 @@ const MultiSelection = () => {
       onSelectionChange={({ detail: { selectedItems } }) => setSelectedItems(selectedItems)}
       isItemDisabled={({ text }) => text === 'Two'}
       ariaLabels={ariaLabels}
+      enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
     />
   );
 };
 
 const SingleSelection = () => {
+  const { urlParams } = useContext(AppContext as PageContext);
   const [selectedItems, setSelectedItems] = useState([{ number: 1, text: 'One' }]);
   return (
     <Table
@@ -47,6 +70,7 @@ const SingleSelection = () => {
       trackBy={'text'}
       onSelectionChange={({ detail: { selectedItems } }) => setSelectedItems(selectedItems)}
       ariaLabels={ariaLabels}
+      enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
     />
   );
 };