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

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