@workday/canvas-kit-mcp 16.0.14 → 16.0.16

package/dist/lib/accessibility/Popups.mdx

@@ -47,10 +47,6 @@ hooks. **Tradeoff:** the popup is constrained by ancestor `overflow` and positio
 
 <ExampleCodeBlock code={InlinePopupNoPortal} />
 
-For the same reading-order goal using a **portaled** popup mounted into a sentinel next to the
-trigger (with `PopupStack.pushStackContext`), see
-[**Testing > Inline Portals**](?path=/docs/guides-accessibility-testing-inline-portals--docs).
-
 ## 2. Reading order with `aria-owns`
 
 You can keep the default portal (content at the bottom of `body`) and still try to **re-parent** the
@@ -70,6 +66,6 @@ that card as “owned” by the trigger for browsing and announcements.
 The Canvas Kit [**Dialog**](?path=/docs/components-popups-dialog--docs) builds this pattern in.
 
 Another `aria-owns` example:
-[Advanced Tables > Table With Filterable Column Headers](?path=/docs/guides-accessibility-examples-advanced-tables--docs#filterable-column-headers).
+[Table Patterns > Filterable Column Headers](?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs).
 
 <ExampleCodeBlock code={PopupAriaOwns} />

package/dist/lib/accessibility/tables/ExpandableRows.mdx

@@ -0,0 +1,29 @@
+import {Meta} from '@storybook/blocks';
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
+import {ExpandableRows} from '../examples/Table/WithExpandableRows';
+
+<Meta title="Guides/Accessibility/Table Patterns/Expandable Rows" />
+
+## Expandable Rows
+
+Expandable Rows combines the likes of an accordion with tabular data tables. Column 1 renders icon
+buttons with 2 states, a collapsed and expanded state. A new row that spans the entire width of the
+table is added to the table just after the expanded row.
+
+- The `aria-expanded` property is added to the chevron button to communicate this state to screen
+  reader users.
+- A Canvas accessible `Tooltip` component is used to assign names to each icon button based on the
+  most useful value in the row. In this example, we combined the car make (in column 1) and model
+  (in column 2) together. This allows everyone to view the name of the icon buttons by hovering the
+  mouse or focusing with the keyboard.
+- The expanded row uses `colspan` to span the entire width of the table and support screen readers.
+  This space provides flexibility to show headings, lists, and other structured content for the
+  table row above.
+- There is no explicit relationship between a row of cells and the spanned content below it. The
+  spanned content is assumed to belong to the row of cells above it, based on established accordion
+  patterns and logical reading order of content rendered to the screen.
+- Outlining hierarchy with additional nested rows in the table is not supported for screen readers
+  in this example.
+
+<ExampleCodeBlock code={ExpandableRows} />

package/dist/lib/accessibility/tables/FilterableColumnHeaders.mdx

@@ -0,0 +1,39 @@
+import {Meta} from '@storybook/blocks';
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
+import {FilterableColumnHeaders} from '../examples/Table/WithColumnHeaderFilters';
+
+<Meta title="Guides/Accessibility/Table Patterns/Filterable Column Headers" />
+
+## Filterable Column Headers
+
+In this example, we demonstrate using the `Popup` component in each column header allowing users to
+search and filter the data on the table. The `Popup` component relies on React Portals to render the
+popup elements at the bottom of the browser's DOM presenting 2 key challenges for accessibility:
+
+1. Keyboard focus order of the elements in the popup,
+2. Screen readers' reading order of the content rendered in the browser.
+
+Here's what we did about it:
+
+- Canvas Kit includes a `usePopupModel` hook, with quite a few additional hooks developers can add
+  to their models. In particular, the `useFocusRedirect` hook manages keyboard focus between the
+  `<Popup.Target>` button and the popup content.
+- The `useInitialFocus` hook allows developers to specify which element receives keyboard focus when
+  the popup appears. In this example, we auto-focused the search input field.
+- To address the reading order of content, we set the `aria-owns` property onto the parent
+  `<Table.Header>` component (`<th>` DOM element) with 2 unique `id` values. The first `id` refers
+  to the `<Popup.Target>` button and the second refers to the `<Popup.Card>` container element. This
+  manually reassigns the column header's `<Popup.Target>` button and the `Popup` contents as
+  siblings in the browser's accessibility tree hierarchy. Screen readers **should** read the column
+  header buttons and the popup content in sequential order even though they are not siblings in the
+  DOM.
+- The `type='description'` variant of the Canvas `Tooltip` is used to communicate the filtered state
+  of the column header, and assigned to the accessible description of the column header
+  `<TertiaryButton>` component.
+- The `AriaLiveRegion` component is used to render the "X of Y items" status inside the table
+  caption. This enables screen readers to automatically describe the filter state changes of the
+  table content to users in real time. We recommend validating whether this use of a live region is
+  well supported for your screen reader and browser combinations first.
+
+<ExampleCodeBlock code={FilterableColumnHeaders} />

package/dist/lib/accessibility/tables/NestedRows.mdx

@@ -0,0 +1,41 @@
+import {Meta} from '@storybook/blocks';
+
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
+import {NestedRows} from '../examples/Table/WithNestedRows';
+
+<Meta title="Guides/Accessibility/Table Patterns/Nested Rows" />
+
+## Nested Rows
+
+Nested Rows shows a hierarchy of related records in **one table**, using additional `<tr>` elements
+for child rows. Expanding a project reveals its phases; expanding a phase reveals its tasks. The
+chevron and name share the Name cell so they indent together. Collapsing a parent hides its
+descendants even if a child was previously expanded.
+
+This is a different pattern from
+[Expandable Rows](?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs). That
+example inserts a `colspan` panel with extra content for a single parent row. It does **not** add
+nested table rows. Use Nested Rows when the children are themselves tabular records (same columns at
+every level). Use Expandable Rows when the extra content is not a row of the same table.
+
+- Child rows are siblings in the same `<tbody>`, not a nested `<table>` and not extra `<tbody>`
+  elements used to fake a tree.
+- The Name cell is the tree column: it holds the chevron `TertiaryButton` and the row name together
+  so the control stays next to the label it expands. Leaf rows keep an empty slot the same width as
+  the button so names line up with their siblings.
+- The `aria-expanded` property is added to the chevron button to communicate this state to screen
+  reader users.
+- A Canvas Kit `Tooltip` names each chevron **Project**, **Phase**, or **Task** based on the row's
+  depth. The visible name stays in the row header, so the button name describes the _kind_ of row
+  rather than repeating the label.
+- Since those button names are not unique, we added `aria-describedby` to each chevron, referencing
+  the unique `id` on the name text in the same cell. That gives screen readers the specific project
+  or phase the control belongs to, similar to the
+  [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)
+  checkboxes.
+- `aria-level` is set on each `Table.Row` (`1` = project, `2` = phase, `3` = task) to describe
+  depth. Support for `aria-level` on HTML table rows is uneven across screen readers and browsers.
+  Validate the combinations you support. This is a research example, not a Canvas Kit primitive.
+
+<ExampleCodeBlock code={NestedRows} />

package/dist/lib/accessibility/tables/Overview.mdx

@@ -0,0 +1,32 @@
+import {Meta} from '@storybook/blocks';
+
+<Meta title="Guides/Accessibility/Table Patterns" />
+
+## Advanced Table Examples
+
+Tables should only be used to organize data that has a clear relationship between rows and columns,
+like a calendar or a schedule. Never use a table just for page layout.
+
+When you use the proper HTML table markup, a screen reader can help a user navigate the table. It
+will automatically read the column and row headers as they move through the data, so they always
+know what information they're looking at.
+
+- All tables should have a clear header and a descriptive title.
+- Keep your tables simple. If a table is too complex, it might be better to break it up into several
+  smaller tables or use a different format.
+
+Out of the box, `Table` is a lightweight compound component with a high degree of flexibility, but
+not much functionality outside of providing a basic table layout. This flexibility lets developers
+implement common features, such as selecting rows and sorting columns, on top of `Table` to meet
+their specific application needs.
+
+The Workday Accessibility Team has researched and developed the following examples to demonstrate
+how to build these accessible table patterns. We've listed the specific considerations and decisions
+we've made for each of the examples.
+
+- [Expandable Rows](?path=/docs/guides-accessibility-table-patterns-expandable-rows--docs)
+- [Nested Rows](?path=/docs/guides-accessibility-table-patterns-nested-rows--docs)
+- [Selectable Rows](?path=/docs/guides-accessibility-table-patterns-selectable-rows--docs)
+- [Filterable Column Headers](?path=/docs/guides-accessibility-table-patterns-filterable-column-headers--docs)
+- [Sortable Column Headers](?path=/docs/guides-accessibility-table-patterns-sortable-column-headers--docs)
+- [With Form Fields](?path=/docs/guides-accessibility-table-patterns-with-form-fields--docs)

package/dist/lib/accessibility/tables/SelectableRows.mdx

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/blocks';
+
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
+import {SelectableRows} from '../examples/Table/WithSelectableRows';
+
+<Meta title="Guides/Accessibility/Table Patterns/Selectable Rows" />
+
+## Selectable Rows
+
+Using a `Checkbox` labeled "Select All" inside of a column header can be a confusing experience for
+screen reader users. Screen readers will automatically announce the "Select All" label in the column
+header each time users are reading any of the Check boxes in the first column. For instance, the
+`Checkbox` in row 4 is definitely not going to select all of the rows. Here is what we did about it:
+
+- We intentionally rendered row 1, column 1 as a standard `<td>` element so screen readers won't
+  automatically announce the "Select All" label while reading cells in column 1.
+- Our research found that VoiceOver (MacOS v12.7, Safari v17.1) persistently announce "Select All"
+  despite using the `<td>` element because of the optional `<thead>` element in the table. We
+  omitted the optional `<thead>` and `<tbody>` elements from this example for that reason.
+- We used Canvas Kit's `Tooltip` component to assign concise names to each Checkbox, describing
+  their purpose of selecting rows. This allows everyone to view the name of the checkboxes by
+  hovering the mouse or focusing with the keyboard.
+- Since each checkbox is not uniquely labeled, we added `aria-describedby` to the checkbox,
+  referencing the unique `id` of the row header cell. This practice gives screen readers more
+  context about which value each checkbox is refering to.
+- We rendered the cells in column 2 as the row headers for the table, enabling screen readers to
+  automatically announce the topping name even while reading down the Amounts in column 3.
+
+<ExampleCodeBlock code={SelectableRows} />

package/dist/lib/accessibility/tables/SortableColumnHeaders.mdx

@@ -0,0 +1,25 @@
+import {Meta} from '@storybook/blocks';
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
+import {SortableColumnHeaders} from '../examples/Table/WithSortableColumnHeaders';
+
+<Meta title="Guides/Accessibility/Table Patterns/Sortable Column Headers" />
+
+## Sortable Column Headers
+
+The challenge in this example is to provide all of the necessary information about the interactive
+column headers, the sort state of the column, and instructions about how the table will be sorted
+without giving too much information to users while reading the data cells below.
+
+- The `aria-sort` property has been added to each of the `<Table.Header>` components (`<th>` DOM
+  element) and updated to `ascending` or `descending` to reflect the current sort state. We
+  recommend validating whether this property is well supported for your screen reader and browser
+  combinations first.
+- A `<TertiaryButton>` describing the column name is used inside of the `<Table.Header>` component.
+- The `description` variant of the Canvas `Tooltip` component is applied to the button in the column
+  header and applied to the accessible description of the button with the `aria-description`
+  property. This is used to describe how the column will be sorted when pressed and screen readers
+  will only read this description while focusing on the column headers, not while reading the data
+  cells below.
+
+<ExampleCodeBlock code={SortableColumnHeaders} />

package/dist/lib/accessibility/{TestingTableWithFormFields.mdx → tables/WithFormFields.mdx}

@@ -1,8 +1,9 @@
 import {Meta} from '@storybook/blocks';
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
-import {WithFormFields} from './examples/Table/WithFormFields';
 
-<Meta title="Guides/Accessibility/Testing/Tables With Form Fields" />
+import {WithFormFields} from '../examples/Table/WithFormFields';
+
+<Meta title="Guides/Accessibility/Table Patterns/With Form Fields" />
 
 ## Table with form field components
 

package/dist/types/lib/accessibility-enums.d.ts

@@ -1,5 +1,7 @@
-export declare const ACCESSIBILITY_SCENARIOS: readonly ["overview", "page-structure", "tables", "popups", "aria-live", "headers", "side-panel", "windows-high-contrast", "forms", "color-contrast"];
+export declare const ACCESSIBILITY_SCENARIOS: readonly ["overview", "page-structure", "tables", "expandable-rows", "nested-rows", "selectable-rows", "filterable-column-headers", "sortable-column-headers", "popups", "aria-live", "headers", "side-panel", "windows-high-contrast", "forms", "color-contrast"];
 export type AccessibilityScenario = (typeof ACCESSIBILITY_SCENARIOS)[number];
+/** Pattern pages under Guides/Accessibility/Table Patterns, including the overview index. */
+export declare const TABLE_PATTERN_SCENARIOS: readonly AccessibilityScenario[];
 export declare const ACCESSIBILITY_COMPONENTS: readonly ["action-bar", "ai-ingress-button-(ai)", "avatar", "banner", "body-text", "box", "breadcrumbs", "buttons", "card", "checkbox", "color-input", "color-picker", "color-preview", "countbadge", "dialog", "divider", "expandable", "flex", "form-field", "grid", "heading", "hyperlink", "information-highlight", "loading-dots", "loading-sparkles-(ai)", "menu", "modal", "multi-select", "pagination", "pill", "popper", "popup", "radio", "radio-(deprecated)", "segmented-control", "select", "side-panel-(deprecated)", "side-panel", "skeleton", "status-indicator", "status-indicator-(deprecated)", "subtext", "switch-(new)", "switch-(deprecated)", "table", "tabs", "text", "text-area", "text-input", "title", "toast", "toolbar", "tooltip"];
 export type AccessibilityComponent = (typeof ACCESSIBILITY_COMPONENTS)[number];
 export declare function getAccessibilityScenarioSlugsForComponent(component: string): AccessibilityScenario[];

package/dist/types/lib/accessibility-enums.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accessibility-enums.d.ts","sourceRoot":"","sources":["../../../lib/accessibility-enums.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,uJAW1B,CAAC;AAEX,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7E,eAAO,MAAM,wBAAwB,kuBAsD3B,CAAC;AAEX,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC;AA0D/E,wBAAgB,yCAAyC,CACvD,SAAS,EAAE,MAAM,GAChB,qBAAqB,EAAE,CAsBzB;AAED,wBAAgB,iCAAiC,CAAC,EAChD,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC,GAAG,qBAAqB,EAAE,CAc1B"}
+{"version":3,"file":"accessibility-enums.d.ts","sourceRoot":"","sources":["../../../lib/accessibility-enums.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,oQAgB1B,CAAC;AAEX,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7E,6FAA6F;AAC7F,eAAO,MAAM,uBAAuB,EAAE,SAAS,qBAAqB,EAQnE,CAAC;AAwBF,eAAO,MAAM,wBAAwB,kuBAsD3B,CAAC;AAEX,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC;AA0D/E,wBAAgB,yCAAyC,CACvD,SAAS,EAAE,MAAM,GAChB,qBAAqB,EAAE,CAsBzB;AAED,wBAAgB,iCAAiC,CAAC,EAChD,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC,GAAG,qBAAqB,EAAE,CAiB1B"}

package/dist/types/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,SAAS,EAAC,MAAM,yCAAyC,CAAC;AAkBlE,wBAAgB,SAAS,cA8hCxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,SAAS,EAAC,MAAM,yCAAyC,CAAC;AAkBlE,wBAAgB,SAAS,cA4jCxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-mcp",
-  "version": "16.0.14",
+  "version": "16.0.16",
   "description": "MCP package for Canvas Kit",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -63,5 +63,5 @@
     "vite": "^5.0.0",
     "vite-plugin-singlefile": "^2.0.0"
   },
-  "gitHead": "dd1a615f55e73a45836ac2ef7056dc1fb95ba1cd"
+  "gitHead": "ecd8756a79137742567e511e64bb7f1fa14f659c"
 }

package/dist/lib/accessibility/TablesAdvanced.mdx

@@ -1,128 +0,0 @@
-import {Meta} from '@storybook/blocks';
-import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
-
-import {SelectableRows} from './examples/Table/WithSelectableRows';
-import {ExpandableRows} from './examples/Table/WithExpandableRows';
-import {SortableColumnHeaders} from './examples/Table/WithSortableColumnHeaders';
-import {FilterableColumnHeaders} from './examples/Table/WithColumnHeaderFilters';
-
-<Meta title="Guides/Accessibility/Examples/Advanced Tables" />
-
-## Advanced Table Examples
-
-Tables should only be used to organize data that has a clear relationship between rows and columns,
-like a calendar or a schedule. Never use a table just for page layout.
-
-When you use the proper HTML table markup, a screen reader can help a user navigate the table. It
-will automatically read the column and row headers as they move through the data, so they always
-know what information they're looking at.
-
-- All tables should have a clear header and a descriptive title.
-- Keep your tables simple. If a table is too complex, it might be better to break it up into several
-  smaller tables or use a different format.
-
-Out of the box, `Table` is a lightweight compound component with a high degree of flexibility, but
-not much functionality outside of providing a basic table layout. This flexibility lets developers
-implement common features, such as selecting rows and sorting columns, on top of `Table` to meet
-their specific application needs.
-
-The Workday Accessibility Team has researched and developed the following examples below to
-demonstrate how to build these accessible table patterns. We've listed the specific considerations
-and decisions we've made for each of the examples.
-
-### Expandable Rows
-
-Expandable Rows combines the likes of an accordion with tabular data tables. Column 1 renders icon
-buttons with 2 states, a collapsed and expanded state. A new row that spans the entire width of the
-table is added to the table just after the expanded row.
-
-- The `aria-expanded` property is added to the chevron button to communicate this state to screen
-  reader users.
-- A Canvas accessible `Tooltip` component is used to assign names to each icon button based on the
-  most useful value in the row. In this example, we combined the car make (in column 1) and model
-  (in column 2) together. This allows everyone to view the name of the icon buttons by hovering the
-  mouse or focusing with the keyboard.
-- The expanded row uses `colspan` to span the entire width of the table and support screen readers.
-  This space provides flexibility to show headings, lists, and other structured content for the
-  table row above.
-- There is no explicit relationship between a row of cells and the spanned content below it. The
-  spanned content is assumed to belong to the row of cells above it, based on established accordion
-  patterns and logical reading order of content rendered to the screen.
-- Outlining hierarchy with additional nested rows in the table is not supported for screen readers
-  in this example.
-
-<ExampleCodeBlock code={ExpandableRows} />
-
-### Selectable Rows
-
-Using a `Checkbox` labeled "Select All" inside of a column header can be a confusing experience for
-screen reader users. Screen readers will automatically announce the "Select All" label in the column
-header each time users are reading any of the Check boxes in the first column. For instance, the
-`Checkbox` in row 4 is definitely not going to select all of the rows. Here is what we did about it:
-
-- We intentionally rendered row 1, column 1 as a standard `<td>` element so screen readers won't
-  automatically announce the "Select All" label while reading cells in column 1.
-- Our research found that VoiceOver (MacOS v12.7, Safari v17.1) persistently announce "Select All"
-  despite using the `<td>` element because of the optional `<thead>` element in the table. We
-  omitted the optional `<thead>` and `<tbody>` elements from this example for that reason.
-- We used Canvas' accessible `Tooltip` component to assign names to each Checkbox based on the most
-  useful value in the row, the topping name. This allows everyone to view the name of the checkboxes
-  by hovering the mouse or focusing with the keyboard.
-- We rendered the cells in column 2 as the row headers for the table, enabling screen readers to
-  automatically announce the topping name even while reading down the Amounts in column 3. When we
-  rendered column 1 as row headers, then reading down column 2 (Topping Name) sounded redundant
-  because the `Checkbox` names in column 1 are identical to the Topping Name in column 2.
-
-<ExampleCodeBlock code={SelectableRows} />
-
-### Filterable Column Headers
-
-In this example, we demonstrate using the `Popup` component in each column header allowing users to
-search and filter the data on the table. The `Popup` component relies on React Portals to render the
-popup elements at the bottom of the browser's DOM presenting 2 key challenges for accessibility:
-
-1. Keyboard focus order of the elements in the popup,
-2. Screen readers' reading order of the content rendered in the browser.
-
-Here's what we did about it:
-
-- Canvas Kit includes a `usePopupModel` hook, with quite a few additional hooks developers can add
-  to their models. In particular, the `useFocusRedirect` hook manages keyboard focus between the
-  `<Popup.Target>` button and the popup content.
-- The `useInitialFocus` hook allows developers to specify which element receives keyboard focus when
-  the popup appears. In this example, we auto-focused the search input field.
-- To address the reading order of content, we set the `aria-owns` property onto the parent
-  `<Table.Header>` component (`<th>` DOM element) with 2 unique `id` values. The first `id` refers
-  to the `<Popup.Target>` button and the second refers to the `<Popup.Card>` container element. This
-  manually reassigns the column header's `<Popup.Target>` button and the `Popup` contents as
-  siblings in the browser's accessibility tree hierarchy. Screen readers **should** read the column
-  header buttons and the popup content in sequential order even though they are not siblings in the
-  DOM.
-- The `type='description'` variant of the Canvas `Tooltip` is used to communicate the filtered state
-  of the column header, and assigned to the accessible description of the column header
-  `<TertiaryButton>` component.
-- The Canvas `AriaLiveRegion` component is used to render the "X of Y items" status inside the table
-  caption. This enables screen readers to automatically describe the filter state changes of the
-  table content to users in real time. We recommend validating whether this use of a live region is
-  well supported for your screen reader and browser combinations first.
-
-<ExampleCodeBlock code={FilterableColumnHeaders} />
-
-### Sortable Column Headers
-
-The challenge in this example is to provide all of the necessary information about the interactive
-column headers, the sort state of the column, and instructions about how the table will be sorted
-without giving too much information to users while reading the data cells below.
-
-- The `aria-sort` property has been added to each of the `<Table.Header>` components (`<th>` DOM
-  element) and updated to `ascending` or `descending` to reflect the current sort state. We
-  recommend validating whether this property is well supported for your screen reader and browser
-  combinations first.
-- A `<TertiaryButton>` describing the column name is used inside of the `<Table.Header>` component.
-- The `description` variant of the Canvas `Tooltip` component is applied to the button in the column
-  header and applied to the accessible description of the button with the `aria-description`
-  property. This is used to describe how the column will be sorted when pressed and screen readers
-  will only read this description while focusing on the column headers, not while reading the data
-  cells below.
-
-<ExampleCodeBlock code={SortableColumnHeaders} />