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

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

package/lib/cjs/components/Pagination/Pagination.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as PaginationStories from './Pagination.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={PaginationStories} isTemplate />
 
@@ -24,19 +25,14 @@ This component requires the following components:
 
 This component adheres to the [WCAG 2.1 - 2.4.4 Link Purpose (In Context)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html) accessibility guidelines.
 
-#### Keyboard Navigation
-
-| Key           | Functions                          |
-|---------------|-----------------------------------|
-| Tab           | Moves focus between controls.    |
-| Enter         | Activates the focused control.   |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- **`aria-label`**: Provides an accessible name for the pagination controls.
-- **`aria-disabled`**: Indicates when navigation buttons are disabled.
-- **`aria-live`**: Updates screen readers with changes in pagination state.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Moves focus between controls.' },
+  { key: 'Enter', description: 'Activates the focused control.' },
+]} screenReaderRows={[
+  '**`aria-label`**: Provides an accessible name for the pagination controls.',
+  '**`aria-disabled`**: Indicates when navigation buttons are disabled.',
+  '**`aria-live`**: Updates screen readers with changes in pagination state.',
+]} />
 
 ### Usage
 

package/lib/cjs/components/PasswordField/PasswordField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as PasswordFieldStories from './PasswordField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={PasswordFieldStories} isTemplate />
 
@@ -17,18 +19,11 @@ 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. |
-| Shift + Tab | Moves focus to the previous focusable component.|
-| Space or Enter | Toggles the PasswordType component to hide or reveal the input. |
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-- The input component uses the **`aria-labelledby`** attribute to reference the label ID.
-- The icon buttons use **`aria-label`** attribute to provide an accessible name.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabInput,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Space or Enter', description: 'Toggles the PasswordType component to hide or reveal the input.' },
+]} screenReaderRows={[
+  'The input component uses the **`aria-labelledby`** attribute to reference the label ID.',
+  'The icon buttons use **`aria-label`** attribute to provide an accessible name.',
+]} />

package/lib/cjs/components/PopoverMenu/PopoverMenu.mdx

@@ -1,5 +1,7 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 import * as PopoverMenuStories from './PopoverMenu.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={PopoverMenuStories} isTemplate />
 
@@ -33,25 +35,17 @@ This component requires these components:
 
 This component should adhere to the [WAI-ARIA Dialog](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 and menu items are focusable using the Tab key.                                                       |
-| Shift + Tab    | Moves focus to the previous focusable component.                                                                  |
-| Space or Enter | Pressing Space or Enter on a focused trigger opens or closes the 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:
-
-- The **`aria-haspopup`** attribute is set to “True” to indicate that this component contains popover content.
-- The trigger uses the **`aria-expanded`** attribute to indicate when the content expands and collapses.
-- The menu ID is supplied to the **`aria-controls`** attribute pointing to the content.
-- The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.
-- The default **`aria-disabled`** attribute is set to “False” by default.
-- The button ID is supplied to the **`aria-labelledby`** attribute to reference it.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'The trigger and menu items are focusable using the Tab key.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Space or Enter', description: 'Pressing Space or Enter on a focused trigger opens or closes the menu and selects the MenuItems it is focused on.' },
+  KeyboardRows.arrowKeysMovePopoverSelection,
+  KeyboardRows.escClosePopoverFocusPrevious,
+]} screenReaderRows={[
+  'The **`aria-haspopup`** attribute is set to “True” to indicate that this component contains popover content.',
+  'The trigger uses the **`aria-expanded`** attribute to indicate when the content expands and collapses.',
+  'The menu ID is supplied to the **`aria-controls`** attribute pointing to the content.',
+  ScreenReaderRows.ariaOrientationNoTrailingSpace,
+  'The default **`aria-disabled`** attribute is set to “False” by default.',
+  'The button ID is supplied to the **`aria-labelledby`** attribute to reference it.',
+]} />

package/lib/cjs/components/ProgressBar/ProgressBar.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as ProgressBarStories from './ProgressBar.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={ProgressBarStories} isTemplate />
 
@@ -22,13 +23,11 @@ This component can be used independently and does not require additional compone
 
 This component should adhere to the [WAI-ARIA ProgressBar](https://w3c.github.io/aria/#progressbar) accessibility guidelines.
 
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-
-- The progressBar uses the **`aria-valuemin`** and **`aria-valuemax`** to indicate the minimum and maximum progress indicator values. If they are missing, they default to 0 and 100 respectively. 
-- The progressBar uses the **`aria-valuenow`** attribute to indicate the current value of the progressbar.
-- If the progressbar is describing the loading progress of a particular region of a page, authors SHOULD both use **`aria-describedby`** to reference the progressbar status, and set the **`aria-busy`** attribute to true on the region until it is finished loading. It is not possible for the user to alter the value of a progressbar because it is always read-only
+<AccessibilityTable screenReaderRows={[
+  'The progressBar uses the **`aria-valuemin`** and **`aria-valuemax`** to indicate the minimum and maximum progress indicator values. If they are missing, they default to 0 and 100 respectively. ',
+  'The progressBar uses the **`aria-valuenow`** attribute to indicate the current value of the progressbar.',
+  'If the progressbar is describing the loading progress of a particular region of a page, authors SHOULD both use **`aria-describedby`** to reference the progressbar status, and set the **`aria-busy`** attribute to true on the region until it is finished loading. It is not possible for the user to alter the value of a progressbar because it is always read-only',
+]} />
 
 ### Determinate vs Indeterminate usage