@pingux/astro 2.208.0-alpha.0 → 2.208.1-alpha.0

package/lib/cjs/components/DataTable/DataTable.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as DataTableStories from './DataTable.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={DataTableStories} isTemplate />
 
@@ -30,26 +32,19 @@ This component requires these additional React Spectrum components:
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | Moves focus to the next focusable component. All focusable components in the table are included in the page tab sequence. | 
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Space or Enter  | Focuses the component and triggers an action if one is associated with it. |
-| Arrow keys | Can be used to navigate between the components in the table. |
-| Focus on a row and scroll down | Shifts the focus to the entire table, not the previously focused row. |
-| Home or page up | Shifts the focus to the first row. |
-| End or page down | Shifts the focus to the last visible row. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The **`aria-label`** attribute is used to provide an accessible name.
-- The **`aria-rowcount`** and **`aria-columncount`** attributes are used to indicate the total number of rows and columns in the grid structure. 
-- The DataTableHeader uses the **`aria-rowindex`** attribute and DataTableColumn uses the **`aria-colindex`** attribute to enumerate the header row and columns. 
-- In the body component, the DataTableRow uses the **`aria-labelledby`** attribute and the grid ID to identify the component and the **`aria-rowindex`** attribute is passed to each row.
-- Each DataTableCell uses the **`aria-colindex`** attribute to enumerate the columns within each row.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Moves focus to the next focusable component. All focusable components in the table are included in the page tab sequence.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Space or Enter', description: 'Focuses the component and triggers an action if one is associated with it.' },
+  { key: 'Arrow keys', description: 'Can be used to navigate between the components in the table.' },
+  { key: 'Focus on a row and scroll down', description: 'Shifts the focus to the entire table, not the previously focused row.' },
+  { key: 'Home or page up', description: 'Shifts the focus to the first row.' },
+  { key: 'End or page down', description: 'Shifts the focus to the last visible row.' },
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelAccessibleName,
+  'The **`aria-rowcount`** and **`aria-columncount`** attributes are used to indicate the total number of rows and columns in the grid structure.',
+  'The DataTableHeader uses the **`aria-rowindex`** attribute and DataTableColumn uses the **`aria-colindex`** attribute to enumerate the header row and columns.',
+  'In the body component, the DataTableRow uses the **`aria-labelledby`** attribute and the grid ID to identify the component and the **`aria-rowindex`** attribute is passed to each row.',
+  'Each DataTableCell uses the **`aria-colindex`** attribute to enumerate the columns within each row.',
+]} />
 

package/lib/cjs/components/DatePicker/DatePicker.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as DatePickerStories from './DatePicker.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={DatePickerStories} isTemplate />
 
@@ -21,30 +23,21 @@ This component can be used independently and does not require additional compone
 
 This component should adhere to the [WAI-ARIA DatePicker](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) accessibility guidelines.
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Keys | Functions |
-| ---- | --------- |
-| Space or Enter | Opens the popover when the trigger is focused, selects the date when a date is focused, and navigates to the calendar pages when the navigational buttons are focused. |
-| Tab | Focuses the field and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Pressing Home:(Fn + Right Arrow Key) Or Control or Command + Home | Shifts the focus to the first calendar date. |
-| Pressing Home:(Fn + left Arrow Key) Or Control or Command + End | Shifts the focus to the last calendar date. |
-| Up and down Arrow keys | When segments are focused, it increments and decrements dates starting from the present day. |
-| Left and right arrows | Moves focus between segments. |
-| Page up | Changes the grid of dates to the previous month. |
-| Page down | Changes the grid of dates to the next month. |
-| Shift + page up | Changes the grid of dates to the same month in the previous year. |
-| Shift+ page down | Changes the grid of dates to the same month in the next year. |
-| Esc | Closes the overlay and shifts focus to the trigger. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-
-- The hidden input, DateField, and all three spin buttons have an **`aria-labelledby`** attribute pointing to the label ID, along with the **`aria-label`** attribute for an accessible name.
-- Each spin button has the **`aria-valuenow`** attribute that defines the current value and it is always used with its text alternative, **`aria-valuetext`**. 
-The spin buttons also have the **`aria-valuemin`** and **`aria-valuemax`** attributes to specify the minimum and maximum values allowed for a range widget.
-- The **`aria-selected`** attribute is added to the grid cell when a date is selected, and **`aria-disabled`** is set to “false” by default.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Opens the popover when the trigger is focused, selects the date when a date is focused, and navigates to the calendar pages when the navigational buttons are focused.' },
+  KeyboardRows.tabFocusesField,
+  KeyboardRows.shiftTabFocusPrevious,
+  KeyboardRows.homeFirstCalendarDate,
+  { key: 'Pressing Home:(Fn + left Arrow Key) Or Control or Command + End', description: 'Shifts the focus to the last calendar date.' },
+  { key: 'Up and down Arrow keys', description: 'When segments are focused, it increments and decrements dates starting from the present day.' },
+  { key: 'Left and right arrows', description: 'Moves focus between segments.' },
+  KeyboardRows.pageUpPreviousMonth,
+  KeyboardRows.pageDownNextMonth,
+  KeyboardRows.shiftPageUpPreviousYear,
+  KeyboardRows.shiftPageDownNextYear,
+  { key: 'Esc', description: 'Closes the overlay and shifts focus to the trigger.' },
+]} screenReaderRows={[
+  'The hidden input, DateField, and all three spin buttons have an **`aria-labelledby`** attribute pointing to the label ID, along with the **`aria-label`** attribute for an accessible name.',
+  'Each spin button has the **`aria-valuenow`** attribute that defines the current value and it is always used with its text alternative, **`aria-valuetext`**. The spin buttons also have the **`aria-valuemin`** and **`aria-valuemax`** attributes to specify the minimum and maximum values allowed for a range widget.',
+  'The **`aria-selected`** attribute is added to the grid cell when a date is selected, and **`aria-disabled`** is set to “false” by default.',
+]} />

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as EnvironmentBreadcrumbStories from './EnvironmentBreadcrumb.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={EnvironmentBreadcrumbStories} isTemplate />
 
@@ -16,22 +18,15 @@ Item from [react-stately/collections](https://react-spectrum.adobe.com/react-sta
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Space or Enter  | Selects the breadcrumb item. |
-| Tab | Focuses the breadcrumb item and follows the page tab sequence. | 
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Arrow keys | Can be used to navigate between the items in the dropdown list. |
-| Esc | Closes the popover when it is expanded. |
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-- Each breadcrumb item uses an **`aria-label`** attribute to provide an accessible name.
-- The trigger button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
-- When expanded, **`aria-controls`** is added to the button pointing to the pop-up content.
-- The **`aria-haspopup`** attribute describes the type of content presented.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Selects the breadcrumb item.' },
+  { key: 'Tab', description: 'Focuses the breadcrumb item and follows the page tab sequence.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Arrow keys', description: 'Can be used to navigate between the items in the dropdown list.' },
+  { key: 'Esc', description: 'Closes the popover when it is expanded.' },
+]} screenReaderRows={[
+  'Each breadcrumb item uses an **`aria-label`** attribute to provide an accessible name.',
+  ScreenReaderRows.triggerAriaExpandedExpandCollapse,
+  'When expanded, **`aria-controls`** is added to the button pointing to the pop-up content.',
+  'The **`aria-haspopup`** attribute describes the type of content presented.',
+]} />

package/lib/cjs/components/ExpandableText/ExpandableText.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as ExpandableTextStories from './ExpandableText.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={ExpandableTextStories} isTemplate />
 
@@ -14,18 +16,10 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Space or Enter | Selects the button. |
-| Tab | Focuses the button and follows the page tab sequence. |
-
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-- The trigger button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
-- The button uses, **`aria-controls`** which references the iD of the collapsible region.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.spaceEnterSelectsButton,
+  KeyboardRows.tabFocusesButton,
+]} screenReaderRows={[
+  ScreenReaderRows.triggerAriaExpandedExpandCollapse,
+  'The button uses, **`aria-controls`** which references the iD of the collapsible region.',
+]} />

package/lib/cjs/components/FileInputField/FileInputField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as FileInputFieldStories from './FileInputField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={FileInputFieldStories} isTemplate />
 
@@ -16,19 +18,12 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | ---- |
-| Tab | Focuses the field and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Space or Enter | Selects the component when it is focused. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- This component uses the **`aria-label`** to provide an accessible name and has **`aria-labelledby`** attribute, supplied with the label ID.
-- Upon uploading the file, the Button component, with the name of the uploaded file, displays with **`aria-describedby`** attribute, which references the helpText if passed along. 
-- The delete button has an **`aria-label`** to provide an accessible name.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabFocusesField,
+  KeyboardRows.shiftTabFocusPrevious,
+  KeyboardRows.spaceEnterSelectsComponent,
+]} screenReaderRows={[
+  'This component uses the **`aria-label`** to provide an accessible name and has **`aria-labelledby`** attribute, supplied with the label ID.',
+  'Upon uploading the file, the Button component, with the name of the uploaded file, displays with **`aria-describedby`** attribute, which references the helpText if passed along.',
+  'The delete button has an **`aria-label`** to provide an accessible name.',
+]} />

package/lib/cjs/components/Footer/Footer.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as FooterStories from './Footer.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={FooterStories} isTemplate />
 
@@ -15,17 +17,10 @@ This component requires these components:
 - FooterNav
 - FooterNavItem
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Key | Functions |
-| ---- | ---- |
-| Tab | All of the content in the Footer is focusable. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-- Each Link component uses the **`aria-label`** attribute to provide an accessible name.
-- The Icon uses the **`aria-hidden`** attribute to hide its content from assistive technology.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'All of the content in the Footer is focusable.' },
+  KeyboardRows.shiftTabFocusPrevious,
+]} screenReaderRows={[
+  ScreenReaderRows.eachLinkAriaLabel,
+  ScreenReaderRows.iconAriaHidden,
+]} />

package/lib/cjs/components/GridList/GridList.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as GridListStories from './GridList.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={GridListStories} isTemplate />
 
@@ -23,27 +25,20 @@ This component requires [Item].
 
 This component adheres to the [WAI-ARIA Grid](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) accessibility guidelines.
 
-### Keyboard Navigation
-
-These keys provide additional functionality to the component:
-
-| Key Combination | Functionality                                                                                                    |
-| --------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `Tab`           | Moves focus to the next focusable element, within the row. (keyboardNavigationBehavior="tab")                    |
-| `Shift + Tab`   | Moves focus to the previous focusable element, within the row. (keyboardNavigationBehavior="tab")                |
-| `Arrow Keys`    | Navigates between items in the grid. (Up/Down in all modes, Left/Right in keyboardNavigationBehavior="arrow")    |
-| `Home`          | Moves focus to the first row in the grid.                                                                        |
-| `End`           | Moves focus to the last row in the grid.                                                                         |
-
-### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The **`role="grid"`** attribute is used to indicate the grid structure.
-- The **`aria-label`** attribute provides an accessible name for the grid.
-- The **`role="row"`** attribute is used to indicate the row structure.
-- The **`role="gridcell"`** attribute is used to indicate the cell structure.
-- The **`aria-selected`** attribute indicates whether an item is selected.
-- The **`draggable`** attribute indicates whether an item is draggable.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Moves focus to the next focusable element, within the row. (keyboardNavigationBehavior="tab")' },
+  { key: 'Shift + Tab', description: 'Moves focus to the previous focusable element, within the row. (keyboardNavigationBehavior="tab")' },
+  { key: 'Arrow Keys', description: 'Navigates between items in the grid. (Up/Down in all modes, Left/Right in keyboardNavigationBehavior="arrow")' },
+  KeyboardRows.homeFirstRow,
+  KeyboardRows.endLastVisibleRow,
+]} screenReaderRows={[
+  'The **`role="grid"`** attribute is used to indicate the grid structure.',
+  'The **`aria-label`** attribute provides an accessible name for the grid.',
+  'The **`role="row"`** attribute is used to indicate the row structure.',
+  'The **`role="gridcell"`** attribute is used to indicate the cell structure.',
+  'The **`aria-selected`** attribute indicates whether an item is selected.',
+  'The **`draggable`** attribute indicates whether an item is draggable.',
+]} />
 
 ---
 

package/lib/cjs/components/HelpHint/HelpHint.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as HelpHintStories from './HelpHint.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={HelpHintStories} isTemplate />
 
@@ -16,18 +17,11 @@ This component can be used independently and does not require additional compone
 ### Accessibility
 This component adheres to [WAI-ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html) accessibility guidelines.
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Aria Attribute | Role |
-| ---- | ---- |
-| Space or Enter | Selects the help hint. |
-| Tab | Focuses the help hint and follows the page tab sequence. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The trigger button uses **`aria-expanded`** to indicate the expansion and collapse of the popover.
-- The **`aria-live`** attribute announces the dynamic changes in live region content.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Selects the help hint.' },
+  { key: 'Tab', description: 'Focuses the help hint and follows the page tab sequence.' },
+]} screenReaderRows={[
+  'The trigger button uses **`aria-expanded`** to indicate the expansion and collapse of the popover.',
+  'The **`aria-live`** attribute announces the dynamic changes in live region content.',
+]} />
 

package/lib/cjs/components/Icon/Icon.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as IconStories from './Icon.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={IconStories} isTemplate />
 
@@ -33,6 +34,7 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
+{/* Non-standard section: '#### Labelling' documents SVG title prop usage, not covered by AccessibilityTable API. Flagged for future migration. */}
 #### Labelling
 
 The Icon component accepts the title prop:
@@ -41,9 +43,9 @@ The `name` will be passed inside `<title>` element of the SVG.
 The `id` is optional. If not specified, it will be generated automatically.
 This is needed to make SVG icon accessible.
 
-#### Screen Readers
-
-If the icon has a title associated with it, the **`aria-labelledby`** attribute is used to provide the label ID.
+<AccessibilityTable screenReaderRows={[
+  'If the icon has a title associated with it, the **`aria-labelledby`** attribute is used to provide the label ID.',
+]} />
 
 
 

package/lib/cjs/components/IconButton/IconButton.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as IconButtonStories from './IconButton.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={IconButtonStories} isTemplate />
 
@@ -22,13 +23,9 @@ This component requires the [Icon](./?path=/story/components-icon--default) comp
 ### Accessibility
 This component adheres to [WAI-ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html) accessibility guidelines.
 
-#### Keyboard Navigation
-
-| Key | Functions |
-| ---- | ---- |
-| Space or Enter | Selects the icon button. |
-| Tab | Focuses the icon button and follows the page tab sequence. |
-
-#### Screen Readers
-
-This component uses the **`aria-label`** to provide an accessible name.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Selects the icon button.' },
+  { key: 'Tab', description: 'Focuses the icon button and follows the page tab sequence.' },
+]} screenReaderRows={[
+  'This component uses the **`aria-label`** to provide an accessible name.',
+]} />

package/lib/cjs/components/IconButtonToggle/IconButtonToggle.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as IconButtonToggleStories from './IconButtonToggle.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={IconButtonToggleStories} isTemplate />
 
@@ -15,18 +17,10 @@ This component can be used independently and does not require additional compone
 ### Accessibility
 This component adheres to [WAI-ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html) accessibility guidelines.
 
-#### Keyboard Navigation
-
-| Key | Functions |
-| ---- | ---- |
-| Space or Enter | Selects the component. |
-| Tab | Focuses the component and follows the page tab sequence. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- This component uses the **`aria-label`** to provide an accessible name, which toggles based on the toggle state.
-- The **`aria-labelledby`** attribute is used to provide the label ID.
-
-
-
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.spaceEnterSelectsComponentSimple,
+  KeyboardRows.tabFocusesComponent,
+]} screenReaderRows={[
+  'This component uses the **`aria-label`** to provide an accessible name, which toggles based on the toggle state.',
+  'The **`aria-labelledby`** attribute is used to provide the label ID.',
+]} />

package/lib/cjs/components/Image/Image.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as ImageStories from './Image.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={ImageStories} isTemplate />
 
@@ -21,9 +22,8 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The **`alt`** attribute specifies an alternate text for the image.
+<AccessibilityTable screenReaderRows={[
+  'The **`alt`** attribute specifies an alternate text for the image.',
+]} />
 
 

package/lib/cjs/components/ImageUploadField/ImageUploadField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as ImageUploadFieldStories from './ImageUploadField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={ImageUploadFieldStories} isTemplate />
 
@@ -13,27 +15,19 @@ This component requires the OverlayProvider component.
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | Focuses the field and follows the page tab sequence. |
-| Space or Enter | When the trigger is focused, the file browser opens. When the menu item is focused, it triggers an action. |
-| Down arrow | After uploading, pressing the Down arrow with a focused trigger opens the popover menu. |
-| Arrow keys | Can be used to move the selection in the popover. |
-| Shift + Tab | Moves focus to the previous focusable component.|
-| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first item in the listbox. |
-| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last item in the listbox. |
-| Esc | Pressing the escape key closes the popover menu and adds focus to the trigger. |
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-
-- The input uses the **`aria-labelledby`** attribute to reference the label.
-- The trigger button uses the **`aria-label`** attribute to provide an accessible name.
-- The **`aria-expanded`** attribute is used to indicate the expansion or collapse of the popover.
-- The **`aria-haspopup`** attribute indicates the type of popup content as a menu. Once expanded, **`aria-controls`** is added to the button pointing to the popover. 
-- The menu uses vertical **`aria-orientation`** by default, and each menu item has a “False” **`aria-disabled`** value. 
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabFocusesField,
+  { key: 'Space or Enter', description: 'When the trigger is focused, the file browser opens. When the menu item is focused, it triggers an action.' },
+  { key: 'Down arrow', description: 'After uploading, pressing the Down arrow with a focused trigger opens the popover menu.' },
+  { key: 'Arrow keys', description: 'Can be used to move the selection in the popover.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  KeyboardRows.homeFirstListboxItem,
+  KeyboardRows.endLastListboxItem,
+  { key: 'Esc', description: 'Pressing the escape key closes the popover menu and adds focus to the trigger.' },
+]} screenReaderRows={[
+  'The input uses the **`aria-labelledby`** attribute to reference the label.',
+  'The trigger button uses the **`aria-label`** attribute to provide an accessible name.',
+  'The **`aria-expanded`** attribute is used to indicate the expansion or collapse of the popover.',
+  'The **`aria-haspopup`** attribute indicates the type of popup content as a menu. Once expanded, **`aria-controls`** is added to the button pointing to the popover.',
+  'The menu uses vertical **`aria-orientation`** by default, and each menu item has a “False” **`aria-disabled`** value.',
+]} />

package/lib/cjs/components/Link/Link.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as LinkStories from './Link.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={LinkStories} isTemplate />
 
@@ -20,9 +21,7 @@ This component can be used independently and does not require additional compone
 ### Accessibility
 This component adheres to [WAI-ARIA Link](https://www.w3.org/WAI/ARIA/apg/patterns/link/) accessibility guidelines.
 
-#### Keyboard Navigation
-
-| Key | Functions |
-| ---- | ---- |
-| Space or Enter | Selects the link. |
-| Tab | Focuses the link and follows the page tab sequence. |
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Selects the link.' },
+  { key: 'Tab', description: 'Focuses the link and follows the page tab sequence.' },
+]} />

package/lib/cjs/components/LinkSelectField/LinkSelectField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as LinkSelectFieldStories from './LinkSelectField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={LinkSelectFieldStories} isTemplate />
 
@@ -22,27 +24,19 @@ This component requires the OverlayProvider and Item originating from [react-sta
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | Focuses the field and follows the page tab sequence. |
-| Space or Enter | When the trigger is focused, the menu opens or closes. When the menu item is focused, it selects the listbox option. |
-| Arrow keys | Can be used to move the selection in the listbox. |
-| Shift + Tab | Moves focus to the previous focusable component.|
-| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first item in the listbox. |
-| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last item in the listbox. |
-| Esc | Pressing the escape key closes the popover menu and adds focus to the previously focused component.|
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-
-- The trigger button uses the **`aria-expanded`** attribute to indicate the expansion or collapse of the popover menu, the  **`aria-label`** attribute to provide an accessible name, and the  **`aria-labelledby`** attribute to reference the label.
-- The **`aria-haspopup`** attribute indicates the type of popup content as a listbox.
-- A visually hidden DismissButton is added for screen reader users to close the overlay in the absence of a dismiss button.
-- The listbox in the popover uses the **`aria-labelledby`** attribute, which also references the label.
-- Each option uses the **`aria-selected`** attribute to indicate the selection state,  **`aria-posinset`** to give the option’s position in the current set of list items, and  **`aria-setsize`** to define the current set of options. 
-- The **`aria-disabled`** attribute value is “False” for each option, by default.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabFocusesField,
+  { key: 'Space or Enter', description: 'When the trigger is focused, the menu opens or closes. When the menu item is focused, it selects the listbox option.' },
+  { key: 'Arrow keys', description: 'Can be used to move the selection in the listbox.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  KeyboardRows.homeFirstListboxItem,
+  KeyboardRows.endLastListboxItem,
+  { key: 'Esc', description: 'Pressing the escape key closes the popover menu and adds focus to the previously focused component.' },
+]} screenReaderRows={[
+  'The trigger button uses the **`aria-expanded`** attribute to indicate the expansion or collapse of the popover menu, the  **`aria-label`** attribute to provide an accessible name, and the  **`aria-labelledby`** attribute to reference the label.',
+  'The **`aria-haspopup`** attribute indicates the type of popup content as a listbox.',
+  'A visually hidden DismissButton is added for screen reader users to close the overlay in the absence of a dismiss button.',
+  'The listbox in the popover uses the **`aria-labelledby`** attribute, which also references the label.',
+  "Each option uses the **`aria-selected`** attribute to indicate the selection state,  **`aria-posinset`** to give the option’s position in the current set of list items, and  **`aria-setsize`** to define the current set of options. ",
+  'The **`aria-disabled`** attribute value is “False” for each option, by default.',
+]} />

package/lib/cjs/components/ListItem/ListItem.mdx

@@ -1,4 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta title="Components/ListItem/ListItem" />
 
@@ -13,9 +15,7 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-| Key | Functions |
-| ---- | ---- |
-| Space or Enter | Selects the item. |
-| Tab | Focuses item and follows the page tab sequence. |
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.spaceEnterSelectsItem,
+  KeyboardRows.tabFocusesItem,
+]} />