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

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,
+]} />

package/lib/cjs/components/ListView/ListView.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as ListViewStories from './ListView.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={ListViewStories} isTemplate />
 
@@ -22,35 +24,32 @@ This component requires [ListViewItem](./?path=/docs/components-listviewitem--do
 
 This component should adhere to the [WAI-ARIA ListBox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) accessibility guidelines. 
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Key | Functions |
-| ---- | ---- |
-| Space or Enter | Selects the item. |
-| Tab | Focuses item and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Arrow keys | Can be used to move the selection in the menu.  |
-| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first row. |
-| End(Fn + Left Arrow Key) Or Control/Command + End | 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 **`aria-multiselectable`**  attribute is used to indicate that users can toggle between items in the grid. 
-- Each ListViewItem uses the **`aria-rowindex`**  attribute, which defines a component's position in the total number of rows. 
-- Each item also uses the aria-label, **`aria-colindex`**  attributes to indicate the component’s column position and aria-selected to indicate the currently selected state.
-
+<AccessibilityTable
+  keyboardRows={[
+    KeyboardRows.spaceEnterSelectsItem,
+    KeyboardRows.tabFocusesItem,
+    KeyboardRows.shiftTabFocusPrevious,
+    { key: 'Arrow keys', description: 'Can be used to move the selection in the menu.' },
+    KeyboardRows.homeFirstRow,
+    KeyboardRows.endLastVisibleRow,
+  ]}
+  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 **`aria-multiselectable`**  attribute is used to indicate that users can toggle between items in the grid.',
+    "Each ListViewItem uses the **`aria-rowindex`**  attribute, which defines a component's position in the total number of rows.",
+    "Each item also uses the aria-label, **`aria-colindex`**  attributes to indicate the component's column position and aria-selected to indicate the currently selected state.",
+  ]}
+/>
+
+{/* Non-standard sections: ‘#### NOTES:’ and ‘#### KNOWN ISSUES:’ contain runtime developer guidance, not accessibility patterns. Flagged for future migration. */}
 #### NOTES:
 - See the [ListAndPanel](./?path=/docs/recipes-listandpanel--docs) and [ScrollableListView](./?path=/docs/recipes-scrollablelistview--docs) recipes for more detailed examples.
 
 #### KNOWN ISSUES:
 Error Message: **`ResizeObserver loop completed with undelivered notifications.`**
 
-The ListView's ResizeObserver exhibits a rendering bug specifically in development mode. This issue originates from @react-aria/virtualizer and is expected to be resolved upon upgrading to React 18. 
+The ListView’s ResizeObserver exhibits a rendering bug specifically in development mode. This issue originates from @react-aria/virtualizer and is expected to be resolved upon upgrading to React 18. 
 
 Refer to issue [!1924](https://github.com/adobe/react-spectrum/issues/1924) for further details.
 

package/lib/cjs/components/Loader/Loader.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as LoaderStories from './Loader.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={LoaderStories} isTemplate />
 
@@ -23,11 +25,10 @@ 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 **`aria-label`** attribute is used to provide an accessible name.
-- The **`aria-live`** attribute is used to announce content changes in a live region.
+<AccessibilityTable screenReaderRows={[
+  ScreenReaderRows.ariaLabelAccessibleName,
+  ScreenReaderRows.ariaLiveAnnounce,
+]} />
 
 ### Determinate vs Indeterminate usage
 

package/lib/cjs/components/Menu/Menu.mdx

@@ -1,4 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta title="Components/Menu/Menu" />
 
@@ -23,21 +25,14 @@ This component requires the Item component, which is exported within Astro, but
 
 This component should adhere to the [WAI-ARIA Menu](https://www.w3.org/WAI/tutorials/menus/) accessibility guidelines. 
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Key | Functions |
-| ---- | ---- |
-| Space or Enter | Selects the menu item. |
-| Tab | Focuses the menu item and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Home(Fn + Right Arrow Key) Or Control/Command + Home| Shifts the focus to the first row. |
-| End(Fn + Left Arrow Key) Or Control/Command + End | 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.
-- Each menu option has the default **`aria-disabled`** value as “False.” 
-- The **`aria-orientation`** attribute indicates whether the menu is horizontally or vertically oriented, or undefined.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Selects the menu item.' },
+  { key: 'Tab', description: 'Focuses the menu item and follows the page tab sequence.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  KeyboardRows.homeFirstRow,
+  KeyboardRows.endLastVisibleRow,
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelAccessibleName,
+  'Each menu option has the default **`aria-disabled`** value as “False.” ',
+  'The **`aria-orientation`** attribute indicates whether the menu is horizontally or vertically oriented, or undefined.',
+]} />

package/lib/cjs/components/Messages/Messages.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as MessagesStories from './Messages.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={MessagesStories} isTemplate />
 
@@ -21,16 +23,10 @@ This component requires the Item component, which is exported within Astro, but
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Key | Functions |
-| ---- | ---- |
-| Tab | Focuses the IconButton within the message and follows the page tab sequence. |
-| Space or Enter | Selects the button when it is focused. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-
-#### Screen Readers
-
-The **`aria-live`** attribute is used to announce content changes in a live region.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Focuses the IconButton within the message and follows the page tab sequence.' },
+  { key: 'Space or Enter', description: 'Selects the button when it is focused.' },
+  KeyboardRows.shiftTabFocusPrevious,
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLiveAnnounce,
+]} />

package/lib/cjs/components/Modal/Modal.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as ModalStories from './Modal.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={ModalStories} isTemplate />
 
@@ -39,25 +41,22 @@ This component requires the OverlayProvider and [Button](./?path=/docs/component
 
 This component should adhere to the [WAI-ARIA Modal](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/) accessibility guidelines.
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Key | Functions |
-| ---- | ---- |
-| Tab | The trigger component and the content in the modal are focusable using the Tab key.   |
-|  | When a modal opens, focus moves to an element contained in the modal, which is usually the first focusable element. If the first focusable element does not make sense, tabindex=”-1” should be added to a static element at the top of the modal, which could be the panel title. |
-| Space or Enter | Opens the modal when the trigger is focused. Once opened, the focus is locked inside the modal. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Esc | Pressing the escape key closes the modal and adds focus to the previously focused component. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The button uses the **`aria-label`** attribute to provide an accessible name.
-- The **`aria-labelledby`** attribute is supplied with label ID.
-- The **`aria-modal`** attribute allows the assistive technologies to inform users that the ability to interact with or access other content on the page requires the modal dialog to be closed.
-
+<AccessibilityTable
+  keyboardRows={[
+    { key: 'Tab', description: 'The trigger component and the content in the modal are focusable using the Tab key.' },
+    { key: '', description: 'When a modal opens, focus moves to an element contained in the modal, which is usually the first focusable element. If the first focusable element does not make sense, tabindex=”-1” should be added to a static element at the top of the modal, which could be the panel title.' },
+    { key: 'Space or Enter', description: 'Opens the modal when the trigger is focused. Once opened, the focus is locked inside the modal.' },
+    KeyboardRows.shiftTabFocusPrevious,
+    { key: 'Esc', description: 'Pressing the escape key closes the modal and adds focus to the previously focused component.' },
+  ]}
+  screenReaderRows={[
+    'The button uses the **`aria-label`** attribute to provide an accessible name.',
+    'The **`aria-labelledby`** attribute is supplied with label ID.',
+    'The **`aria-modal`** attribute allows the assistive technologies to inform users that the ability to interact with or access other content on the page requires the modal dialog to be closed.',
+  ]}
+/>
+
+{/* Non-standard section: '#### Note' contains AutoFocus implementation guidance. Flagged for future migration. */}
 #### Note
 
 AutoFocus is not enabled by default. To ensure accessibility and expected keyboard navigation support set the `hasAutoFocus` prop to true.

package/lib/cjs/components/MultivaluesField/MultivaluesField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as MultivaluesFieldStories from './MultivaluesField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={MultivaluesFieldStories} isTemplate />
 
@@ -23,26 +25,18 @@ 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 | Opens or closes the menu when the input is focused. |
-| Arrow keys | Moves through the list popover. |
-| Shift + Tab | Moves focus to the previous focusable component.|
-|  | To allow multiple selections, the user making a selection does not close the menu. However, clicking outside of the listbox or pressing Tab with an open popover does. |
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-
-- The input uses the **`aria-expanded`** attribute to show the expansion and collapse of the popover, the **`aria-invalid`** attribute set to “True” when an incorrect value or status error occurs, and the **`aria-labelledby`** attribute is used to reference the label.
-- The list box **`aria-multiselectable`** attribute is set to “True” by default. 
-- Each option uses the **`aria-selected`** attribute to indicate the state of selection, **`aria-posinset`** to give the option position in the current set of list items, and the **`aria-setsize`** attribute to define the current set of options. 
-- The **`aria-disabled`** attribute is set to “False” for each option by default.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabFocusesField,
+  { key: 'Space or Enter', description: 'Opens or closes the menu when the input is focused.' },
+  { key: 'Arrow keys', description: 'Moves through the list popover.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: '', description: 'To allow multiple selections, the user making a selection does not close the menu. However, clicking outside of the listbox or pressing Tab with an open popover does.' },
+]} screenReaderRows={[
+  'The input uses the **`aria-expanded`** attribute to show the expansion and collapse of the popover, the **`aria-invalid`** attribute set to “True” when an incorrect value or status error occurs, and the **`aria-labelledby`** attribute is used to reference the label.',
+  'The list box **`aria-multiselectable`** attribute is set to “True” by default. ',
+  'Each option uses the **`aria-selected`** attribute to indicate the state of selection, **`aria-posinset`** to give the option position in the current set of list items, and the **`aria-setsize`** attribute to define the current set of options. ',
+  'The **`aria-disabled`** attribute is set to “False” for each option by default.',
+]} />
 
 ### Children
 

package/lib/cjs/components/NavBar/NavBar.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as NavBarStories from './NavBar.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={NavBarStories} isTemplate />
 
@@ -24,20 +26,13 @@ This component requires these components:
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Key | Functions |
-| ---- | ---- |
-| Tab | All of the content in the NavBar is focusable. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Space or Enter | Toggles the component when the accordion is focused. |
-| Arrow keys | All components within the NavBar are accessible using arrow keys. |
-| Esc | Pressing the escape key when the accordion is open and focused collapses the 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 NavBar is focusable.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  KeyboardRows.spaceEnterToggleAccordion,
+  { key: 'Arrow keys', description: 'All components within the NavBar are accessible using arrow keys.' },
+  KeyboardRows.escCollapseAccordion,
+]} screenReaderRows={[
+  ScreenReaderRows.eachLinkAriaLabel,
+  ScreenReaderRows.iconAriaHidden,
+]} />

package/lib/cjs/components/NavSideBar/NavSideBar.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as NavSideBarStories from './NavSideBar.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={NavSideBarStories} isTemplate />
 
@@ -24,20 +26,13 @@ This component requires these components:
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Key | Functions |
-| ---- | ---- |
-| Tab | All of the content in the NavSideBar is focusable. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Space or Enter | Toggles the component when the accordion is focused. |
-| Arrow keys | All components within the NavSideBar are accessible using arrow keys. |
-| Esc | Pressing the escape key when the accordion is open and focused collapses the 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 NavSideBar is focusable.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  KeyboardRows.spaceEnterToggleAccordion,
+  { key: 'Arrow keys', description: 'All components within the NavSideBar are accessible using arrow keys.' },
+  KeyboardRows.escCollapseAccordion,
+]} screenReaderRows={[
+  ScreenReaderRows.eachLinkAriaLabel,
+  ScreenReaderRows.iconAriaHidden,
+]} />

package/lib/cjs/components/NavigationHeader/NavigationHeader.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as NavigationHeaderStories from './NavigationHeader.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={NavigationHeaderStories} isTemplate />
 
@@ -14,19 +16,12 @@ This component can be used independently and does not require additional compone
 
 This component should adhere to the [WAI-ARIA Navigation](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html) accessibility guidelines.
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Key            | Functions                                                                                                         |
-| -------------- | ----------------------------------------------------------------------------------------------------------------- |
-| Tab            | Focuses item and follows the page tab sequence.                                                    |
-| Shift + Tab    | Moves focus to the previous focusable component.                                                         |
-| Space or Enter | Pressing Space or Enter on a focused trigger opens or closes the dropdown menu and selects the MenuItems it is focused on. |
-| Arrow keys     | Moves the selection through the popover.                                                                          |
-| Esc            | Pressing the escape key closes the popover and focuses on 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.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabFocusesItem,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Space or Enter', description: 'Pressing Space or Enter on a focused trigger opens or closes the dropdown menu and selects the MenuItems it is focused on.' },
+  KeyboardRows.arrowKeysMovePopoverSelection,
+  KeyboardRows.escClosePopoverFocusPrevious,
+]} screenReaderRows={[
+  ScreenReaderRows.eachLinkAriaLabel,
+]} />

package/lib/cjs/components/NumberField/NumberField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as NumberFieldStories from './NumberField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={NumberFieldStories} isTemplate />
 
@@ -22,23 +24,20 @@ 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 | The input is focusable using the Tab key and follows the page tab sequence. |
-| Arrow keys | Can be used to increment or decrement the numbers displayed in the field. |
-| Shift + Tab | Moves focus to the previous focusable component.|
-| Stepper buttons | Pressing and holding the stepper buttons allows continuous increments or decrements. |
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-- The input component uses the **`aria-labelledby`** attribute to reference the label.
-- The two icon buttons each use the **`aria-controls`** attribute with the input ID and the **`aria-label`** attribute to provide an accessible name.
-
+<AccessibilityTable
+  keyboardRows={[
+    KeyboardRows.tabInput,
+    { key: 'Arrow keys', description: 'Can be used to increment or decrement the numbers displayed in the field.' },
+    KeyboardRows.shiftTabFocusPrevious,
+    { key: 'Stepper buttons', description: 'Pressing and holding the stepper buttons allows continuous increments or decrements.' },
+  ]}
+  screenReaderRows={[
+    'The input component uses the **`aria-labelledby`** attribute to reference the label.',
+    'The two icon buttons each use the **`aria-controls`** attribute with the input ID and the **`aria-label`** attribute to provide an accessible name.',
+  ]}
+/>
+
+{/* Non-standard section: '#### Note' documents onChange callback behaviour. Flagged for future migration. */}
 #### Note
 
 For NumberField, the onChange callback is triggered when the increment and decrement buttons are pressed, or upon focus shifting away from the input after typing a value with the keyboard. This is because of internal validation which needs to occur when typing. (Source: [React Aria NumberField](https://react-spectrum.adobe.com/react-aria/useNumberField.html#controlled))

package/lib/cjs/components/OverlayPanel/OverlayPanel.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as OverlayPanelStories from './OverlayPanel.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={OverlayPanelStories} isTemplate />
 
@@ -24,17 +26,11 @@ This component requires the OverlayProvider component.
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Key | Functions |
-| ---- | ---- |
-| Tab | The trigger is focusable using the Tab key and follows the page tab sequence. |
-| Space or Enter | Opens or closes the panel when the trigger is focused. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Esc | Pressing the escape key closes the overlay and focuses on the previous focusable component. |
-
-#### Screen Readers
-
-The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of content.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'The trigger is focusable using the Tab key and follows the page tab sequence.' },
+  { key: 'Space or Enter', description: 'Opens or closes the panel when the trigger is focused.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Esc', description: 'Pressing the escape key closes the overlay and focuses on the previous focusable component.' },
+]} screenReaderRows={[
+  'The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of content.',
+]} />