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

package/lib/cjs/utils/docUtils/AccessibilityTable.test.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _universalComponentTest = require("../testUtils/universalComponentTest");
+var _AccessibilityTable = _interopRequireDefault(require("./AccessibilityTable"));
+var _react3 = require("@emotion/react");
+// Needs to be added to each component test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_AccessibilityTable["default"], (0, _extends2["default"])({
+      keyboardRows: [{
+        key: 'Tab',
+        description: 'Focus next element'
+      }]
+    }, props));
+  },
+  skipForwardRefTest: true
+});
+test('renders nothing when both keyboardRows and screenReaderRows are absent', function () {
+  var _render = (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], null)),
+    container = _render.container;
+  expect(container).toBeEmptyDOMElement();
+});
+test('renders nothing when both props are provided as empty arrays', function () {
+  var _render2 = (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: [],
+      screenReaderRows: []
+    })),
+    container = _render2.container;
+  expect(container).toBeEmptyDOMElement();
+});
+describe('keyboard navigation section', function () {
+  var keyboardRows = [{
+    key: 'Tab',
+    description: 'Focus next element'
+  }, {
+    key: 'Shift+Tab',
+    description: 'Focus previous element'
+  }];
+  test('renders the Keyboard Navigation heading', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: keyboardRows
+    }));
+    expect(_react2.screen.getByText('Keyboard Navigation')).toBeInTheDocument();
+  });
+  test('renders the keyboard section description paragraph', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: keyboardRows
+    }));
+    expect(_react2.screen.getByText('These keys provide additional functionality to the component.')).toBeInTheDocument();
+  });
+  test('renders Key and Function column headers', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: keyboardRows
+    }));
+    expect(_react2.screen.getByText('Key')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Function')).toBeInTheDocument();
+  });
+  test('renders one row per keyboardRows entry', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: keyboardRows
+    }));
+    var rows = _react2.screen.getAllByRole('row');
+    // thead has 1 row, tbody has 2 rows (one per entry)
+    expect(rows).toHaveLength(3);
+  });
+  test('renders the key cell for each row', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: keyboardRows
+    }));
+    expect(_react2.screen.getByText('Tab')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Shift+Tab')).toBeInTheDocument();
+  });
+  test('does not render the Screen Readers section', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: keyboardRows
+    }));
+    expect(_react2.screen.queryByText('Screen Readers')).not.toBeInTheDocument();
+  });
+  test('renders a custom keyboardDescription when the prop is provided', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: keyboardRows,
+      keyboardDescription: "Custom keyboard description for this component."
+    }));
+    expect(_react2.screen.getByText('Custom keyboard description for this component.')).toBeInTheDocument();
+  });
+  test('does not render a custom keyboardDescription when the prop is omitted', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: keyboardRows
+    }));
+    expect(_react2.screen.queryByText('Custom keyboard description for this component.')).not.toBeInTheDocument();
+  });
+  test('falls back to the default description when keyboardDescription is an empty string', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: keyboardRows,
+      keyboardDescription: ""
+    }));
+    expect(_react2.screen.getByText('These keys provide additional functionality to the component.')).toBeInTheDocument();
+  });
+});
+describe('screen reader section', function () {
+  var screenReaderRows = ['aria-label', 'aria-expanded'];
+  test('renders the Screen Readers heading', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      screenReaderRows: screenReaderRows
+    }));
+    expect(_react2.screen.getByText('Screen Readers')).toBeInTheDocument();
+  });
+  test('renders the screen reader section description paragraph', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      screenReaderRows: screenReaderRows
+    }));
+    expect(_react2.screen.getByText('This component uses the following attributes to assist screen readers:')).toBeInTheDocument();
+  });
+  test('renders a list with one item per screenReaderRows entry', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      screenReaderRows: screenReaderRows
+    }));
+    var items = _react2.screen.getAllByRole('listitem');
+    expect(items).toHaveLength(screenReaderRows.length);
+  });
+  test('renders text content for each screen reader row item', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      screenReaderRows: screenReaderRows
+    }));
+    expect(_react2.screen.getByText('aria-label')).toBeInTheDocument();
+    expect(_react2.screen.getByText('aria-expanded')).toBeInTheDocument();
+  });
+  test('does not render the Keyboard Navigation section', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      screenReaderRows: screenReaderRows
+    }));
+    expect(_react2.screen.queryByText('Keyboard Navigation')).not.toBeInTheDocument();
+  });
+});
+describe('both sections together', function () {
+  var keyboardRows = [{
+    key: 'Tab',
+    description: 'Focus next element'
+  }];
+  var screenReaderRows = ['aria-label'];
+  test('renders both headings when both props are provided', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: keyboardRows,
+      screenReaderRows: screenReaderRows
+    }));
+    expect(_react2.screen.getByText('Keyboard Navigation')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Screen Readers')).toBeInTheDocument();
+  });
+  test('renders both the table and the list', function () {
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: keyboardRows,
+      screenReaderRows: screenReaderRows
+    }));
+    expect(_react2.screen.getByRole('table')).toBeInTheDocument();
+    expect(_react2.screen.getByRole('list')).toBeInTheDocument();
+  });
+});
+describe('markdown rendering', function () {
+  test('renders bold markdown in row.description as a strong element', function () {
+    var keyboardRows = [{
+      key: 'Enter',
+      description: '**Confirm** selection'
+    }];
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: keyboardRows
+    }));
+    var strongEl = _react2.screen.getByText('Confirm');
+    expect(strongEl.tagName).toBe('STRONG');
+  });
+  test('renders plain text description via markdown-to-jsx without error', function () {
+    var keyboardRows = [{
+      key: 'Tab',
+      description: 'Focus next element'
+    }];
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      keyboardRows: keyboardRows
+    }));
+    expect(_react2.screen.getByText('Focus next element')).toBeInTheDocument();
+  });
+  test('renders bold markdown in screenReaderRows item as a strong element', function () {
+    var screenReaderRows = ['**aria-label**: describes the element'];
+    (0, _react2.render)((0, _react3.jsx)(_AccessibilityTable["default"], {
+      screenReaderRows: screenReaderRows
+    }));
+    var strongEl = _react2.screen.getByText('aria-label');
+    expect(strongEl.tagName).toBe('STRONG');
+  });
+});

package/lib/cjs/utils/docUtils/accessibilityTableConstants.d.ts

@@ -0,0 +1,130 @@
+export declare const KeyboardRows: {
+    readonly shiftTabFocusPrevious: {
+        readonly key: "Shift + Tab";
+        readonly description: "Moves focus to the previous focusable component.";
+    };
+    readonly tabField: {
+        readonly key: "Tab";
+        readonly description: "The field is focusable using the Tab key and follows the page tab sequence.";
+    };
+    readonly tabFocusesField: {
+        readonly key: "Tab";
+        readonly description: "Focuses the field and follows the page tab sequence.";
+    };
+    readonly spaceEnterSelectsButton: {
+        readonly key: "Space or Enter";
+        readonly description: "Selects the button.";
+    };
+    readonly tabFocusesButton: {
+        readonly key: "Tab";
+        readonly description: "Focuses the button and follows the page tab sequence.";
+    };
+    readonly homeFirstListboxItem: {
+        readonly key: "Home(Fn + Right Arrow Key) Or Control/Command + Home";
+        readonly description: "Shifts the focus to the first item in the listbox.";
+    };
+    readonly endLastListboxItem: {
+        readonly key: "End(Fn + Left Arrow Key) Or Control/Command + End";
+        readonly description: "Shifts the focus to the last item in the listbox.";
+    };
+    readonly tabNextFocusableComponent: {
+        readonly key: "Tab";
+        readonly description: "Moves focus to the next focusable component and follows the page tab sequence.";
+    };
+    readonly tabFocusesItem: {
+        readonly key: "Tab";
+        readonly description: "Focuses item and follows the page tab sequence.";
+    };
+    readonly tabAccordionFocusable: {
+        readonly key: "Tab";
+        readonly description: "Moves focus to the next focusable component. All focusable components in the accordion are included in the page tab sequence.";
+    };
+    readonly shiftTabAccordionFocusPrevious: {
+        readonly key: "Shift + Tab";
+        readonly description: "Moves focus to the previous focusable component. All focusable components in the accordion are included in the page tab sequence.";
+    };
+    readonly spaceEnterToggleAccordion: {
+        readonly key: "Space or Enter";
+        readonly description: "Toggles the component when the accordion is focused.";
+    };
+    readonly escCollapseAccordion: {
+        readonly key: "Esc";
+        readonly description: "Pressing the escape key when the accordion is open and focused collapses the component.";
+    };
+    readonly tabCalendar: {
+        readonly key: "Tab";
+        readonly description: "Components in the calendar are focusable and follow the page tab sequence.";
+    };
+    readonly homeFirstCalendarDate: {
+        readonly key: "Pressing Home:(Fn + Right Arrow Key) Or Control or Command + Home";
+        readonly description: "Shifts the focus to the first calendar date.";
+    };
+    readonly pageUpPreviousMonth: {
+        readonly key: "Page up";
+        readonly description: "Changes the grid of dates to the previous month.";
+    };
+    readonly pageDownNextMonth: {
+        readonly key: "Page down";
+        readonly description: "Changes the grid of dates to the next month.";
+    };
+    readonly shiftPageUpPreviousYear: {
+        readonly key: "Shift + page up";
+        readonly description: "Changes the grid of dates to the same month in the previous year.";
+    };
+    readonly shiftPageDownNextYear: {
+        readonly key: "Shift + page down";
+        readonly description: "Changes the grid of dates to the same month in the next year.";
+    };
+    readonly spaceEnterSelectsComponent: {
+        readonly key: "Space or Enter";
+        readonly description: "Selects the component when it is focused.";
+    };
+    readonly typingOpenPopover: {
+        readonly key: "Typing in input field";
+        readonly description: "Adds focus to it and opens the popover.";
+    };
+    readonly spaceEnterSelectsItem: {
+        readonly key: "Space or Enter";
+        readonly description: "Selects the item.";
+    };
+    readonly spaceEnterSelectsComponentSimple: {
+        readonly key: "Space or Enter";
+        readonly description: "Selects the component.";
+    };
+    readonly tabFocusesComponent: {
+        readonly key: "Tab";
+        readonly description: "Focuses the component and follows the page tab sequence.";
+    };
+    readonly tabInput: {
+        readonly key: "Tab";
+        readonly description: "The input is focusable using the Tab key and follows the page tab sequence.";
+    };
+    readonly homeFirstRow: {
+        readonly key: "Home(Fn + Right Arrow Key) Or Control/Command + Home";
+        readonly description: "Shifts the focus to the first row.";
+    };
+    readonly endLastVisibleRow: {
+        readonly key: "End(Fn + Left Arrow Key) Or Control/Command + End";
+        readonly description: "Shifts the focus to the last visible row.";
+    };
+    readonly arrowKeysMovePopoverSelection: {
+        readonly key: "Arrow keys";
+        readonly description: "Moves the selection through the popover.";
+    };
+    readonly escClosePopoverFocusPrevious: {
+        readonly key: "Esc";
+        readonly description: "Pressing the escape key closes the popover and focuses on the previous focusable component.";
+    };
+};
+export declare const ScreenReaderRows: {
+    readonly ariaLabelAccessibleName: "The **`aria-label`** attribute is used to provide an accessible name.";
+    readonly eachLinkAriaLabel: "Each Link component uses the **`aria-label`** attribute to provide an accessible name.";
+    readonly ariaLiveAnnounce: "The **`aria-live`** attribute is used to announce content changes in a live region.";
+    readonly ariaOrientationWithTrailingSpace: "The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous. ";
+    readonly accordionAriaExpanded: "The accordion header button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses.";
+    readonly iconAriaHidden: "The Icon uses the **`aria-hidden`** attribute to hide its content from assistive technology.";
+    readonly triggerAriaExpandedExpandCollapse: "The trigger button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses.";
+    readonly ariaLabelledByInvalidFalse: "This component uses the **`aria-labelledby`** attribute pointing to the label, and the **`aria-invalid`** attribute to detect incorrect values or status errors, which is set to \"False\" by default.";
+    readonly ariaOrientationNoTrailingSpace: "The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.";
+    readonly componentAriaLabel: "This component uses the **`aria-label`** attribute to provide an accessible name.";
+};

package/lib/cjs/utils/docUtils/accessibilityTableConstants.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScreenReaderRows = exports.KeyboardRows = void 0;
+var KeyboardRows = exports.KeyboardRows = {
+  shiftTabFocusPrevious: {
+    key: 'Shift + Tab',
+    description: 'Moves focus to the previous focusable component.'
+  },
+  tabField: {
+    key: 'Tab',
+    description: 'The field is focusable using the Tab key and follows the page tab sequence.'
+  },
+  tabFocusesField: {
+    key: 'Tab',
+    description: 'Focuses the field and follows the page tab sequence.'
+  },
+  spaceEnterSelectsButton: {
+    key: 'Space or Enter',
+    description: 'Selects the button.'
+  },
+  tabFocusesButton: {
+    key: 'Tab',
+    description: 'Focuses the button and follows the page tab sequence.'
+  },
+  homeFirstListboxItem: {
+    key: 'Home(Fn + Right Arrow Key) Or Control/Command + Home',
+    description: 'Shifts the focus to the first item in the listbox.'
+  },
+  endLastListboxItem: {
+    key: 'End(Fn + Left Arrow Key) Or Control/Command + End',
+    description: 'Shifts the focus to the last item in the listbox.'
+  },
+  tabNextFocusableComponent: {
+    key: 'Tab',
+    description: 'Moves focus to the next focusable component and follows the page tab sequence.'
+  },
+  tabFocusesItem: {
+    key: 'Tab',
+    description: 'Focuses item and follows the page tab sequence.'
+  },
+  tabAccordionFocusable: {
+    key: 'Tab',
+    description: 'Moves focus to the next focusable component. All focusable components in the accordion are included in the page tab sequence.'
+  },
+  shiftTabAccordionFocusPrevious: {
+    key: 'Shift + Tab',
+    description: 'Moves focus to the previous focusable component. All focusable components in the accordion are included in the page tab sequence.'
+  },
+  spaceEnterToggleAccordion: {
+    key: 'Space or Enter',
+    description: 'Toggles the component when the accordion is focused.'
+  },
+  escCollapseAccordion: {
+    key: 'Esc',
+    description: 'Pressing the escape key when the accordion is open and focused collapses the component.'
+  },
+  tabCalendar: {
+    key: 'Tab',
+    description: 'Components in the calendar are focusable and follow the page tab sequence.'
+  },
+  homeFirstCalendarDate: {
+    key: 'Pressing Home:(Fn + Right Arrow Key) Or Control or Command + Home',
+    description: 'Shifts the focus to the first calendar date.'
+  },
+  pageUpPreviousMonth: {
+    key: 'Page up',
+    description: 'Changes the grid of dates to the previous month.'
+  },
+  pageDownNextMonth: {
+    key: 'Page down',
+    description: 'Changes the grid of dates to the next month.'
+  },
+  shiftPageUpPreviousYear: {
+    key: 'Shift + page up',
+    description: 'Changes the grid of dates to the same month in the previous year.'
+  },
+  shiftPageDownNextYear: {
+    key: 'Shift + page down',
+    description: 'Changes the grid of dates to the same month in the next year.'
+  },
+  spaceEnterSelectsComponent: {
+    key: 'Space or Enter',
+    description: 'Selects the component when it is focused.'
+  },
+  typingOpenPopover: {
+    key: 'Typing in input field',
+    description: 'Adds focus to it and opens the popover.'
+  },
+  spaceEnterSelectsItem: {
+    key: 'Space or Enter',
+    description: 'Selects the item.'
+  },
+  spaceEnterSelectsComponentSimple: {
+    key: 'Space or Enter',
+    description: 'Selects the component.'
+  },
+  tabFocusesComponent: {
+    key: 'Tab',
+    description: 'Focuses the component and follows the page tab sequence.'
+  },
+  tabInput: {
+    key: 'Tab',
+    description: 'The input is focusable using the Tab key and follows the page tab sequence.'
+  },
+  homeFirstRow: {
+    key: 'Home(Fn + Right Arrow Key) Or Control/Command + Home',
+    description: 'Shifts the focus to the first row.'
+  },
+  endLastVisibleRow: {
+    key: 'End(Fn + Left Arrow Key) Or Control/Command + End',
+    description: 'Shifts the focus to the last visible row.'
+  },
+  arrowKeysMovePopoverSelection: {
+    key: 'Arrow keys',
+    description: 'Moves the selection through the popover.'
+  },
+  escClosePopoverFocusPrevious: {
+    key: 'Esc',
+    description: 'Pressing the escape key closes the popover and focuses on the previous focusable component.'
+  }
+};
+var ScreenReaderRows = exports.ScreenReaderRows = {
+  ariaLabelAccessibleName: 'The **`aria-label`** attribute is used to provide an accessible name.',
+  eachLinkAriaLabel: 'Each Link component uses the **`aria-label`** attribute to provide an accessible name.',
+  ariaLiveAnnounce: 'The **`aria-live`** attribute is used to announce content changes in a live region.',
+  ariaOrientationWithTrailingSpace: 'The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous. ',
+  accordionAriaExpanded: 'The accordion header button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses.',
+  iconAriaHidden: 'The Icon uses the **`aria-hidden`** attribute to hide its content from assistive technology.',
+  triggerAriaExpandedExpandCollapse: 'The trigger button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses.',
+  ariaLabelledByInvalidFalse: 'This component uses the **`aria-labelledby`** attribute pointing to the label, and the **`aria-invalid`** attribute to detect incorrect values or status errors, which is set to "False" by default.',
+  ariaOrientationNoTrailingSpace: 'The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.',
+  componentAriaLabel: 'This component uses the **`aria-label`** attribute to provide an accessible name.'
+};

package/lib/components/AIComponents/PromptInput/PromptInputReadMe.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as PromptInputStories from './PromptInput.stories';
+import AccessibilityTable from '../../../utils/docUtils/AccessibilityTable';
 
 <Meta of={PromptInputStories} isTemplate />
 
@@ -38,21 +39,17 @@ The `PromptInput` component is used to capture user input in a conversational UI
 
 This component adheres to accessibility guidelines to ensure a better user experience for all users.
 
-#### Keyboard Navigation
-
-| Keys         | Function                                                                 |
-| ------------ | ----------------------------------------------------------------------- |
-| Tab          | Focuses on the next focusable element within the input.                 |
-| Shift + Tab  | Moves focus to the previous focusable element.                          |
-| Enter        | Submits the input when `onSubmit` is defined.                           |
-| Shift + Enter| Adds a new line to the input.                           |
-| Escape       | Cancels the input when `onCancel` is defined.                           |
-
-#### Screen Readers
-
-- **`aria-label`**: Describes the purpose of the input field.
-- **`aria-disabled`**: Indicates when the input is disabled.
-- **`aria-live`**: Announces changes to the input dynamically.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Focuses on the next focusable element within the input.' },
+  { key: 'Shift + Tab', description: 'Moves focus to the previous focusable element.' },
+  { key: 'Enter', description: 'Submits the input when `onSubmit` is defined.' },
+  { key: 'Shift + Enter', description: 'Adds a new line to the input.' },
+  { key: 'Escape', description: 'Cancels the input when `onCancel` is defined.' },
+]} screenReaderRows={[
+  '**`aria-label`**: Describes the purpose of the input field.',
+  '**`aria-disabled`**: Indicates when the input is disabled.',
+  '**`aria-live`**: Announces changes to the input dynamically.',
+]} />
 
 ### Example Usage
 

package/lib/components/AccordionGridGroup/AccordionGridGroup.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as AccordionGridGroupStories from './AccordionGridGroup.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={AccordionGridGroupStories} isTemplate />
 
@@ -20,22 +22,14 @@ This component requires the Header, Body and Item originating from [react-statel
 
 This component should adhere to the [WAI-ARIA Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion) accessibility guidelines.
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Space or Enter | When focus is on the header panel of a collapsed section, these keys toggle the component. |
-| Tab | Moves focus to the next focusable component. All focusable components in the accordion are included in the page tab sequence.|
-| Shift + Tab | Moves focus to the previous focusable component. All focusable components in the accordion are included in the page tab sequence. |
-| Arrow Keys | All components are accessible using arrow keys. |
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-
-- The accordion grid item header button uses the **`aria-selected`** attribute to indicate the selection state of the row.
-- The accordion header button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
-- The **`aria-multiselectable`** attribute indicates that the user can toggle numerous items from the grid. 
-- The grid uses the **`aria-label`** attribute to provide an accessible name.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'When focus is on the header panel of a collapsed section, these keys toggle the component.' },
+  KeyboardRows.tabAccordionFocusable,
+  KeyboardRows.shiftTabAccordionFocusPrevious,
+  { key: 'Arrow Keys', description: 'All components are accessible using arrow keys.' },
+]} screenReaderRows={[
+  'The accordion grid item header button uses the **`aria-selected`** attribute to indicate the selection state of the row.',
+  ScreenReaderRows.accordionAriaExpanded,
+  'The **`aria-multiselectable`** attribute indicates that the user can toggle numerous items from the grid.',
+  'The grid uses the **`aria-label`** attribute to provide an accessible name.',
+]} />

package/lib/components/AccordionGroup/AccordionGroup.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as AccordionGroupStories from './AccordionGroup.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={AccordionGroupStories} isTemplate />
 
@@ -27,24 +29,21 @@ This component requires Item originating from [react-stately/collections](https:
 
 This component should adhere to the [WAI-ARIA Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion) accessibility guidelines. 
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Space or Enter | When focus is on the accordion header of a collapsed section, these keys expand the section. |
-| Tab | Moves focus to the next focusable component. All focusable components in the accordion are included in the page tab sequence.|
-| Shift + Tab | Moves focus to the previous focusable component. All focusable components in the accordion are included in the page tab sequence. |
-
+<AccessibilityTable
+  keyboardRows={[
+    { key: 'Space or Enter', description: 'When focus is on the accordion header of a collapsed section, these keys expand the section.' },
+    KeyboardRows.tabAccordionFocusable,
+    KeyboardRows.shiftTabAccordionFocusPrevious,
+  ]}
+  screenReaderRows={[
+    ScreenReaderRows.accordionAriaExpanded,
+    'When expanded, the **`aria-controls`** attribute is added to the button pointing to the content. The button uses **`aria-label`** to provide an accessible name.',
+    'The **`aria-labelledby`** attribute is added to the entire accordion component, which is supplied with the button ID.',
+  ]}
+/>
+
+{/* Non-standard section: '#### Slots' documents prop usage, not an accessibility pattern. Flagged for future migration. */}
 #### Slots
 
 The slots prop has been provided for added flexibility. Use the **`postHeading`** slot to add helpHint or icon elements next to the heading
 section. Keep in mind that this component is best suited for specific designs necessitates its use.
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-- The accordion header button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
-- When expanded, the **`aria-controls`** attribute is added to the button pointing to the content. The button uses **`aria-label`** to provide an accessible name. 
-- The **`aria-labelledby`** attribute is added to the entire accordion component, which is supplied with the button ID.  

package/lib/components/ArrayField/ArrayField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as ArrayFieldStories from './ArrayField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={ArrayFieldStories} isTemplate />
 
@@ -18,18 +20,11 @@ This component requires the appropriate field component ([TextField](./?path=/st
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Keys | Functions |
-| ---- | ---- |
-| Space or Enter | When focused, selects the item. |
-| Tab | Moves focus to the next focusable component and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The input uses the **`aria-invalid`** attribute to alert users that the values entered are not in the expected format.
-- The field and buttons use the **`aria-label`** attribute to provide accessible names.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'When focused, selects the item.' },
+  KeyboardRows.tabNextFocusableComponent,
+  KeyboardRows.shiftTabFocusPrevious,
+]} screenReaderRows={[
+  'The input uses the **`aria-invalid`** attribute to alert users that the values entered are not in the expected format.',
+  'The field and buttons use the **`aria-label`** attribute to provide accessible names.',
+]} />

package/lib/components/Badge/Badge.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as BadgeStories from './Badge.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={BadgeStories} isTemplate />
 
@@ -15,11 +17,7 @@ This component can be used independently, and does not require additional compon
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-Badge itself is not focusable. However, when components are added to it, these keys provide additional functionality.
-
-| Keys | Functions |
-| ---- | --------- |
-| Space or Enter | Selects the component. |
-| Tab | Focuses the component and follows the page tab sequence. |
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.spaceEnterSelectsComponentSimple,
+  KeyboardRows.tabFocusesComponent,
+]} keyboardDescription="Badge itself is not focusable. However, when components are added to it, these keys provide additional functionality." />