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

package/lib/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/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/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/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/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/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/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/components/Pagination/Pagination.js

@@ -61,12 +61,14 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
     icon: ChevronLeftIcon,
     title: {
       name: 'Previous'
-    }
+    },
+    size: "md"
   }, previousButtonIconProps))), ___EmotionJSX(IconButton, nextButtonProps, ___EmotionJSX(Icon, _extends({
     icon: ChevronRightIcon,
     title: {
       name: 'Next'
-    }
+    },
+    size: "md"
   }, nextButtonIconProps))))));
 });
 export default Pagination;

package/lib/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/components/Pagination/Pagination.styles.js

@@ -6,7 +6,7 @@ var container = {
   flexGrow: 1
 };
 var iconWrapper = {
-  ml: 'md'
+  ml: 'lg'
 };
 var wrapper = {
   ml: 'auto',

package/lib/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/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/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
 

package/lib/components/RadioGroupField/RadioGroupField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as RadioGroupFieldStories from './RadioGroupField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={RadioGroupFieldStories} isTemplate />
 
@@ -23,20 +25,12 @@ This component requires the RadioField component.
 
 This component should adhere to the [WAI-ARIA RadioGroup](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) accessibility guidelines.
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Arrow Keys | Once focused, the radio button can be selected using any of the arrow keys. |
-| Space | If the radio button is focused, pressing space selects or deselects it. |
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-
-- The **`aria-labelledby`** attribute is used to reference the label, and the **`aria-orientation`**  attribute is set to “Vertical” by default.
-- Each radio input also uses the **`aria-labelledby`** attribute pointing to its label.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Arrow Keys', description: 'Once focused, the radio button can be selected using any of the arrow keys.' },
+  { key: 'Space', description: 'If the radio button is focused, pressing space selects or deselects it.' },
+]} screenReaderRows={[
+  'The **`aria-labelledby`** attribute is used to reference the label, and the **`aria-orientation`**  attribute is set to “Vertical” by default.',
+  'Each radio input also uses the **`aria-labelledby`** attribute pointing to its label.',
+]} />

package/lib/components/RangeCalendar/RangeCalendar.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as RangeCalendarStories from './RangeCalendar.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={RangeCalendarStories} isTemplate />
 
@@ -16,25 +18,18 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Keys | Functions |
-| ---- | --------- |
-| Space or Enter | Selects the start and end dates when a date is focused, and navigates to the calendar pages when the navigational buttons are focused. |
-| Tab | Components in the calendar are focusable and follow the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Pressing Home:(Fn + Right Arrow Key) Or Control or Command + Home | Shifts the focus to the first calendar date of the currently focused month. |
-| Pressing End:(Fn + left Arrow Key) Or Control or Command + End | Shifts the focus to the last calendar date of the currently focused month. |
-| Arrow key | Navigates up, down, right, and left across the calendar. If at the end of the current calendar, the right arrow key navigates to the next calendar. If at the beginning of the current calendar, the left arrow key navigates to the previous calendar. |
-| Page up | Changes focus to the same date in the previous month. |
-| Page down | Changes focus to the same date in the next month. |
-| Shift + page up | Changes the grid of dates to the same months in the previous year. |
-| Shift+ page down | Changes the grid of dates to the same months in the next year. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The **`aria-label`** attribute is used to provide an accessible name.
-- In each data cell, the **`aria-selected`** attribute is set to “true” for all dates within the selected range, and **`aria-disabled`** is set to “false” by default.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Selects the start and end dates when a date is focused, and navigates to the calendar pages when the navigational buttons are focused.' },
+  KeyboardRows.tabCalendar,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Pressing Home:(Fn + Right Arrow Key) Or Control or Command + Home', description: 'Shifts the focus to the first calendar date of the currently focused month.' },
+  { key: 'Pressing End:(Fn + left Arrow Key) Or Control or Command + End', description: 'Shifts the focus to the last calendar date of the currently focused month.' },
+  { key: 'Arrow key', description: 'Navigates up, down, right, and left across the calendar. If at the end of the current calendar, the right arrow key navigates to the next calendar. If at the beginning of the current calendar, the left arrow key navigates to the previous calendar.' },
+  { key: 'Page up', description: 'Changes focus to the same date in the previous month.' },
+  { key: 'Page down', description: 'Changes focus to the same date in the next month.' },
+  { key: 'Shift + page up', description: 'Changes the grid of dates to the same months in the previous year.' },
+  { key: 'Shift+ page down', description: 'Changes the grid of dates to the same months in the next year.' },
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelAccessibleName,
+  'In each data cell, the **`aria-selected`** attribute is set to “true” for all dates within the selected range, and **`aria-disabled`** is set to “false” by default.',
+]} />

package/lib/components/RockerButtonGroup/RockerButtonGroup.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as RockerButtonGroupStories from './RockerButtonGroup.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={RockerButtonGroupStories} isTemplate />
 
@@ -19,19 +21,12 @@ This component requires the RockerButton component.
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Key | Functions |
-| ---- | ---- |
-| Tab | The group is focusable using the Tab key and follows the page tab sequence. |
-| Arrow keys & Enter or Space| After the RockerButtonGroup has focus, individual rocker buttons can be focused using the right and left arrow keys, and selected by either pressing the Enter key or Space. |
-| Arrow keys | The right and left arrow keys can loop back to the beginning and end of the group |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- 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 buttons use the **`aria-pressed`** attribute to indicate the current status of the toggle button.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'The group is focusable using the Tab key and follows the page tab sequence.' },
+  { key: 'Arrow keys & Enter or Space', description: 'After the RockerButtonGroup has focus, individual rocker buttons can be focused using the right and left arrow keys, and selected by either pressing the Enter key or Space.' },
+  { key: 'Arrow keys', description: 'The right and left arrow keys can loop back to the beginning and end of the group' },
+]} screenReaderRows={[
+  ScreenReaderRows.ariaOrientationWithTrailingSpace,
+  'The default **`aria-disabled`** attribute is set to “False” by default. ',
+  'The buttons use the **`aria-pressed`** attribute to indicate the current status of the toggle button.',
+]} />