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,