@workday/canvas-kit-mcp 16.0.13 → 16.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -3
- package/dist/apps/multiselect.html +18 -18
- package/dist/apps/table.html +275 -133
- package/dist/cli.js +91 -11
- package/dist/cli.js.map +2 -2
- package/dist/index.js +91 -11
- package/dist/index.js.map +2 -2
- package/dist/lib/accessibility/Popups.mdx +1 -5
- package/dist/lib/accessibility/tables/ExpandableRows.mdx +29 -0
- package/dist/lib/accessibility/tables/FilterableColumnHeaders.mdx +39 -0
- package/dist/lib/accessibility/tables/NestedRows.mdx +41 -0
- package/dist/lib/accessibility/tables/Overview.mdx +32 -0
- package/dist/lib/accessibility/tables/SelectableRows.mdx +30 -0
- package/dist/lib/accessibility/tables/SortableColumnHeaders.mdx +25 -0
- package/dist/lib/accessibility/{TestingTableWithFormFields.mdx → tables/WithFormFields.mdx} +3 -2
- package/dist/types/lib/accessibility-enums.d.ts +3 -1
- package/dist/types/lib/accessibility-enums.d.ts.map +1 -1
- package/dist/types/lib/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/dist/lib/accessibility/TablesAdvanced.mdx +0 -128
package/dist/index.js
CHANGED
|
@@ -13,7 +13,7 @@ import { z } from "zod";
|
|
|
13
13
|
// package.json
|
|
14
14
|
var package_default = {
|
|
15
15
|
name: "@workday/canvas-kit-mcp",
|
|
16
|
-
version: "16.0.
|
|
16
|
+
version: "16.0.15",
|
|
17
17
|
description: "MCP package for Canvas Kit",
|
|
18
18
|
author: "Workday, Inc. (https://www.workday.com)",
|
|
19
19
|
license: "Apache-2.0",
|
|
@@ -83,6 +83,11 @@ var ACCESSIBILITY_SCENARIOS = [
|
|
|
83
83
|
"overview",
|
|
84
84
|
"page-structure",
|
|
85
85
|
"tables",
|
|
86
|
+
"expandable-rows",
|
|
87
|
+
"nested-rows",
|
|
88
|
+
"selectable-rows",
|
|
89
|
+
"filterable-column-headers",
|
|
90
|
+
"sortable-column-headers",
|
|
86
91
|
"popups",
|
|
87
92
|
"aria-live",
|
|
88
93
|
"headers",
|
|
@@ -91,6 +96,33 @@ var ACCESSIBILITY_SCENARIOS = [
|
|
|
91
96
|
"forms",
|
|
92
97
|
"color-contrast"
|
|
93
98
|
];
|
|
99
|
+
var TABLE_PATTERN_SCENARIOS = [
|
|
100
|
+
"tables",
|
|
101
|
+
"expandable-rows",
|
|
102
|
+
"nested-rows",
|
|
103
|
+
"selectable-rows",
|
|
104
|
+
"filterable-column-headers",
|
|
105
|
+
"sortable-column-headers",
|
|
106
|
+
"forms"
|
|
107
|
+
];
|
|
108
|
+
function expandAccessibilityScenarioSlugs(slugs) {
|
|
109
|
+
const result = [];
|
|
110
|
+
const seen = /* @__PURE__ */ new Set();
|
|
111
|
+
const add = (slug) => {
|
|
112
|
+
if (!seen.has(slug)) {
|
|
113
|
+
seen.add(slug);
|
|
114
|
+
result.push(slug);
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
for (const slug of slugs) {
|
|
118
|
+
if (slug === "tables") {
|
|
119
|
+
TABLE_PATTERN_SCENARIOS.forEach(add);
|
|
120
|
+
} else {
|
|
121
|
+
add(slug);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
return result;
|
|
125
|
+
}
|
|
94
126
|
var ACCESSIBILITY_COMPONENTS = [
|
|
95
127
|
"action-bar",
|
|
96
128
|
"ai-ingress-button-(ai)",
|
|
@@ -221,13 +253,16 @@ function resolveAccessibilityScenarioSlugs({
|
|
|
221
253
|
scenario
|
|
222
254
|
}) {
|
|
223
255
|
if (component && scenario) {
|
|
224
|
-
return
|
|
256
|
+
return expandAccessibilityScenarioSlugs([
|
|
257
|
+
...getAccessibilityScenarioSlugsForComponent(component),
|
|
258
|
+
scenario
|
|
259
|
+
]);
|
|
225
260
|
}
|
|
226
261
|
if (component) {
|
|
227
|
-
return getAccessibilityScenarioSlugsForComponent(component);
|
|
262
|
+
return expandAccessibilityScenarioSlugs(getAccessibilityScenarioSlugsForComponent(component));
|
|
228
263
|
}
|
|
229
264
|
if (scenario) {
|
|
230
|
-
return [scenario];
|
|
265
|
+
return expandAccessibilityScenarioSlugs([scenario]);
|
|
231
266
|
}
|
|
232
267
|
return [];
|
|
233
268
|
}
|
|
@@ -273,9 +308,29 @@ var config_default = {
|
|
|
273
308
|
slug: "page-structure"
|
|
274
309
|
},
|
|
275
310
|
{
|
|
276
|
-
source: "accessibility/
|
|
311
|
+
source: "accessibility/tables/Overview.mdx",
|
|
277
312
|
slug: "tables"
|
|
278
313
|
},
|
|
314
|
+
{
|
|
315
|
+
source: "accessibility/tables/ExpandableRows.mdx",
|
|
316
|
+
slug: "expandable-rows"
|
|
317
|
+
},
|
|
318
|
+
{
|
|
319
|
+
source: "accessibility/tables/NestedRows.mdx",
|
|
320
|
+
slug: "nested-rows"
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
source: "accessibility/tables/SelectableRows.mdx",
|
|
324
|
+
slug: "selectable-rows"
|
|
325
|
+
},
|
|
326
|
+
{
|
|
327
|
+
source: "accessibility/tables/FilterableColumnHeaders.mdx",
|
|
328
|
+
slug: "filterable-column-headers"
|
|
329
|
+
},
|
|
330
|
+
{
|
|
331
|
+
source: "accessibility/tables/SortableColumnHeaders.mdx",
|
|
332
|
+
slug: "sortable-column-headers"
|
|
333
|
+
},
|
|
279
334
|
{
|
|
280
335
|
source: "accessibility/Popups.mdx",
|
|
281
336
|
slug: "popups"
|
|
@@ -297,7 +352,7 @@ var config_default = {
|
|
|
297
352
|
slug: "windows-high-contrast"
|
|
298
353
|
},
|
|
299
354
|
{
|
|
300
|
-
source: "accessibility/
|
|
355
|
+
source: "accessibility/tables/WithFormFields.mdx",
|
|
301
356
|
slug: "forms"
|
|
302
357
|
},
|
|
303
358
|
{
|
|
@@ -384,8 +439,8 @@ var stories_config_default = {
|
|
|
384
439
|
title: "Components/Containers/Table",
|
|
385
440
|
storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs",
|
|
386
441
|
mdxPath: "modules/react/table/stories/Table.mdx",
|
|
387
|
-
mdxProse: "# Canvas Kit Table\n\n`Table` is a simple styled compound component that renders a\n[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to\npresent information in a two-dimensional table comprised of rows and columns of cells containing\ndata. `Table` is built off of `BaseTable` and is using\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features.\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\nUsers may not want to use a `caption` so they can import\n[Heading](https://workday.github.io/canvas-kit/?path=/docs/components-text-heading--docs) or\n[Text](https://workday.github.io/canvas-kit/?path=/docs/components-text-text--docs) instead. This\nwill give the user more flexibility around the customization of the title/heading of their table.\n```tsx\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {Heading} from '@workday/canvas-kit-react/text';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = {\n parentContainerStyles: createStyles({\n marginBlockEnd: system.gap.md,\n }),\n tableHeaderStyles: createStyles({\n backgroundColor: system.color.surface.raised,\n }),\n};\n\nexport const BasicWithHeading = () => {\n const headingID = useUniqueId();\n\n return (\n <>\n <Heading as=\"h3\" id={headingID} size=\"small\" cs={styleOverrides.parentContainerStyles}>\n Pizza Toppings\n </Heading>\n <Table aria-labelledby={headingID}>\n <Table.Head>\n <Table.Row>\n <Table.Header scope=\"col\" cs={styleOverrides.tableHeaderStyles}>\n Toppings\n </Table.Header>\n <Table.Header scope=\"col\" cs={styleOverrides.tableHeaderStyles}>\n Amount\n </Table.Header>\n </Table.Row>\n </Table.Head>\n <Table.Body>\n <Table.Row>\n <Table.Cell>Pepperoni</Table.Cell>\n <Table.Cell>2.5 oz</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Mozzarella</Table.Cell>\n <Table.Cell>5 oz</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Basil</Table.Cell>\n <Table.Cell>10 Leaves</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n </>\n );\n};\n```\n\n### Right to Left\n\nTable supports right-to-left languages when specified in the CanvasProvider theme.\n```tsx\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst tableHeaderStyles = createStyles({\n backgroundColor: system.color.surface.raised,\n});\n\nexport const RightToLeft = () => {\n return (\n <CanvasProvider dir=\"rtl\">\n <Table>\n <Table.Caption>\u05DE\u05E9\u05E7\u05D0\u05D5\u05EA \u05E7\u05E4\u05D4 \u05D5\u05D2\u05D3\u05DC\u05D9\u05DD</Table.Caption>\n <Table.Head>\n <Table.Row>\n <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n \u05DE\u05B7\u05E9\u05C1\u05E7\u05B6\u05D4\n </Table.Header>\n <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n \u05D2\u05D5\u05D3\u05DC\n </Table.Header>\n </Table.Row>\n </Table.Head>\n <Table.Body>\n <Table.Row>\n <Table.Cell>\u05D0\u05E1\u05E4\u05E8\u05E1\u05D5</Table.Cell>\n <Table.Cell>1 \u05D2\u05E8</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\u05DE\u05E7\u05D9\u05D0\u05D8\u05D5</Table.Cell>\n <Table.Cell>2 \u05D2\u05E8\u05DD \u05D0\u05E1\u05E4\u05E8\u05E1\u05D5</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\u05D2\u05D6\u05D9\u05E8\u05D4</Table.Cell>\n <Table.Cell>2 \u05D2\u05E8\u05DD \u05D0\u05E1\u05E4\u05E8\u05E1\u05D5, 1 \u05D2\u05E8\u05DD \u05D7\u05DC\u05D1 \u05DE\u05D5\u05E7\u05E6\u05E3</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n </CanvasProvider>\n );\n};\n```\n\n### Example with Caption\n\nUsers are free to use a `caption` instead of a heading. A `caption` is not required but it is good\nfor\n[accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#accessibility_concerns)\npurposes.\n```tsx\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst tableHeaderStyles = createStyles({\n backgroundColor: system.color.surface.default,\n});\n\nexport const Basic = () => {\n return (\n <Table>\n <Table.Caption>Coffee Drinks and Sizes</Table.Caption>\n <Table.Head>\n <Table.Row>\n <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n Drink\n </Table.Header>\n <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n Size\n </Table.Header>\n </Table.Row>\n </Table.Head>\n <Table.Body>\n <Table.Row>\n <Table.Cell>Espresso</Table.Cell>\n <Table.Cell>1 oz</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Macchiato</Table.Cell>\n <Table.Cell>2 oz Espresso</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Cortado</Table.Cell>\n <Table.Cell>2 oz Espresso, 1 oz Foamed Milk</Table.Cell>\n </Table.Row>\n <Table.Row></Table.Row>\n <Table.Row>\n <Table.Cell>Cappuccino</Table.Cell>\n <Table.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n );\n};\n```\n\n### Fixed Column\n\nUsers may add styles to the `Table.Header` to render a fixed column. The example below assigns a\n`width` to the `Table` to guarantee the fixed column is triggered, but you are free to omit the\n`width` if you would only like the fixed column to be triggered if necessary.\n```tsx\nimport React from 'react';\n\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {Heading} from '@workday/canvas-kit-react/text';\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = {\n parentContainerStyles: createStyles({\n marginBlockEnd: system.gap.md,\n }),\n tableStyles: createStyles({\n width: px2rem(690),\n }),\n tableHeaderStyles: createStyles({\n position: 'sticky',\n left: '0',\n backgroundColor: system.color.surface.raised,\n borderInlineEnd: `${px2rem(2)} solid ${system.color.border.default}`,\n }),\n};\n\nexport const FixedColumn = () => {\n const headingID = useUniqueId();\n const exampleData = [\n {\n make: 'Porsche',\n model: '992 911 GT3',\n year: '2022',\n price: 'Starts at $160,000',\n engine: '4.0L Flat 6',\n transmission: 'PDK or 7-Speed Manual',\n horsepower: '502hp',\n torque: '346 lb-ft',\n curbWeight: '3,164 lbs',\n },\n {\n make: 'BMW',\n model: 'M5 Competition',\n year: '2018',\n price: 'Starts at $105,000',\n engine: 'Twin-Turbo 4.4L V8',\n transmission: 'Automatic',\n horsepower: '627hp',\n torque: '553 lb-ft',\n curbWeight: '4,345 lbs',\n },\n {\n make: 'Alfa Romeo',\n model: '1750 GTV',\n year: '1970',\n price: '$30,000 - $55,000',\n engine: '1.75L Inline 4',\n transmission: 'Manual',\n horsepower: '122hp',\n torque: '137 lb-ft',\n curbWeight: '2,140 lbs',\n },\n {\n make: 'Lotus',\n model: 'Emira',\n year: '2023',\n price: 'Starts at $78,000',\n engine: 'Supercharged 3.5L V6',\n transmission: 'Automatic or 6-Speed Manual',\n horsepower: '400hp',\n torque: '317 lb-ft',\n curbWeight: '3520 lbs',\n },\n {\n make: 'Toyota',\n model: 'Supra',\n year: '1998',\n price: '$40,000 - $80,000',\n engine: '3.0L Inline 6',\n transmission: 'Automatic or 6-Speed Manual',\n horsepower: '320hp',\n torque: '315 lb-ft',\n curbWeight: '3,599 lbs',\n },\n {\n make: 'Nissan',\n model: 'Skyline GT-R',\n year: '1994',\n price: '$45,000 - $90,000',\n engine: '2.6L Twin-Turbo Inline 6',\n transmission: '5-Speed Manual',\n horsepower: '276hp',\n torque: '260 lb-ft',\n curbWeight: '3,153 lbs',\n },\n ];\n return (\n <>\n <Heading as=\"h3\" id={headingID} size=\"small\" cs={styleOverrides.parentContainerStyles}>\n Performance Car Specs\n </Heading>\n <Table cs={styleOverrides.tableStyles} aria-labelledby={headingID} tabIndex={0}>\n <Table.Head>\n <Table.Row>\n <Table.Header scope=\"col\" cs={styleOverrides.tableHeaderStyles}>\n Make\n </Table.Header>\n <Table.Header scope=\"col\">Model</Table.Header>\n <Table.Header scope=\"col\">Year</Table.Header>\n <Table.Header scope=\"col\">Price</Table.Header>\n <Table.Header scope=\"col\">Engine</Table.Header>\n <Table.Header scope=\"col\">Transmission</Table.Header>\n <Table.Header scope=\"col\">Horsepower</Table.Header>\n <Table.Header scope=\"col\">Torque</Table.Header>\n <Table.Header scope=\"col\">Curb Weight</Table.Header>\n </Table.Row>\n </Table.Head>\n <Table.Body>\n {exampleData.map((item, index) => (\n <React.Fragment key={index}>\n <Table.Row>\n <Table.Header scope=\"row\" cs={styleOverrides.tableHeaderStyles}>\n {item.make}\n </Table.Header>\n <Table.Cell>{item.model}</Table.Cell>\n <Table.Cell>{item.year}</Table.Cell>\n <Table.Cell>{item.price}</Table.Cell>\n <Table.Cell>{item.engine}</Table.Cell>\n <Table.Cell>{item.transmission}</Table.Cell>\n <Table.Cell>{item.horsepower}</Table.Cell>\n <Table.Cell>{item.torque}</Table.Cell>\n <Table.Cell>{item.curbWeight}</Table.Cell>\n </Table.Row>\n </React.Fragment>\n ))}\n </Table.Body>\n </Table>\n </>\n );\n};\n```\n\n### Base Html Table Example\n\nIf a user needs a standard HTML\n[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) with no\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features, then they can\nuse the `BaseTable` component.\n```tsx\nimport {BaseTable} from '@workday/canvas-kit-react/table';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst tableHeaderStyles = createStyles({\n backgroundColor: system.color.surface.raised,\n});\n\nexport const BaseHtmlTable = () => {\n return (\n <BaseTable>\n <BaseTable.Caption>Coffee Drinks and Sizes</BaseTable.Caption>\n <BaseTable.Head>\n <BaseTable.Row>\n <BaseTable.Header scope=\"col\" cs={tableHeaderStyles}>\n Drink\n </BaseTable.Header>\n <BaseTable.Header scope=\"col\" cs={tableHeaderStyles}>\n Size\n </BaseTable.Header>\n </BaseTable.Row>\n </BaseTable.Head>\n <BaseTable.Body>\n <BaseTable.Row>\n <BaseTable.Cell>Espresso</BaseTable.Cell>\n <BaseTable.Cell>1 oz</BaseTable.Cell>\n </BaseTable.Row>\n <BaseTable.Row>\n <BaseTable.Cell>Macchiato</BaseTable.Cell>\n <BaseTable.Cell>2 oz Espresso</BaseTable.Cell>\n </BaseTable.Row>\n <BaseTable.Row>\n <BaseTable.Cell>Cortado</BaseTable.Cell>\n <BaseTable.Cell>2 oz Espresso, 1 oz Foamed Milk</BaseTable.Cell>\n </BaseTable.Row>\n <BaseTable.Row></BaseTable.Row>\n <BaseTable.Row>\n <BaseTable.Cell>Cappuccino</BaseTable.Cell>\n <BaseTable.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</BaseTable.Cell>\n </BaseTable.Row>\n </BaseTable.Body>\n </BaseTable>\n );\n};\n```\n\n### Which Component Should I Use?\n\n> If a user wants [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)\n> features with their Table, then use the\n> [Table](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#basic-example)\n> component.\n\n> If a user **does not** want\n> [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their\n> Table, then use the\n> [BaseTable](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#base-html-table-example)\n> component.\n\n### Advanced\n\nYou can also find several advanced Table examples in our Storybook Examples section.\n\n- [Expandable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#expandable-rows)\n- [Selectable Rows ](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#selectable-rows)\n- [Filterable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#filterable-column-headers)\n- [Sortable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#sortable-column-headers)\n\n### Custom Styles\n\nTable and its subcomponents support custom styling via the `cs` prop. For more information, check\nour\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\n\n## Component API\n\n",
|
|
388
|
-
accessibilityProse: ""
|
|
442
|
+
mdxProse: "# Canvas Kit Table\n\n`Table` is a simple styled compound component that renders a\n[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to\npresent information in a two-dimensional table comprised of rows and columns of cells containing\ndata. `Table` is built off of `BaseTable` and is using\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features.\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\nUsers may not want to use a `caption` so they can import\n[Heading](https://workday.github.io/canvas-kit/?path=/docs/components-text-heading--docs) or\n[Text](https://workday.github.io/canvas-kit/?path=/docs/components-text-text--docs) instead. This\nwill give the user more flexibility around the customization of the title/heading of their table.\n```tsx\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {Heading} from '@workday/canvas-kit-react/text';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = {\n parentContainerStyles: createStyles({\n marginBlockEnd: system.gap.md,\n }),\n tableHeaderStyles: createStyles({\n backgroundColor: system.color.surface.raised,\n }),\n};\n\nexport const BasicWithHeading = () => {\n const headingID = useUniqueId();\n\n return (\n <>\n <Heading as=\"h3\" id={headingID} size=\"small\" cs={styleOverrides.parentContainerStyles}>\n Pizza Toppings\n </Heading>\n <Table aria-labelledby={headingID}>\n <Table.Head>\n <Table.Row>\n <Table.Header scope=\"col\" cs={styleOverrides.tableHeaderStyles}>\n Toppings\n </Table.Header>\n <Table.Header scope=\"col\" cs={styleOverrides.tableHeaderStyles}>\n Amount\n </Table.Header>\n </Table.Row>\n </Table.Head>\n <Table.Body>\n <Table.Row>\n <Table.Cell>Pepperoni</Table.Cell>\n <Table.Cell>2.5 oz</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Mozzarella</Table.Cell>\n <Table.Cell>5 oz</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Basil</Table.Cell>\n <Table.Cell>10 Leaves</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n </>\n );\n};\n```\n\n### Right to Left\n\nTable supports right-to-left languages when specified in the CanvasProvider theme.\n```tsx\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst tableHeaderStyles = createStyles({\n backgroundColor: system.color.surface.raised,\n});\n\nexport const RightToLeft = () => {\n return (\n <CanvasProvider dir=\"rtl\">\n <Table>\n <Table.Caption>\u05DE\u05E9\u05E7\u05D0\u05D5\u05EA \u05E7\u05E4\u05D4 \u05D5\u05D2\u05D3\u05DC\u05D9\u05DD</Table.Caption>\n <Table.Head>\n <Table.Row>\n <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n \u05DE\u05B7\u05E9\u05C1\u05E7\u05B6\u05D4\n </Table.Header>\n <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n \u05D2\u05D5\u05D3\u05DC\n </Table.Header>\n </Table.Row>\n </Table.Head>\n <Table.Body>\n <Table.Row>\n <Table.Cell>\u05D0\u05E1\u05E4\u05E8\u05E1\u05D5</Table.Cell>\n <Table.Cell>1 \u05D2\u05E8</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\u05DE\u05E7\u05D9\u05D0\u05D8\u05D5</Table.Cell>\n <Table.Cell>2 \u05D2\u05E8\u05DD \u05D0\u05E1\u05E4\u05E8\u05E1\u05D5</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>\u05D2\u05D6\u05D9\u05E8\u05D4</Table.Cell>\n <Table.Cell>2 \u05D2\u05E8\u05DD \u05D0\u05E1\u05E4\u05E8\u05E1\u05D5, 1 \u05D2\u05E8\u05DD \u05D7\u05DC\u05D1 \u05DE\u05D5\u05E7\u05E6\u05E3</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n </CanvasProvider>\n );\n};\n```\n\n### Example with Caption\n\nUsers are free to use a `caption` instead of a heading. A `caption` is not required but it is good\nfor\n[accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#accessibility_concerns)\npurposes.\n```tsx\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst tableHeaderStyles = createStyles({\n backgroundColor: system.color.surface.default,\n});\n\nexport const Basic = () => {\n return (\n <Table>\n <Table.Caption>Coffee Drinks and Sizes</Table.Caption>\n <Table.Head>\n <Table.Row>\n <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n Drink\n </Table.Header>\n <Table.Header scope=\"col\" cs={tableHeaderStyles}>\n Size\n </Table.Header>\n </Table.Row>\n </Table.Head>\n <Table.Body>\n <Table.Row>\n <Table.Cell>Espresso</Table.Cell>\n <Table.Cell>1 oz</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Macchiato</Table.Cell>\n <Table.Cell>2 oz Espresso</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Cortado</Table.Cell>\n <Table.Cell>2 oz Espresso, 1 oz Foamed Milk</Table.Cell>\n </Table.Row>\n <Table.Row></Table.Row>\n <Table.Row>\n <Table.Cell>Cappuccino</Table.Cell>\n <Table.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</Table.Cell>\n </Table.Row>\n </Table.Body>\n </Table>\n );\n};\n```\n\n### Fixed Column\n\nUsers may add styles to the `Table.Header` to render a fixed column. The example below assigns a\n`width` to the `Table` to guarantee the fixed column is triggered, but you are free to omit the\n`width` if you would only like the fixed column to be triggered if necessary.\n```tsx\nimport React from 'react';\n\nimport {useUniqueId} from '@workday/canvas-kit-react/common';\nimport {Table} from '@workday/canvas-kit-react/table';\nimport {Heading} from '@workday/canvas-kit-react/text';\nimport {createStyles, px2rem} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst styleOverrides = {\n parentContainerStyles: createStyles({\n marginBlockEnd: system.gap.md,\n }),\n tableStyles: createStyles({\n width: px2rem(690),\n }),\n tableHeaderStyles: createStyles({\n position: 'sticky',\n left: '0',\n backgroundColor: system.color.surface.raised,\n borderInlineEnd: `${px2rem(2)} solid ${system.color.border.default}`,\n }),\n};\n\nexport const FixedColumn = () => {\n const headingID = useUniqueId();\n const exampleData = [\n {\n make: 'Porsche',\n model: '992 911 GT3',\n year: '2022',\n price: 'Starts at $160,000',\n engine: '4.0L Flat 6',\n transmission: 'PDK or 7-Speed Manual',\n horsepower: '502hp',\n torque: '346 lb-ft',\n curbWeight: '3,164 lbs',\n },\n {\n make: 'BMW',\n model: 'M5 Competition',\n year: '2018',\n price: 'Starts at $105,000',\n engine: 'Twin-Turbo 4.4L V8',\n transmission: 'Automatic',\n horsepower: '627hp',\n torque: '553 lb-ft',\n curbWeight: '4,345 lbs',\n },\n {\n make: 'Alfa Romeo',\n model: '1750 GTV',\n year: '1970',\n price: '$30,000 - $55,000',\n engine: '1.75L Inline 4',\n transmission: 'Manual',\n horsepower: '122hp',\n torque: '137 lb-ft',\n curbWeight: '2,140 lbs',\n },\n {\n make: 'Lotus',\n model: 'Emira',\n year: '2023',\n price: 'Starts at $78,000',\n engine: 'Supercharged 3.5L V6',\n transmission: 'Automatic or 6-Speed Manual',\n horsepower: '400hp',\n torque: '317 lb-ft',\n curbWeight: '3520 lbs',\n },\n {\n make: 'Toyota',\n model: 'Supra',\n year: '1998',\n price: '$40,000 - $80,000',\n engine: '3.0L Inline 6',\n transmission: 'Automatic or 6-Speed Manual',\n horsepower: '320hp',\n torque: '315 lb-ft',\n curbWeight: '3,599 lbs',\n },\n {\n make: 'Nissan',\n model: 'Skyline GT-R',\n year: '1994',\n price: '$45,000 - $90,000',\n engine: '2.6L Twin-Turbo Inline 6',\n transmission: '5-Speed Manual',\n horsepower: '276hp',\n torque: '260 lb-ft',\n curbWeight: '3,153 lbs',\n },\n ];\n return (\n <>\n <Heading as=\"h3\" id={headingID} size=\"small\" cs={styleOverrides.parentContainerStyles}>\n Performance Car Specs\n </Heading>\n <Table cs={styleOverrides.tableStyles} aria-labelledby={headingID} tabIndex={0}>\n <Table.Head>\n <Table.Row>\n <Table.Header scope=\"col\" cs={styleOverrides.tableHeaderStyles}>\n Make\n </Table.Header>\n <Table.Header scope=\"col\">Model</Table.Header>\n <Table.Header scope=\"col\">Year</Table.Header>\n <Table.Header scope=\"col\">Price</Table.Header>\n <Table.Header scope=\"col\">Engine</Table.Header>\n <Table.Header scope=\"col\">Transmission</Table.Header>\n <Table.Header scope=\"col\">Horsepower</Table.Header>\n <Table.Header scope=\"col\">Torque</Table.Header>\n <Table.Header scope=\"col\">Curb Weight</Table.Header>\n </Table.Row>\n </Table.Head>\n <Table.Body>\n {exampleData.map((item, index) => (\n <React.Fragment key={index}>\n <Table.Row>\n <Table.Header scope=\"row\" cs={styleOverrides.tableHeaderStyles}>\n {item.make}\n </Table.Header>\n <Table.Cell>{item.model}</Table.Cell>\n <Table.Cell>{item.year}</Table.Cell>\n <Table.Cell>{item.price}</Table.Cell>\n <Table.Cell>{item.engine}</Table.Cell>\n <Table.Cell>{item.transmission}</Table.Cell>\n <Table.Cell>{item.horsepower}</Table.Cell>\n <Table.Cell>{item.torque}</Table.Cell>\n <Table.Cell>{item.curbWeight}</Table.Cell>\n </Table.Row>\n </React.Fragment>\n ))}\n </Table.Body>\n </Table>\n </>\n );\n};\n```\n\n### Base Html Table Example\n\nIf a user needs a standard HTML\n[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) with no\n[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features, then they can\nuse the `BaseTable` component.\n```tsx\nimport {BaseTable} from '@workday/canvas-kit-react/table';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst tableHeaderStyles = createStyles({\n backgroundColor: system.color.surface.raised,\n});\n\nexport const BaseHtmlTable = () => {\n return (\n <BaseTable>\n <BaseTable.Caption>Coffee Drinks and Sizes</BaseTable.Caption>\n <BaseTable.Head>\n <BaseTable.Row>\n <BaseTable.Header scope=\"col\" cs={tableHeaderStyles}>\n Drink\n </BaseTable.Header>\n <BaseTable.Header scope=\"col\" cs={tableHeaderStyles}>\n Size\n </BaseTable.Header>\n </BaseTable.Row>\n </BaseTable.Head>\n <BaseTable.Body>\n <BaseTable.Row>\n <BaseTable.Cell>Espresso</BaseTable.Cell>\n <BaseTable.Cell>1 oz</BaseTable.Cell>\n </BaseTable.Row>\n <BaseTable.Row>\n <BaseTable.Cell>Macchiato</BaseTable.Cell>\n <BaseTable.Cell>2 oz Espresso</BaseTable.Cell>\n </BaseTable.Row>\n <BaseTable.Row>\n <BaseTable.Cell>Cortado</BaseTable.Cell>\n <BaseTable.Cell>2 oz Espresso, 1 oz Foamed Milk</BaseTable.Cell>\n </BaseTable.Row>\n <BaseTable.Row></BaseTable.Row>\n <BaseTable.Row>\n <BaseTable.Cell>Cappuccino</BaseTable.Cell>\n <BaseTable.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</BaseTable.Cell>\n </BaseTable.Row>\n </BaseTable.Body>\n </BaseTable>\n );\n};\n```\n\n### Which Component Should I Use?\n\n> If a user wants [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)\n> features with their Table, then use the\n> [Table](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#basic-example)\n> component.\n\n> If a user **does not** want\n> [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their\n> Table, then use the\n> [BaseTable](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#base-html-table-example)\n> component.\n\n### Advanced\n\nYou can also find several advanced Table examples in our\n[Guides > Accessibility > Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs)\nsection.\n\n- [Expandable Rows](?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs)\n- [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)\n- [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)\n- [Filterable Column Headers](?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs)\n- [Sortable Column Headers](?path=/docs/guides-accessibility-table-patterns-sortable-column-headers--docs)\n- [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)\n\n### Custom Styles\n\nTable and its subcomponents support custom styling via the `cs` prop. For more information, check\nour\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).\n\n## Accessibility\n\n`Table` is a styled compound wrapper around native HTML table elements (`<table>`, `<caption>`,\n`<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`). Assistive technology can announce column\nand row headers as users move through cells **only when** the markup is a real data table with\ncorrect headers and an accessible name. `Table` does **not** include a model, roving tabindex, or\nbuilt-in sort, filter, selection, or expand behavior.\n\nUse `Table` for tabular data with a relationship between rows and columns\u2014not for page layout.\nPrefer **`Table`** (CSS Grid) unless the design needs a standard HTML table layout without Grid;\nthen use **`BaseTable`**. The same accessibility requirements apply to both. For interactive table\npatterns, follow\n[Guides > Accessibility > Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs)\ninstead of inventing ARIA. See also\n[Table Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/table/).\n\n### Minimum accessible structure\n\nThe following matches the [Example with Caption](#example-with-caption) (`Basic` story): native\ntable markup with **`Table.Caption`** as the accessible name and **`scope=\"col\"`** on column\nheaders. The [Basic Example](#basic-example) uses a visible **`Heading`** and **`aria-labelledby`**\ninstead of a caption; that is an equally valid naming pattern (see **Accessibility Requirements**).\n\n```tsx\n\n<Table>\n <Table.Caption>Coffee Drinks and Sizes</Table.Caption>\n <Table.Head>\n <Table.Row>\n <Table.Header scope=\"col\">Drink</Table.Header>\n <Table.Header scope=\"col\">Size</Table.Header>\n </Table.Row>\n </Table.Head>\n <Table.Body>\n <Table.Row>\n <Table.Cell>Espresso</Table.Cell>\n <Table.Cell>1 oz</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Macchiato</Table.Cell>\n <Table.Cell>2 oz Espresso</Table.Cell>\n </Table.Row>\n </Table.Body>\n</Table>;\n```\n\nPut **`Table.Caption`** first when you use it (HTML requires `<caption>` as the first child of\n`<table>`). Pair every column header with **`scope=\"col\"`**. Do not render empty **`Table.Row`**\nelements.\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically when you compose `Table` (or `BaseTable`) with its\nsubcomponents. **Do not duplicate them** in consuming code.\n\n**Native table semantics** (_applied by `createComponent` element mapping_):\n\n- `Table`: `<table>`\n- `Table.Caption`: `<caption>`\n- `Table.Head`: `<thead>`\n- `Table.Body`: `<tbody>`\n- `Table.Footer`: `<tfoot>`\n- `Table.Row`: `<tr>` (`Table.Row` also sets CSS Grid column tracks from the count of valid child\n cells; this is layout only)\n- `Table.Header`: `<th>`\n- `Table.Cell`: `<td>`\n\n**Keyboard** (_standard `Table` behavior_):\n\n`Table` uses native `<table>` keyboard behavior. Do not add custom key handlers or grid-widget keys\non a data table.\n\nWhen **`Table`** overflows (the root stencil uses `overflow: auto`), add **`tabIndex={0}`** so\nkeyboard users can focus and scroll it, as in the [Fixed Column](#fixed-column) example. Omit\n**`tabIndex`** when the table does not scroll.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- The table is announced as a table, with its accessible name from **`Table.Caption`** or\n **`aria-labelledby`** / **`aria-label`** on **`Table`**\n- Moving across a row announces the **column** header (`scope=\"col\"`)\n- Moving down a column announces the **row** header when body cells use **`Table.Header`** with\n **`scope=\"row\"`**\n- Interactive controls inside cells are announced with their own name and role when focused\n\n### Accessibility Requirements\n\nRequired in application code for an accessible `Table`. There is **no** `useTableModel`. Canvas Kit\ndoes **not** set `scope`, an accessible name, `tabIndex`, or `id` / `headers` cell associations \u2014\nsupply those in application code when the table below requires them. Rows marked _(conditional)_\napply only when the situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** generate a simple data table with **`Table.Caption`**,\n**`Table.Head`** / **`Table.Body`**, **`scope=\"col\"`** on column headers, and **`Table.Cell`** for\nbody data. Omit **`Table.Footer`**, row headers, **`tabIndex`**, `id` / `headers` associations,\n**`aria-sort`**, **`aria-expanded`**, **`aria-level`**, selection checkboxes, and filter/sort popups\nunless the spec calls for those patterns.\n\n**Heading instead of caption** _(conditional)_:\n\nWhen the design uses a visible heading (or other text) instead of **`Table.Caption`**, give that\nheading a unique `id` and set **`aria-labelledby`** on **`Table`**. Do not also render\n**`Table.Caption`** unless the design needs both a caption and extra labelling. See\n[Basic Example](#basic-example).\n\n```tsx\n<Heading as=\"h3\" id={headingId}>\n Pizza Toppings\n</Heading>\n<Table aria-labelledby={headingId}>{/* \u2026 */}</Table>\n```\n\n**Interactive and advanced patterns** _(conditional)_:\n\nDo not invent table ARIA. Copy the matching Canvas Kit guide when the spec includes that behavior:\n\n- [Expandable Rows](?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs)\n- [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)\n- [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)\n- [Filterable Column Headers](?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs)\n- [Sortable Column Headers](?path=/docs/guides-accessibility-table-patterns-sortable-column-headers--docs)\n- [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)\n\n| Requirement | How to satisfy |\n| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Data table, not layout | Compose **`Table`** (or **`BaseTable`**) with **`Head`**, **`Body`**, **`Row`**, **`Header`**, and **`Cell`**. Do not use a table to position non-tabular UI. |\n| Accessible name | **`Table.Caption`** with a descriptive title, **or** **`aria-labelledby`** on **`Table`** pointing at a visible heading `id` (see **Heading instead of caption**). Canvas Kit does not set **`aria-labelledby`**. |\n| Column headers | Set **`scope=\"col\"`** on every **`Table.Header`** in **`Table.Head`**. **`Table.Header`** renders `<th>` but does not set `scope`. Do not use **`Table.Cell`** (`<td>`) for column headers. |\n| Row headers _(conditional)_ | When the first (or identifying) column names each row, set **`scope=\"row\"`** on **`Table.Header`** in the body, as in [Fixed Column](#fixed-column). Do not rely on `<th>` alone. |\n| Keyboard access to overflow _(conditional)_ | If the table scrolls, set **`tabIndex={0}`** on **`Table`**. Omit it when content does not overflow. |\n| Footer _(conditional)_ | **`Table.Footer`** only when the design includes summary or footer rows. |\n| Form controls in cells _(conditional)_ | Label every control (prefer **`FormField`**). See [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs) and [Form Field](?path=/docs/components-inputs-form-field--docs). |\n| Sort, filter, select, expand, or nest _(conditional)_ | Follow the matching [Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs) guide. **Ask the developer** which pattern the spec requires before generating `aria-sort`, `aria-expanded`, `aria-level`, `aria-owns`, live regions, or selection checkboxes. |\n\n**Summary for code generation:**\n\n- **REQUIRED:** semantic `Table` composition, accessible name (caption or `aria-labelledby`),\n `scope=\"col\"` on column headers\n- **CONDITIONAL:** heading + `aria-labelledby`, `scope=\"row\"`, `tabIndex={0}` for overflow,\n `Table.Footer`, form-field labelling in cells, advanced table patterns from the guides\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Manually set `role=\"table\"`, `role=\"row\"`, `role=\"columnheader\"`, `role=\"rowheader\"`, or\n `role=\"cell\"` on **`Table`** subcomponents \u2014 they already render native table elements\n- Omit **`scope`** on **`Table.Header`**, or use **`Table.Cell`** for column or row headers\n- Generate `id` / `headers` associations on cells for a simple data table \u2014 use **`scope`** instead\n (see **Accessibility Requirements**)\n- Leave the table unnamed (no **`Table.Caption`**, **`aria-labelledby`**, or **`aria-label`**), or\n set **`aria-labelledby`** when **`Table.Caption`** already names the table\n- Use a table for page layout\n- Add **`tabIndex={0}`** on a table that does not scroll, or omit it on a horizontally/vertically\n scrollable table\n- Set **`aria-sort`**, **`aria-expanded`**, **`aria-level`**, **`aria-owns`**, or selection\n checkboxes by default \u2014 those belong to specific\n [Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs) and need a matching design\n spec\n- Nest a `<table>` inside a cell to fake hierarchy, or add extra **`Table.Body`** elements to fake a\n tree \u2014 see [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)\n- Put a \"Select All\" checkbox in a column header **`Table.Header`** without following\n [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)\n- Place unlabeled inputs in cells, or rely on the column header alone without checking\n [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)\n- Generate **`role=\"grid\"`** / grid-widget keyboard behavior on **`Table`** \u2014 CSS Grid on\n **`Table.Row`** is visual layout, not an ARIA grid\n\n## Component API\n\n",
|
|
443
|
+
accessibilityProse: '## Accessibility\n\n`Table` is a styled compound wrapper around native HTML table elements (`<table>`, `<caption>`,\n`<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`). Assistive technology can announce column\nand row headers as users move through cells **only when** the markup is a real data table with\ncorrect headers and an accessible name. `Table` does **not** include a model, roving tabindex, or\nbuilt-in sort, filter, selection, or expand behavior.\n\nUse `Table` for tabular data with a relationship between rows and columns\u2014not for page layout.\nPrefer **`Table`** (CSS Grid) unless the design needs a standard HTML table layout without Grid;\nthen use **`BaseTable`**. The same accessibility requirements apply to both. For interactive table\npatterns, follow\n[Guides > Accessibility > Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs)\ninstead of inventing ARIA. See also\n[Table Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/table/).\n\n### Minimum accessible structure\n\nThe following matches the [Example with Caption](#example-with-caption) (`Basic` story): native\ntable markup with **`Table.Caption`** as the accessible name and **`scope="col"`** on column\nheaders. The [Basic Example](#basic-example) uses a visible **`Heading`** and **`aria-labelledby`**\ninstead of a caption; that is an equally valid naming pattern (see **Accessibility Requirements**).\n\n```tsx\n\n<Table>\n <Table.Caption>Coffee Drinks and Sizes</Table.Caption>\n <Table.Head>\n <Table.Row>\n <Table.Header scope="col">Drink</Table.Header>\n <Table.Header scope="col">Size</Table.Header>\n </Table.Row>\n </Table.Head>\n <Table.Body>\n <Table.Row>\n <Table.Cell>Espresso</Table.Cell>\n <Table.Cell>1 oz</Table.Cell>\n </Table.Row>\n <Table.Row>\n <Table.Cell>Macchiato</Table.Cell>\n <Table.Cell>2 oz Espresso</Table.Cell>\n </Table.Row>\n </Table.Body>\n</Table>;\n```\n\nPut **`Table.Caption`** first when you use it (HTML requires `<caption>` as the first child of\n`<table>`). Pair every column header with **`scope="col"`**. Do not render empty **`Table.Row`**\nelements.\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically when you compose `Table` (or `BaseTable`) with its\nsubcomponents. **Do not duplicate them** in consuming code.\n\n**Native table semantics** (_applied by `createComponent` element mapping_):\n\n- `Table`: `<table>`\n- `Table.Caption`: `<caption>`\n- `Table.Head`: `<thead>`\n- `Table.Body`: `<tbody>`\n- `Table.Footer`: `<tfoot>`\n- `Table.Row`: `<tr>` (`Table.Row` also sets CSS Grid column tracks from the count of valid child\n cells; this is layout only)\n- `Table.Header`: `<th>`\n- `Table.Cell`: `<td>`\n\n**Keyboard** (_standard `Table` behavior_):\n\n`Table` uses native `<table>` keyboard behavior. Do not add custom key handlers or grid-widget keys\non a data table.\n\nWhen **`Table`** overflows (the root stencil uses `overflow: auto`), add **`tabIndex={0}`** so\nkeyboard users can focus and scroll it, as in the [Fixed Column](#fixed-column) example. Omit\n**`tabIndex`** when the table does not scroll.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- The table is announced as a table, with its accessible name from **`Table.Caption`** or\n **`aria-labelledby`** / **`aria-label`** on **`Table`**\n- Moving across a row announces the **column** header (`scope="col"`)\n- Moving down a column announces the **row** header when body cells use **`Table.Header`** with\n **`scope="row"`**\n- Interactive controls inside cells are announced with their own name and role when focused\n\n### Accessibility Requirements\n\nRequired in application code for an accessible `Table`. There is **no** `useTableModel`. Canvas Kit\ndoes **not** set `scope`, an accessible name, `tabIndex`, or `id` / `headers` cell associations \u2014\nsupply those in application code when the table below requires them. Rows marked _(conditional)_\napply only when the situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** generate a simple data table with **`Table.Caption`**,\n**`Table.Head`** / **`Table.Body`**, **`scope="col"`** on column headers, and **`Table.Cell`** for\nbody data. Omit **`Table.Footer`**, row headers, **`tabIndex`**, `id` / `headers` associations,\n**`aria-sort`**, **`aria-expanded`**, **`aria-level`**, selection checkboxes, and filter/sort popups\nunless the spec calls for those patterns.\n\n**Heading instead of caption** _(conditional)_:\n\nWhen the design uses a visible heading (or other text) instead of **`Table.Caption`**, give that\nheading a unique `id` and set **`aria-labelledby`** on **`Table`**. Do not also render\n**`Table.Caption`** unless the design needs both a caption and extra labelling. See\n[Basic Example](#basic-example).\n\n```tsx\n<Heading as="h3" id={headingId}>\n Pizza Toppings\n</Heading>\n<Table aria-labelledby={headingId}>{/* \u2026 */}</Table>\n```\n\n**Interactive and advanced patterns** _(conditional)_:\n\nDo not invent table ARIA. Copy the matching Canvas Kit guide when the spec includes that behavior:\n\n- [Expandable Rows](?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs)\n- [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)\n- [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)\n- [Filterable Column Headers](?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs)\n- [Sortable Column Headers](?path=/docs/guides-accessibility-table-patterns-sortable-column-headers--docs)\n- [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)\n\n| Requirement | How to satisfy |\n| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Data table, not layout | Compose **`Table`** (or **`BaseTable`**) with **`Head`**, **`Body`**, **`Row`**, **`Header`**, and **`Cell`**. Do not use a table to position non-tabular UI. |\n| Accessible name | **`Table.Caption`** with a descriptive title, **or** **`aria-labelledby`** on **`Table`** pointing at a visible heading `id` (see **Heading instead of caption**). Canvas Kit does not set **`aria-labelledby`**. |\n| Column headers | Set **`scope="col"`** on every **`Table.Header`** in **`Table.Head`**. **`Table.Header`** renders `<th>` but does not set `scope`. Do not use **`Table.Cell`** (`<td>`) for column headers. |\n| Row headers _(conditional)_ | When the first (or identifying) column names each row, set **`scope="row"`** on **`Table.Header`** in the body, as in [Fixed Column](#fixed-column). Do not rely on `<th>` alone. |\n| Keyboard access to overflow _(conditional)_ | If the table scrolls, set **`tabIndex={0}`** on **`Table`**. Omit it when content does not overflow. |\n| Footer _(conditional)_ | **`Table.Footer`** only when the design includes summary or footer rows. |\n| Form controls in cells _(conditional)_ | Label every control (prefer **`FormField`**). See [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs) and [Form Field](?path=/docs/components-inputs-form-field--docs). |\n| Sort, filter, select, expand, or nest _(conditional)_ | Follow the matching [Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs) guide. **Ask the developer** which pattern the spec requires before generating `aria-sort`, `aria-expanded`, `aria-level`, `aria-owns`, live regions, or selection checkboxes. |\n\n**Summary for code generation:**\n\n- **REQUIRED:** semantic `Table` composition, accessible name (caption or `aria-labelledby`),\n `scope="col"` on column headers\n- **CONDITIONAL:** heading + `aria-labelledby`, `scope="row"`, `tabIndex={0}` for overflow,\n `Table.Footer`, form-field labelling in cells, advanced table patterns from the guides\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Manually set `role="table"`, `role="row"`, `role="columnheader"`, `role="rowheader"`, or\n `role="cell"` on **`Table`** subcomponents \u2014 they already render native table elements\n- Omit **`scope`** on **`Table.Header`**, or use **`Table.Cell`** for column or row headers\n- Generate `id` / `headers` associations on cells for a simple data table \u2014 use **`scope`** instead\n (see **Accessibility Requirements**)\n- Leave the table unnamed (no **`Table.Caption`**, **`aria-labelledby`**, or **`aria-label`**), or\n set **`aria-labelledby`** when **`Table.Caption`** already names the table\n- Use a table for page layout\n- Add **`tabIndex={0}`** on a table that does not scroll, or omit it on a horizontally/vertically\n scrollable table\n- Set **`aria-sort`**, **`aria-expanded`**, **`aria-level`**, **`aria-owns`**, or selection\n checkboxes by default \u2014 those belong to specific\n [Table Patterns](?path=/docs/guides-accessibility-table-patterns--docs) and need a matching design\n spec\n- Nest a `<table>` inside a cell to fake hierarchy, or add extra **`Table.Body`** elements to fake a\n tree \u2014 see [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)\n- Put a "Select All" checkbox in a column header **`Table.Header`** without following\n [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)\n- Place unlabeled inputs in cells, or rely on the column header alone without checking\n [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)\n- Generate **`role="grid"`** / grid-widget keyboard behavior on **`Table`** \u2014 CSS Grid on\n **`Table.Row`** is visual layout, not an ARIA grid'
|
|
389
444
|
},
|
|
390
445
|
skeleton: {
|
|
391
446
|
title: "Components/Indicators/Skeleton",
|
|
@@ -685,11 +740,36 @@ function getServer() {
|
|
|
685
740
|
description: "Guidance for landmarks, headings, navigation, and logical focus order in Canvas Kit applications.",
|
|
686
741
|
slug: "page-structure"
|
|
687
742
|
},
|
|
688
|
-
"accessibility/
|
|
743
|
+
"accessibility/tables/Overview.mdx": {
|
|
689
744
|
title: "Canvas Kit Table Accessibility",
|
|
690
|
-
description: "
|
|
745
|
+
description: "Index of Canvas Kit accessible table patterns, including when to use semantic tables and links to expandable rows, nested rows, selectable rows, filterable and sortable column headers, and tables with form fields.",
|
|
691
746
|
slug: "tables"
|
|
692
747
|
},
|
|
748
|
+
"accessibility/tables/ExpandableRows.mdx": {
|
|
749
|
+
title: "Canvas Kit Expandable Rows Table Pattern",
|
|
750
|
+
description: "Guidance for accordion-style expandable table rows: aria-expanded on the chevron, tooltip naming, and colspan detail rows. This is a research example, not a Canvas Kit primitive.",
|
|
751
|
+
slug: "expandable-rows"
|
|
752
|
+
},
|
|
753
|
+
"accessibility/tables/NestedRows.mdx": {
|
|
754
|
+
title: "Canvas Kit Nested Rows Table Pattern",
|
|
755
|
+
description: "Guidance for hierarchical records as additional table rows in one table: tree-column chevrons, aria-expanded, aria-describedby, and aria-level. Distinct from expandable (colspan) rows. This is a research example, not a Canvas Kit primitive.",
|
|
756
|
+
slug: "nested-rows"
|
|
757
|
+
},
|
|
758
|
+
"accessibility/tables/SelectableRows.mdx": {
|
|
759
|
+
title: "Canvas Kit Selectable Rows Table Pattern",
|
|
760
|
+
description: "Guidance for row-selection checkboxes in tables: avoiding Select All as a column header, tooltip names, aria-describedby to row headers, and thead/tbody considerations.",
|
|
761
|
+
slug: "selectable-rows"
|
|
762
|
+
},
|
|
763
|
+
"accessibility/tables/FilterableColumnHeaders.mdx": {
|
|
764
|
+
title: "Canvas Kit Filterable Column Headers Table Pattern",
|
|
765
|
+
description: "Guidance for filter popups in table column headers: focus redirect, initial focus, aria-owns for reading order, tooltip filtered state, and live-region result counts.",
|
|
766
|
+
slug: "filterable-column-headers"
|
|
767
|
+
},
|
|
768
|
+
"accessibility/tables/SortableColumnHeaders.mdx": {
|
|
769
|
+
title: "Canvas Kit Sortable Column Headers Table Pattern",
|
|
770
|
+
description: "Guidance for sortable table column headers: aria-sort on th, TertiaryButton in the header, and tooltip descriptions that apply only while focusing the sort control.",
|
|
771
|
+
slug: "sortable-column-headers"
|
|
772
|
+
},
|
|
693
773
|
"accessibility/Popups.mdx": {
|
|
694
774
|
title: "Canvas Kit Popup and Overlay Accessibility",
|
|
695
775
|
description: "Guidance for dialogs, modals, popups, menus, tooltips, focus management, dismissal, and reading order.",
|
|
@@ -715,7 +795,7 @@ function getServer() {
|
|
|
715
795
|
description: "Guidance for forced colors and Windows High Contrast themes, including focus, state, border, and icon visibility.",
|
|
716
796
|
slug: "windows-high-contrast"
|
|
717
797
|
},
|
|
718
|
-
"accessibility/
|
|
798
|
+
"accessibility/tables/WithFormFields.mdx": {
|
|
719
799
|
title: "Canvas Kit Form Accessibility",
|
|
720
800
|
description: "Guidance from existing Canvas Kit accessibility documentation for form fields in table contexts.",
|
|
721
801
|
slug: "forms"
|