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

package/lib/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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." />

package/lib/cjs/components/Badge/Badge.styles.d.ts

@@ -963,5 +963,157 @@ declare const _default: {
             };
         };
     };
+    tableBaseBadge: {
+        active: {
+            borderColor: string;
+            backgroundColor: string;
+            border: string;
+            '& span': {
+                color: string;
+            };
+            cursor: string;
+            p: string;
+            alignItems: string;
+            justifyContent: string;
+            minWidth: string;
+            alignSelf: string;
+            display: string;
+            borderRadius: string;
+            fontWeight: number;
+            '& button': {
+                backgroundColor: string;
+                marginLeft: string;
+                marginTop: string;
+                padding: string;
+                '&.is-hovered': {
+                    backgroundColor: string;
+                };
+                '& .mdi-icon': {
+                    marginLeft: string;
+                    padding: string;
+                };
+            };
+        };
+        warning: {
+            borderColor: string;
+            backgroundColor: string;
+            border: string;
+            '& span': {
+                color: string;
+            };
+            cursor: string;
+            p: string;
+            alignItems: string;
+            justifyContent: string;
+            minWidth: string;
+            alignSelf: string;
+            display: string;
+            borderRadius: string;
+            fontWeight: number;
+            '& button': {
+                backgroundColor: string;
+                marginLeft: string;
+                marginTop: string;
+                padding: string;
+                '&.is-hovered': {
+                    backgroundColor: string;
+                };
+                '& .mdi-icon': {
+                    marginLeft: string;
+                    padding: string;
+                };
+            };
+        };
+        critical: {
+            borderColor: string;
+            backgroundColor: string;
+            border: string;
+            '& span': {
+                color: string;
+            };
+            cursor: string;
+            p: string;
+            alignItems: string;
+            justifyContent: string;
+            minWidth: string;
+            alignSelf: string;
+            display: string;
+            borderRadius: string;
+            fontWeight: number;
+            '& button': {
+                backgroundColor: string;
+                marginLeft: string;
+                marginTop: string;
+                padding: string;
+                '&.is-hovered': {
+                    backgroundColor: string;
+                };
+                '& .mdi-icon': {
+                    marginLeft: string;
+                    padding: string;
+                };
+            };
+        };
+        healthy: {
+            borderColor: string;
+            backgroundColor: string;
+            border: string;
+            '& span': {
+                color: string;
+            };
+            cursor: string;
+            p: string;
+            alignItems: string;
+            justifyContent: string;
+            minWidth: string;
+            alignSelf: string;
+            display: string;
+            borderRadius: string;
+            fontWeight: number;
+            '& button': {
+                backgroundColor: string;
+                marginLeft: string;
+                marginTop: string;
+                padding: string;
+                '&.is-hovered': {
+                    backgroundColor: string;
+                };
+                '& .mdi-icon': {
+                    marginLeft: string;
+                    padding: string;
+                };
+            };
+        };
+        secondary: {
+            borderColor: string;
+            backgroundColor: string;
+            border: string;
+            '& span': {
+                color: string;
+            };
+            cursor: string;
+            p: string;
+            alignItems: string;
+            justifyContent: string;
+            minWidth: string;
+            alignSelf: string;
+            display: string;
+            borderRadius: string;
+            fontWeight: number;
+            '& button': {
+                backgroundColor: string;
+                marginLeft: string;
+                marginTop: string;
+                padding: string;
+                '&.is-hovered': {
+                    backgroundColor: string;
+                };
+                '& .mdi-icon': {
+                    marginLeft: string;
+                    padding: string;
+                };
+            };
+        };
+    };
 };
 export default _default;

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

@@ -265,6 +265,13 @@ var dataTable = {
     borderColor: 'success.dark'
   })
 };
+var tableBaseBadge = {
+  active: _objectSpread({}, infoCalloutBadge),
+  warning: _objectSpread({}, warningStatusBadge),
+  critical: _objectSpread({}, criticalStatusBadge),
+  healthy: _objectSpread({}, healthyStatusBadge),
+  secondary: _objectSpread({}, secondaryStatusBadge)
+};
 var _default = exports["default"] = {
   activeStatusBadge: activeStatusBadge,
   badgeDeleteButton: badgeDeleteButton,
@@ -291,5 +298,6 @@ var _default = exports["default"] = {
   secondaryStatusBadge: secondaryStatusBadge,
   removableBadge: removableBadge,
   invertedRemovableBadge: invertedRemovableBadge,
-  dataTable: dataTable
+  dataTable: dataTable,
+  tableBaseBadge: tableBaseBadge
 };

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