diff --git a/pages/table/editable.page.tsx b/pages/table/editable.page.tsx
index 6bb1359ea0..fe9c0cc674 100644
--- a/pages/table/editable.page.tsx
+++ b/pages/table/editable.page.tsx
@@ -263,7 +263,7 @@ const Demo = forwardRef(
resizableColumns={true}
ariaLabels={ariaLabels}
stickyHeader={true}
- keyboardNavigation={keyboardNavigation}
+ enableKeyboardNavigation={keyboardNavigation}
/>
);
}
diff --git a/pages/table/inline-actions.page.tsx b/pages/table/inline-actions.page.tsx
index 3f7595cb50..d86cb2807d 100644
--- a/pages/table/inline-actions.page.tsx
+++ b/pages/table/inline-actions.page.tsx
@@ -179,14 +179,14 @@ export default function () {
header={Table with single actions}
columnDefinitions={columnDefinitionsSingle}
items={items}
- keyboardNavigation={keyboardNavigation}
+ enableKeyboardNavigation={keyboardNavigation}
/>
Table with multiple actions}
columnDefinitions={columnDefinitionsMultiple}
items={items}
- keyboardNavigation={keyboardNavigation}
+ enableKeyboardNavigation={keyboardNavigation}
/>
Table with mixed actions}
columnDefinitions={columnDefinitionsMixed}
items={items}
- keyboardNavigation={keyboardNavigation}
+ enableKeyboardNavigation={keyboardNavigation}
/>
Table with only icon actions}
columnDefinitions={columnDefinitionsOnlyIcons}
items={items}
- keyboardNavigation={keyboardNavigation}
+ enableKeyboardNavigation={keyboardNavigation}
/>
diff --git a/pages/table/resizable-columns.page.tsx b/pages/table/resizable-columns.page.tsx
index d1055df647..baa8e827d6 100644
--- a/pages/table/resizable-columns.page.tsx
+++ b/pages/table/resizable-columns.page.tsx
@@ -211,7 +211,7 @@ export default function App() {
onSortingChange={event => setSorting(event.detail)}
onColumnWidthsChange={handleWidthChange}
variant={fullPage ? 'full-page' : undefined}
- keyboardNavigation={keyboardNavigation}
+ enableKeyboardNavigation={keyboardNavigation}
/>
diff --git a/pages/table/sticky-columns.page.tsx b/pages/table/sticky-columns.page.tsx
index f9892fee90..1863b1b5fd 100644
--- a/pages/table/sticky-columns.page.tsx
+++ b/pages/table/sticky-columns.page.tsx
@@ -19,7 +19,7 @@ type DemoContext = React.Context<
resizableColumns: boolean;
stickyHeader: boolean;
sortingDisabled: boolean;
- keyboardNavigation: boolean;
+ enableKeyboardNavigation: boolean;
selectionType: undefined | 'single' | 'multi';
stickyColumnsFirst: string;
stickyColumnsLast: string;
@@ -193,9 +193,9 @@ export default () => {
{
- setUrlParams({ keyboardNavigation: event.detail.checked });
+ setUrlParams({ enableKeyboardNavigation: event.detail.checked });
window.location.reload();
}}
>
diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap
index fbe90043e9..0347838f45 100644
--- a/src/__tests__/__snapshots__/documenter.test.ts.snap
+++ b/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.
@@ -12993,12 +13000,6 @@ by the \`cell\` property of each column definition in the \`columnDefinitions\`
"optional": false,
"type": "ReadonlyArray",
},
- Object {
- "description": "Experimental API",
- "name": "keyboardNavigation",
- "optional": true,
- "type": "boolean",
- },
Object {
"description": "Renders the table in a loading state. We recommend that you also set a \`loadingText\`.",
"name": "loading",
@@ -13154,12 +13155,6 @@ Return a promise to keep loading state while the submit request is in progress."
"optional": true,
"type": "TableProps.SubmitEditFunction",
},
- Object {
- "description": "Experimental API",
- "name": "suppressKeyboardNavigationFor",
- "optional": true,
- "type": "((element: HTMLElement) => boolean) | string",
- },
Object {
"description": "Use this property to inform screen readers how many items there are in a table.
It specifies the total count of all items in a table.
diff --git a/src/table/interfaces.tsx b/src/table/interfaces.tsx
index 70d9d2169f..f6f3277f01 100644
--- a/src/table/interfaces.tsx
+++ b/src/table/interfaces.tsx
@@ -318,9 +318,10 @@ export interface TableProps extends BaseComponentProps {
onEditCancel?: CancelableEventHandler;
/**
- * Experimental API
+ * 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.
*/
- keyboardNavigation?: boolean;
+ enableKeyboardNavigation?: boolean;
}
export namespace TableProps {
diff --git a/src/table/internal.tsx b/src/table/internal.tsx
index 40be9bdb37..f21bc00baa 100644
--- a/src/table/internal.tsx
+++ b/src/table/internal.tsx
@@ -106,7 +106,7 @@ const InternalTable = React.forwardRef(
renderAriaLive,
stickyColumns,
columnDisplay,
- keyboardNavigation,
+ enableKeyboardNavigation: keyboardNavigation,
__funnelSubStepProps,
...rest
}: InternalTableProps,