feat: Allow to disable keyboard navigation on Table (#3892)

* feat: Allow to disable keyboard navigation on `Table`

* Create many-rabbits-run.md

* lint

.changeset/many-rabbits-run.md

@@ -0,0 +1,6 @@
+---
+"@marigold/docs": minor
+"@marigold/components": minor
+---
+
+feat: Allow to disable keyboard navigation on `Table`

docs/content/components/collection/table/table.mdx

@@ -67,6 +67,13 @@ import { Table } from '@marigold/components';
       description: 'Handler that is called when the sort direction changes.',
       default: 'none',
     },
+    {
+      property: 'disableKeyboardNavigation',
+      type: 'boolean',
+      description:
+        'Disable keyboard navigation. Use if you have input fields in your table. Be aware that this is bad for accessibility.',
+      default: 'false',
+    },
   ]}
 />
 

packages/components/src/Table/Table.stories.tsx

@@ -716,7 +716,11 @@ export const InputTable: Story = {
 
     return (
       <Stack space={3}>
-        <Table aria-label="Example dynamic collection table" {...args}>
+        <Table
+          aria-label="Example dynamic collection table"
+          disableKeyboardNavigation
+          {...args}
+        >
           <Table.Header columns={columns}>
             {column => <Table.Column>{column.name}</Table.Column>}
           </Table.Header>

packages/components/src/Table/Table.tsx

@@ -38,6 +38,7 @@ export interface TableProps
   size?: string;
   stretch?: boolean;
   stickyHeader?: boolean;
+  disableKeyboardNavigation?: boolean;
 }
 
 // Table Component
@@ -47,6 +48,7 @@ export const Table: Table = ({
   size,
   stretch,
   selectionMode = 'none',
+  disableKeyboardNavigation = false,
   stickyHeader,
   ...props
 }: TableProps) => {
@@ -60,6 +62,15 @@ export const Table: Table = ({
       // TODO: It this necessary?
       props.selectionBehavior !== 'replace',
   });
+
+  /**
+   * Behavior is a bit flacky with the table when using a keyboard
+   * so we test here for undefined here to be save.
+   */
+  if (disableKeyboardNavigation !== undefined) {
+    state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
+  }
+
   const { gridProps } = useTable(props, state, tableRef);
   const classNames = useClassNames({
     component: 'Table',

packages/components/src/Table/TableCell.tsx

@@ -40,6 +40,7 @@ export const TableCell = ({ cell, align = 'left' }: TableCellProps) => {
 
   const { focusProps, isFocusVisible } = useFocusRing();
   const stateProps = useStateProps({ disabled, focusVisible: isFocusVisible });
+
   return (
     <td
       ref={ref}