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

package/lib/cjs/components/Pagination/Pagination.js

@@ -73,12 +73,14 @@ var Pagination = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     icon: _ChevronLeftIcon["default"],
     title: {
       name: 'Previous'
-    }
+    },
+    size: "md"
   }, previousButtonIconProps))), (0, _react2.jsx)(_index.IconButton, nextButtonProps, (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
     icon: _ChevronRightIcon["default"],
     title: {
       name: 'Next'
-    }
+    },
+    size: "md"
   }, nextButtonIconProps))))));
 });
 var _default = exports["default"] = Pagination;

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

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

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
 

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

package/lib/cjs/components/SearchField/SearchField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as SearchFieldStories from './SearchField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={SearchFieldStories} isTemplate />
 
@@ -22,13 +24,9 @@ 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 field is focusable using the Tab key and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Enter or Space | Once the user starts typing, the previously hidden clear button can be focused and selected by pressing the Enter or Space key. |
-| Esc and Enter | The field can be cleared by pressing the Escape key and handles submit events on Enter. |
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Enter or Space', description: 'Once the user starts typing, the previously hidden clear button can be focused and selected by pressing the Enter or Space key.' },
+  { key: 'Esc and Enter', description: 'The field can be cleared by pressing the Escape key and handles submit events on Enter.' },
+]} />

package/lib/cjs/components/SelectField/SelectField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as SelectFieldStories from './SelectField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={SelectFieldStories} isTemplate />
 
@@ -22,26 +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 | The field is focusable using the Tab key and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component.|
-| Space or Enter | Pressing Space or Enter when the trigger button is focused opens or closes the menu. Pressing Space or Enter when the menu item is focused selects the listbox option. |
-| Arrow keys | Can be used to move through the listbox selection. |
-| Typing in input field | Adds focus to it and opens the popover. |
-| 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 input.|
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-- The trigger button uses the **`aria-labelledby`** attribute to reference the label ID, the **`aria-expanded`** attribute to indicate the expansion or collapse of the popover, 
-- The **`aria-haspopup`** attribute indicates the type of popup content as a listbox. Once expanded, the **`aria-controls`** attribute is added to the button pointing to the popover. 
-- The component uses the **`aria-invalid`** attribute to detect incorrect values or status errors, and is set to “False” by default.
-- The listbox uses the **`aria-labelledby`** attribute pointing to the label ID.
-- Each option in the list 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 default **`aria-disabled`** value is false for each option.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Space or Enter', description: 'Pressing Space or Enter when the trigger button is focused opens or closes the menu. Pressing Space or Enter when the menu item is focused selects the listbox option.' },
+  { key: 'Arrow keys', description: 'Can be used to move through the listbox selection.' },
+  KeyboardRows.typingOpenPopover,
+  KeyboardRows.homeFirstListboxItem,
+  KeyboardRows.endLastListboxItem,
+  { key: 'Esc', description: 'Pressing the escape key closes the popover menu and adds focus to the input.' },
+]} screenReaderRows={[
+  "The trigger button uses the **`aria-labelledby`** attribute to reference the label ID, the **`aria-expanded`** attribute to indicate the expansion or collapse of the popover, ",
+  "The **`aria-haspopup`** attribute indicates the type of popup content as a listbox. Once expanded, the **`aria-controls`** attribute is added to the button pointing to the popover. ",
+  "The component uses the **`aria-invalid`** attribute to detect incorrect values or status errors, and is set to “False” by default.",
+  "The listbox uses the **`aria-labelledby`** attribute pointing to the label ID.",
+  "Each option in the list 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 default **`aria-disabled`** value is false for each option.",
+]} />

package/lib/cjs/components/Separator/Separator.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as SeparatorStories from './Separator.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={SeparatorStories} isTemplate />
 
@@ -15,6 +16,6 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
-#### Screen Readers
-
-The **`aria-orientation`** attribute indicates whether the  orientation is horizontal, vertical, unknown, or ambiguous
+<AccessibilityTable screenReaderRows={[
+  'The **`aria-orientation`** attribute indicates whether the  orientation is horizontal, vertical, unknown, or ambiguous',
+]} />

package/lib/cjs/components/ServerErrorBoundary/ServerErrorBoundary.mdx

@@ -1,5 +1,7 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 import * as ServerErrorBoundaryStories from './ServerErrorBoundary.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={ServerErrorBoundaryStories} isTemplate />
 
@@ -15,11 +17,7 @@ This component can be used independently and does not require additional compone
 
 This component should adhere to the [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.
-
-| Keys           | Functions                                             |
-| -------------- | ----------------------------------------------------- |
-| Space or Enter | Selects the button.                                   |
-| Tab            | Focuses the button and follows the page tab sequence. |
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.spaceEnterSelectsButton,
+  KeyboardRows.tabFocusesButton,
+]} />

package/lib/cjs/components/SliderField/SliderField.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as SliderFieldStories from './SliderField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={SliderFieldStories} isTemplate />
 
@@ -57,20 +58,16 @@ The `SliderField` component is used to allow users to select a value from a rang
 
 This component adheres to accessibility guidelines to ensure a better user experience for all users.
 
-#### Keyboard Navigation
-
-| Keys         | Function                                                                 |
-| ------------ | ----------------------------------------------------------------------- |
-| Tab          | Moves focus to the slider.                                              |
-| Arrow Keys   | Adjusts the slider value incrementally.                                  |
-| Home         | Moves the slider to the minimum value.                                  |
-| End          | Moves the slider to the maximum value.                                  |
-
-#### Screen Readers
-
-- **`aria-valuenow`**: Announces the current value of the slider.
-- **`aria-valuemin` and `aria-valuemax`**: Define the minimum and maximum values of the slider.
-- **`aria-orientation`**: Indicates whether the slider is horizontal or vertical.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Moves focus to the slider.' },
+  { key: 'Arrow Keys', description: 'Adjusts the slider value incrementally.' },
+  { key: 'Home', description: 'Moves the slider to the minimum value.' },
+  { key: 'End', description: 'Moves the slider to the maximum value.' },
+]} screenReaderRows={[
+  '**`aria-valuenow`**: Announces the current value of the slider.',
+  '**`aria-valuemin` and `aria-valuemax`**: Define the minimum and maximum values of the slider.',
+  '**`aria-orientation`**: Indicates whether the slider is horizontal or vertical.',
+]} />
 
 ### Example Usage
 
@@ -125,4 +122,4 @@ This component adheres to accessibility guidelines to ensure a better user exper
   minValue={0}
   maxValue={100}
 />
-```
+```

package/lib/cjs/components/StatusIcon/StatusIcon.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as StatusIconStories from './StatusIcon.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={StatusIconStories} isTemplate />
 
@@ -15,6 +16,6 @@ It is built on top of the [Box from Theme-UI](https://theme-ui.com/components/bo
 
 This component can be used independently and does not require additional components.
 
-#### Screen Readers
-
-If the icon has a title associated with it, the **`aria-labelledby`** attribute is used to provide the label ID.
+<AccessibilityTable screenReaderRows={[
+  'If the icon has a title associated with it, the **`aria-labelledby`** attribute is used to provide the label ID.',
+]} />

package/lib/cjs/components/Stepper/Stepper.mdx

@@ -1,5 +1,7 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 import * as StepperStories from './Stepper.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={StepperStories} isTemplate />
 
@@ -23,26 +25,22 @@ This component requires the Item originating from [react-stately/collections](ht
 
 This component should adhere to the [WAI-ARIA Stepper](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) accessibility guidelines.
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Keys                                                 | Function                                                                              |
-| ---------------------------------------------------- | ------------------------------------------------------------------------------------- |
-| Tab                                                  | The field is focusable using the Tab key and follows the page tab sequence.           |
-| Arrow keys                                           | When this field is focused, the arrow keys can be used to navigate through the steps. |
-| Shift + Tab                                          | Moves focus to the previous focusable component.                                      |
-| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first step.                                                   |
-| End(Fn + Left Arrow Key) Or Control/Command + End    | Shifts the focus to the last step.                                                    |
-
-#### 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.
-- Each step uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.
-- Each step uses the **`aria-labelledby`** with the label ID to reference it.
-
+<AccessibilityTable
+  keyboardRows={[
+    KeyboardRows.tabField,
+    { key: 'Arrow keys', description: 'When this field is focused, the arrow keys can be used to navigate through the steps.' },
+    KeyboardRows.shiftTabFocusPrevious,
+    { key: 'Home(Fn + Right Arrow Key) Or Control/Command + Home', description: 'Shifts the focus to the first step.' },
+    { key: 'End(Fn + Left Arrow Key) Or Control/Command + End', description: 'Shifts the focus to the last step.' },
+  ]}
+  screenReaderRows={[
+    ScreenReaderRows.ariaOrientationNoTrailingSpace,
+    'Each step uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.',
+    'Each step uses the **`aria-labelledby`** with the label ID to reference it.',
+  ]}
+/>
+
+{/* Non-standard section: '#### Usage' contains layout guidance. Flagged for future migration. */}
 #### Usage
 
 - The stepper component is always center-aligned in its context, whether it's in a page, a panel, or a popup.

package/lib/cjs/components/SwitchField/SwitchField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as SwitchFieldStories from './SwitchField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={SwitchFieldStories} isTemplate />
 
@@ -21,17 +23,10 @@ This component can be used independently and does not require additional compone
 
 This component should adhere to the [WAI-ARIA Switch](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) 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.|
-| Space | When focused, Space toggles the switched field. |
-
-#### Screen readers
-
-The hidden input uses the **`aria-labelledby`** attribute to associate the label, the **`aria-label`** attribute to provide an accessible name, 
-and the **`aria-checked`** attribute for the switched state.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Space', description: 'When focused, Space toggles the switched field.' },
+]} screenReaderRows={[
+  'The hidden input uses the **`aria-labelledby`** attribute to associate the label, the **`aria-label`** attribute to provide an accessible name, and the **`aria-checked`** attribute for the switched state.',
+]} />

package/lib/cjs/components/TableBase/TableBase.js

@@ -338,7 +338,10 @@ function TableColumnHeader(props) {
     isRow: true,
     gap: "sm",
     alignItems: "center"
-  }, (0, _react2.jsx)(_.Text, null, column.rendered), allowsSorting && sortIcon), allowsResizing && (0, _react2.jsx)(Resizer, {
+  }, (0, _react2.jsx)(_.Text, {
+    as: "h4",
+    variant: "headText"
+  }, column.rendered), allowsSorting && sortIcon), allowsResizing && (0, _react2.jsx)(Resizer, {
     column: column,
     layoutState: layoutState,
     onResizeStart: onResizeStart,