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

package/lib/components/Badge/Badge.styles.js

@@ -258,6 +258,13 @@ var dataTable = {
     borderColor: 'success.dark'
   })
 };
+var tableBaseBadge = {
+  active: _objectSpread({}, infoCalloutBadge),
+  warning: _objectSpread({}, warningStatusBadge),
+  critical: _objectSpread({}, criticalStatusBadge),
+  healthy: _objectSpread({}, healthyStatusBadge),
+  secondary: _objectSpread({}, secondaryStatusBadge)
+};
 export default {
   activeStatusBadge: activeStatusBadge,
   badgeDeleteButton: badgeDeleteButton,
@@ -284,5 +291,6 @@ export default {
   secondaryStatusBadge: secondaryStatusBadge,
   removableBadge: removableBadge,
   invertedRemovableBadge: invertedRemovableBadge,
-  dataTable: dataTable
+  dataTable: dataTable,
+  tableBaseBadge: tableBaseBadge
 };

package/lib/components/Breadcrumbs/Breadcrumbs.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as BreadcrumbsStories from './Breadcrumbs.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={BreadcrumbsStories} isTemplate />
 
@@ -22,20 +24,12 @@ This component requires Item originating from [react-stately/collections](https:
 
 This component should adhere to the [WAI-ARIA Breadcrumbs](https://www.w3.org/WAI/ARIA/apg/example-index/breadcrumb/index.html) accessibility guidelines. 
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Space or Enter | Selects the item and navigates to the associated location. |
-| 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 Breadcrumbs and BreadcrumbItems components use the **`aria-label`** attribute to provide an accessible name.
-- The Icon component uses the **`aria-hidden`** attribute to hide its content from assistive technology.
-- The last BreadcrumbItem component uses the **`aria-current`** attribute to indicate that the user is currently viewing that page.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Selects the item and navigates to the associated location.' },
+  KeyboardRows.tabNextFocusableComponent,
+  KeyboardRows.shiftTabFocusPrevious,
+]} screenReaderRows={[
+  'The Breadcrumbs and BreadcrumbItems components use the **`aria-label`** attribute to provide an accessible name.',
+  'The Icon component uses the **`aria-hidden`** attribute to hide its content from assistive technology.',
+  'The last BreadcrumbItem component uses the **`aria-current`** attribute to indicate that the user is currently viewing that page.',
+]} />

package/lib/components/Button/Button.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as ButtonStories from './Button.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={ButtonStories} isTemplate />
 
@@ -26,16 +28,10 @@ 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. |
-
-#### Screen readers.
-
-This component uses the **`aria-label`** attribute to provide an accessible name.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.spaceEnterSelectsButton,
+  KeyboardRows.tabFocusesButton,
+]} screenReaderRows={[
+  ScreenReaderRows.componentAriaLabel,
+]} />
 

package/lib/components/Calendar/Calendar.mdx

@@ -1,4 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta title="Components/Calendar/Calendar" />
 
@@ -15,25 +17,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 date 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. |
-| Pressing End:(Fn + left Arrow Key) Or Control or Command + End | Shifts the focus to the last calendar date. |
-| Arrow key | Navigates up, down, right, and left across the calendar. |
-| Page up | Changes the grid of dates to the previous month. |
-| Page down | Changes the grid of dates to the next month. |
-| Shift + page up | Changes the grid of dates to the same month in the previous year. |
-| Shift+ page down | Changes the grid of dates to the same month 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” when a date is selected, and **`aria-disabled`** is set to “false” by default.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Selects the date when a date is focused, and navigates to the calendar pages when the navigational buttons are focused.' },
+  KeyboardRows.tabCalendar,
+  KeyboardRows.shiftTabFocusPrevious,
+  KeyboardRows.homeFirstCalendarDate,
+  { key: 'Pressing End:(Fn + left Arrow Key) Or Control or Command + End', description: 'Shifts the focus to the last calendar date.' },
+  { key: 'Arrow key', description: 'Navigates up, down, right, and left across the calendar.' },
+  KeyboardRows.pageUpPreviousMonth,
+  KeyboardRows.pageDownNextMonth,
+  KeyboardRows.shiftPageUpPreviousYear,
+  KeyboardRows.shiftPageDownNextYear,
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelAccessibleName,
+  'In each data cell, the **`aria-selected`** attribute is set to “true” when a date is selected, and **`aria-disabled`** is set to “false” by default.',
+]} />

package/lib/components/Callout/Callout.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as CalloutStories from './Callout.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={CalloutStories} isTemplate />
 
@@ -14,16 +16,9 @@ This component requires the [Text](./?path=/docs/components-text--default) compo
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-The callout itself is not focusable but the components within it are. 
-These keys provide additional functionality to the component.
-
-| Keys | Functions |
-| ---- | --------- |
-| Space or Enter | Selects the component within. |
-| Tab | Focuses the component within and follows the page tab sequence. |
-
-#### Screen readers
-
-This component uses the **`aria-label`** attribute to provide an accessible name.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Selects the component within.' },
+  { key: 'Tab', description: 'Focuses the component within and follows the page tab sequence.' },
+]} screenReaderRows={[
+  ScreenReaderRows.componentAriaLabel,
+]} keyboardDescription="The callout itself is not focusable but the components within it are. These keys provide additional functionality to the component." />

package/lib/components/Card/Card.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as CardStories from './Card.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={CardStories} isTemplate />
 
@@ -23,14 +25,10 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the Interactive Card components.
-
-| Keys | Functions |
-| ---- | --------- |
-| Space or Enter | Selects the button. |
-| Tab | Focuses the button and follows the page tab sequence.|
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.spaceEnterSelectsButton,
+  KeyboardRows.tabFocusesButton,
+]} keyboardDescription="These keys provide additional functionality to the Interactive Card components." />
 
 ### Note
 

package/lib/components/CheckboxField/CheckboxField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as CheckboxFieldStories from './CheckboxField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={CheckboxFieldStories} isTemplate />
 
@@ -25,19 +27,12 @@ This component can be used independently and does not require additional compone
 
 This component should adhere to the [WAI-ARIA Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) accessibility guidelines.
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Keys | Functions |
-| ---- | ---- |
-| Space | When focused, toggles the check box on and off. |
-| 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 **`aria-checked`** attribute is used to indicate the current checked status.
-- The **`aria-labelledby`** attribute is provided with the label ID to reference it.
-- The **`aria-hidden`** attribute is used to hide its content from assistive technology.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space', description: 'When focused, toggles the check box on and off.' },
+  KeyboardRows.tabNextFocusableComponent,
+  KeyboardRows.shiftTabFocusPrevious,
+]} screenReaderRows={[
+  'The **`aria-checked`** attribute is used to indicate the current checked status.',
+  'The **`aria-labelledby`** attribute is provided with the label ID to reference it.',
+  'The **`aria-hidden`** attribute is used to hide its content from assistive technology.',
+]} />

package/lib/components/CodeEditor/CodeEditor.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as CodeEditorStories from './CodeEditor.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={CodeEditorStories} isTemplate />
 
@@ -21,16 +23,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 |
-| ---- | --------- |
-| Enter | Inserts a new line of code |
-| Arrow keys | Move the cursor within the code in the set direction |
-
-#### Screen Readers
-
-The **`aria-live`** attribute is used to announce content changes in a live region.
-
+<AccessibilityTable keyboardRows={[
+  { key: 'Enter', description: 'Inserts a new line of code' },
+  { key: 'Arrow keys', description: 'Move the cursor within the code in the set direction' },
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLiveAnnounce,
+]} />

package/lib/components/CodeView/CodeView.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as CodeViewStories from './CodeView.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={CodeViewStories} isTemplate />
 
@@ -17,11 +18,7 @@ This component requires the [Text](./?path=/docs/components-text--default) compo
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Space or Enter | Selects the CopyButton inside the CodeView component. |
-| Tab | Focuses the CopyButton inside the CodeView component. |
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Selects the CopyButton inside the CodeView component.' },
+  { key: 'Tab', description: 'Focuses the CopyButton inside the CodeView component.' },
+]} />

package/lib/components/CollapsiblePanel/CollapsiblePanel.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as CollapsiblePanelStories from './CollapsiblePanel.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={CollapsiblePanelStories} isTemplate />
 
@@ -13,18 +15,13 @@ 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 | Expands or collapses the content when the trigger is focused. |
-| Tab | Focuses the trigger button and the panel content. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Esc | Pressing the escape key closes the panel when it is expanded. |
-
-#### Screen Readers
-This component uses the **`aria-rowcount`** and **`aria-columncount`** attributes to indicate the total number of rows and columns in the grid structure.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Expands or collapses the content when the trigger is focused.' },
+  { key: 'Tab', description: 'Focuses the trigger button and the panel content.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Esc', description: 'Pressing the escape key closes the panel when it is expanded.' },
+]} screenReaderRows={[
+  'This component uses the **`aria-rowcount`** and **`aria-columncount`** attributes to indicate the total number of rows and columns in the grid structure.',
+]} />
 
 

package/lib/components/ColorField/ColorField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as ColorFieldStories from './ColorField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={ColorFieldStories} isTemplate />
 
@@ -20,21 +22,14 @@ react-aria [OverlayProvider](https://react-spectrum.adobe.com/react-aria/useOver
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Keys | Functions |
-| ---- | ---- |
-| Tab |Focuses the color swatch and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Space or Enter | Opens the color swatch when it is focused. Once opened, the focus moves to the input field and is locked inside the ColorPicker Overlay. |
-| Esc | When the picker is open, pressing the escape key closes the overlay and focuses on the previously focused component. |
-| Up and Down Arrows | Using the up and down arrows on any of the RGBA inputs adjusts the value of the input in focus.
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of Sketch Picker.
-- When expanded, **`aria-controls`** is added to the button pointing to the Sketch Picker.
-- The visibly hidden input uses the **`aria-labelledby`** attribute supplied with label ID.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Focuses the color swatch and follows the page tab sequence.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Space or Enter', description: 'Opens the color swatch when it is focused. Once opened, the focus moves to the input field and is locked inside the ColorPicker Overlay.' },
+  { key: 'Esc', description: 'When the picker is open, pressing the escape key closes the overlay and focuses on the previously focused component.' },
+  { key: 'Up and Down Arrows', description: 'Using the up and down arrows on any of the RGBA inputs adjusts the value of the input in focus.' },
+]} screenReaderRows={[
+  'The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of Sketch Picker.',
+  'When expanded, **`aria-controls`** is added to the button pointing to the Sketch Picker.',
+  'The visibly hidden input uses the **`aria-labelledby`** attribute supplied with label ID.',
+]} />

package/lib/components/ComboBoxField/ComboBoxField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as ComboBoxFieldStories from './ComboBoxField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={ComboBoxFieldStories} isTemplate />
 
@@ -27,21 +29,17 @@ exported from Astro and Item originating from [react-stately/collections](https:
 
 This component should adhere to the [WAI-ARIA ComboBox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) accessibility guidelines.
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | ---- |
-| Tab | Focuses the field and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Space or Enter | Selects the component when it is focused. |
-| Down arrow | Opens the popover if it isn’t already open.  |
-| Up and down arrows | Can be used to move through the selection in the popover. |
-| 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 overlay and adds focus to the previously focused component. |
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabFocusesField,
+  KeyboardRows.shiftTabFocusPrevious,
+  KeyboardRows.spaceEnterSelectsComponent,
+  { key: 'Down arrow', description: "Opens the popover if it isn’t already open." },
+  { key: 'Up and down arrows', description: 'Can be used to move through the selection in the popover.' },
+  KeyboardRows.typingOpenPopover,
+  KeyboardRows.homeFirstListboxItem,
+  KeyboardRows.endLastListboxItem,
+  { key: 'Esc', description: 'Pressing the escape key closes the overlay and adds focus to the previously focused component.' }
+]} />
 
 #### Screen Readers
 This component uses the following attributes to assist screen readers:

package/lib/components/CopyText/CopyText.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as CopyTextStories from './CopyText.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={CopyTextStories} isTemplate />
 
@@ -14,11 +16,7 @@ This component requires the [Text](./?path=/docs/components-text--default) compo
 
 ### Accessibility
 
-#### 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/components/DataTable/DataTable.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as DataTableStories from './DataTable.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={DataTableStories} isTemplate />
 
@@ -30,26 +32,19 @@ This component requires these additional React Spectrum components:
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | Moves focus to the next focusable component. All focusable components in the table are included in the page tab sequence. | 
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Space or Enter  | Focuses the component and triggers an action if one is associated with it. |
-| Arrow keys | Can be used to navigate between the components in the table. |
-| Focus on a row and scroll down | Shifts the focus to the entire table, not the previously focused row. |
-| Home or page up | Shifts the focus to the first row. |
-| End or page down | Shifts the focus to the last visible row. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The **`aria-label`** attribute is used to provide an accessible name.
-- The **`aria-rowcount`** and **`aria-columncount`** attributes are used to indicate the total number of rows and columns in the grid structure. 
-- The DataTableHeader uses the **`aria-rowindex`** attribute and DataTableColumn uses the **`aria-colindex`** attribute to enumerate the header row and columns. 
-- In the body component, the DataTableRow uses the **`aria-labelledby`** attribute and the grid ID to identify the component and the **`aria-rowindex`** attribute is passed to each row.
-- Each DataTableCell uses the **`aria-colindex`** attribute to enumerate the columns within each row.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Moves focus to the next focusable component. All focusable components in the table are included in the page tab sequence.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Space or Enter', description: 'Focuses the component and triggers an action if one is associated with it.' },
+  { key: 'Arrow keys', description: 'Can be used to navigate between the components in the table.' },
+  { key: 'Focus on a row and scroll down', description: 'Shifts the focus to the entire table, not the previously focused row.' },
+  { key: 'Home or page up', description: 'Shifts the focus to the first row.' },
+  { key: 'End or page down', description: 'Shifts the focus to the last visible row.' },
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelAccessibleName,
+  'The **`aria-rowcount`** and **`aria-columncount`** attributes are used to indicate the total number of rows and columns in the grid structure.',
+  'The DataTableHeader uses the **`aria-rowindex`** attribute and DataTableColumn uses the **`aria-colindex`** attribute to enumerate the header row and columns.',
+  'In the body component, the DataTableRow uses the **`aria-labelledby`** attribute and the grid ID to identify the component and the **`aria-rowindex`** attribute is passed to each row.',
+  'Each DataTableCell uses the **`aria-colindex`** attribute to enumerate the columns within each row.',
+]} />
 

package/lib/components/DatePicker/DatePicker.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as DatePickerStories from './DatePicker.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={DatePickerStories} isTemplate />
 
@@ -21,30 +23,21 @@ This component can be used independently and does not require additional compone
 
 This component should adhere to the [WAI-ARIA DatePicker](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) accessibility guidelines.
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Keys | Functions |
-| ---- | --------- |
-| Space or Enter | Opens the popover when the trigger is focused, selects the date when a date is focused, and navigates to the calendar pages when the navigational buttons are focused. |
-| Tab | Focuses the field and follows 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. |
-| Pressing Home:(Fn + left Arrow Key) Or Control or Command + End | Shifts the focus to the last calendar date. |
-| Up and down Arrow keys | When segments are focused, it increments and decrements dates starting from the present day. |
-| Left and right arrows | Moves focus between segments. |
-| Page up | Changes the grid of dates to the previous month. |
-| Page down | Changes the grid of dates to the next month. |
-| Shift + page up | Changes the grid of dates to the same month in the previous year. |
-| Shift+ page down | Changes the grid of dates to the same month in the next year. |
-| Esc | Closes the overlay and shifts focus to the trigger. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-
-- The hidden input, DateField, and all three spin buttons have an **`aria-labelledby`** attribute pointing to the label ID, along with the **`aria-label`** attribute for an accessible name.
-- Each spin button has the **`aria-valuenow`** attribute that defines the current value and it is always used with its text alternative, **`aria-valuetext`**. 
-The spin buttons also have the **`aria-valuemin`** and **`aria-valuemax`** attributes to specify the minimum and maximum values allowed for a range widget.
-- The **`aria-selected`** attribute is added to the grid cell when a date is selected, and **`aria-disabled`** is set to “false” by default.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Opens the popover when the trigger is focused, selects the date when a date is focused, and navigates to the calendar pages when the navigational buttons are focused.' },
+  KeyboardRows.tabFocusesField,
+  KeyboardRows.shiftTabFocusPrevious,
+  KeyboardRows.homeFirstCalendarDate,
+  { key: 'Pressing Home:(Fn + left Arrow Key) Or Control or Command + End', description: 'Shifts the focus to the last calendar date.' },
+  { key: 'Up and down Arrow keys', description: 'When segments are focused, it increments and decrements dates starting from the present day.' },
+  { key: 'Left and right arrows', description: 'Moves focus between segments.' },
+  KeyboardRows.pageUpPreviousMonth,
+  KeyboardRows.pageDownNextMonth,
+  KeyboardRows.shiftPageUpPreviousYear,
+  KeyboardRows.shiftPageDownNextYear,
+  { key: 'Esc', description: 'Closes the overlay and shifts focus to the trigger.' },
+]} screenReaderRows={[
+  'The hidden input, DateField, and all three spin buttons have an **`aria-labelledby`** attribute pointing to the label ID, along with the **`aria-label`** attribute for an accessible name.',
+  'Each spin button has the **`aria-valuenow`** attribute that defines the current value and it is always used with its text alternative, **`aria-valuetext`**. The spin buttons also have the **`aria-valuemin`** and **`aria-valuemax`** attributes to specify the minimum and maximum values allowed for a range widget.',
+  'The **`aria-selected`** attribute is added to the grid cell when a date is selected, and **`aria-disabled`** is set to “false” by default.',
+]} />

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as EnvironmentBreadcrumbStories from './EnvironmentBreadcrumb.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={EnvironmentBreadcrumbStories} isTemplate />
 
@@ -16,22 +18,15 @@ Item from [react-stately/collections](https://react-spectrum.adobe.com/react-sta
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Space or Enter  | Selects the breadcrumb item. |
-| Tab | Focuses the breadcrumb item and follows the page tab sequence. | 
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Arrow keys | Can be used to navigate between the items in the dropdown list. |
-| Esc | Closes the popover when it is expanded. |
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-- Each breadcrumb item uses an **`aria-label`** attribute to provide an accessible name.
-- The trigger button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
-- When expanded, **`aria-controls`** is added to the button pointing to the pop-up content.
-- The **`aria-haspopup`** attribute describes the type of content presented.
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'Selects the breadcrumb item.' },
+  { key: 'Tab', description: 'Focuses the breadcrumb item and follows the page tab sequence.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Arrow keys', description: 'Can be used to navigate between the items in the dropdown list.' },
+  { key: 'Esc', description: 'Closes the popover when it is expanded.' },
+]} screenReaderRows={[
+  'Each breadcrumb item uses an **`aria-label`** attribute to provide an accessible name.',
+  ScreenReaderRows.triggerAriaExpandedExpandCollapse,
+  'When expanded, **`aria-controls`** is added to the button pointing to the pop-up content.',
+  'The **`aria-haspopup`** attribute describes the type of content presented.',
+]} />