@servicetitan/docs-anvil-uikit-contrib 29.2.0 → 29.3.1

package/docs/table.mdx

@@ -168,7 +168,7 @@ export interface TableProps<T, TId extends IdType = any, P = never, PId extends
 
 #### Basic
 
-Simple example with some out of the box functionality.
+Simple example with some out of the box functionality. This example enables keyboard navigation and is accessible for screen readers.
 
 <CodeDemo example={TableExample} srcPath="table/src/demo/overview/table.tsx" theme="light" />
 
@@ -224,3 +224,48 @@ const tableState = useTableState(
 -   `OnUpdateDataRoot` (default) - the current page will be reset when the reference to the `data` variable changes. When only the inner contents of the array are changed - the table page is kept.
 
 You can check the demonstration of different pagination reset modes at [anvil-uikit-contrib's Storybook page](https://anvil-uikit-contrib.st.dev/?path=/story/table-useobservingtablestate)
+
+## Keyboard navigation and accessibility
+
+To enable keyboard navigation, pass the `navigatable` prop to the `Table` component. It will enable keyboard navigation for built-in Anvil 1 and `@servicetitan/table` cells.
+
+To make your custom cells compatible, spread the supplied `tdProps` to the `td` element.
+
+:::info
+
+It's recommended to spread `tdProps` to custom cells even if `navigatable` is disabled as it provides standard and accessibility attributes to `td` elements generated inside Anvil 1 table.
+
+:::
+
+Simple custom cell:
+
+```tsx
+import { FC } from 'react';
+import { TableCellProps } from '@servicetitan/table';
+
+const CustomCell: FC<TableCellProps> = ({ tdProps }) => {
+    return <td {...props.tdProps}>I'm a custom cell!</td>;
+};
+```
+
+The same works for editable cells created with `getEditableCell` method:
+
+```tsx
+import { FC } from 'react';
+import { DatePicker } from '@servicetitan/design-system';
+import { getEditableCell, EditorProps } from '@servicetitan/table';
+
+const DateEditor = observer<FC<EditorProps<Date | string | undefined>>>(
+    ({ fieldState: { value, onChange, hasError }, className, tdProps }) => {
+        return (
+            <td className={className} {...tdProps}>
+                <DatePicker value={value} onChange={onChange} error={hasError} />
+            </td>
+        );
+    }
+);
+
+export const DateEditableCell = getEditableCell({
+    editor: DateEditor,
+});
+```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/docs-anvil-uikit-contrib",
-    "version": "29.2.0",
+    "version": "29.3.1",
     "description": "",
     "repository": {
         "type": "git",
@@ -16,5 +16,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "ca96fa4e0aaf009f3d5b6a1a8f7cfc489e60dcdf"
+    "gitHead": "b3d36831303c3b53747c9bd11bf11a080a82fc89"
 }