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

package/lib/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/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/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/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/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/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/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/components/Tabs/Tabs.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TabsStories from './Tabs.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={TabsStories} isTemplate />
 
@@ -21,21 +23,14 @@ This component requires the Tab component.
 
 This component should adhere to the [WAI-ARIA Tabs](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 a tab is focused, tabs can be navigated using the left and right arrow keys. |
-| Shift + Tab | Moves focus to the previous focusable component.  |
-| Home(Fn + Right Arrow Key) Or Control/Command + Home| Shifts the focus to the first tab. |
-| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last tab. |
-
-#### 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 tab 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 tab uses the **`aria-labelledby`** with the label ID to reference it.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  { key: 'Arrow keys', description: 'When a tab is focused, tabs can be navigated using the left and right arrow keys.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Home(Fn + Right Arrow Key) Or Control/Command + Home', description: 'Shifts the focus to the first tab.' },
+  { key: 'End(Fn + Left Arrow Key) Or Control/Command + End', description: 'Shifts the focus to the last tab.' },
+]} screenReaderRows={[
+  ScreenReaderRows.ariaOrientationWithTrailingSpace,
+  'Each tab 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 tab uses the **`aria-labelledby`** with the label ID to reference it.',
+]} />

package/lib/components/TextAreaField/TextAreaField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TextAreaFieldStories from './TextAreaField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={TextAreaFieldStories} isTemplate />
 
@@ -21,15 +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 |
-| ---- | --------- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-
-#### Screen readers
-
-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.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelledByInvalidFalse,
+]} />

package/lib/components/TextField/TextField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TextFieldStories from './TextField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={TextFieldStories} isTemplate />
 
@@ -21,15 +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 |
-| ---- | --------- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-
-#### Screen readers
-
-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.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelledByInvalidFalse,
+]} />

package/lib/components/TimeField/TimeField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TimeFieldStories from './TimeField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={TimeFieldStories} isTemplate />
 
@@ -16,21 +18,13 @@ and [useTimeFieldState](https://react-spectrum.adobe.com/react-stately/useTimeFi
 
 This component can be used independently and does not require additional components. 
 
-#### 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. |
-| Up and down Arrow keys | When segments are focused, it increments and decrements time values |
-| Left and right arrows | Moves focus between segments. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-
-- The **`aria-label`** attribute is used to provide an accessible name.
-- The hidden input, TimeField, and all 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 an **`aria-valuenow`**, **`aria-valuemin`**, and **`aria-valuemax`** to represent the current value, minimum allowed value, and maximum allowed value.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabFocusesField,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Up and down Arrow keys', description: 'When segments are focused, it increments and decrements time values.' },
+  { key: 'Left and right arrows', description: 'Moves focus between segments.' },
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelAccessibleName,
+  'The hidden input, TimeField, and all 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 an **`aria-valuenow`**, **`aria-valuemin`**, and **`aria-valuemax`** to represent the current value, minimum allowed value, and maximum allowed value.',
+]} />

package/lib/components/TooltipTrigger/TooltipTrigger.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TooltipTriggerStories from './TooltipTrigger.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={TooltipTriggerStories} isTemplate />
 
@@ -19,6 +20,6 @@ This component requires the [Button](./?path=/docs/components-button--default) a
 
 ### Accessibility
 
-#### Screen Readers
-
-The trigger button uses the **`aria-describedby`** attribute with the tooltip container ID to announce the screen reader content when it becomes visible.
+<AccessibilityTable screenReaderRows={[
+  'The trigger button uses the **`aria-describedby`** attribute with the tooltip container ID to announce the screen reader content when it becomes visible.',
+]} />

package/lib/types/accessibilityTable.js

@@ -0,0 +1 @@
+export {};

package/lib/types/index.js

@@ -1,3 +1,4 @@
+export * from './accessibilityTable';
 export * from './arrayField';
 export * from './avatar';
 export * from './badge';

package/lib/utils/docUtils/AccessibilityTable.js

@@ -0,0 +1,30 @@
+import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import Markdown from 'markdown-to-jsx';
+import { v4 as uuid } from 'uuid';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var AccessibilityTable = function AccessibilityTable(_ref) {
+  var keyboardRows = _ref.keyboardRows,
+    keyboardDescription = _ref.keyboardDescription,
+    screenReaderRows = _ref.screenReaderRows;
+  var hasKeyboard = _Array$isArray(keyboardRows) && keyboardRows.length > 0;
+  var hasScreenReader = _Array$isArray(screenReaderRows) && screenReaderRows.length > 0;
+  if (!hasKeyboard && !hasScreenReader) {
+    return null;
+  }
+  return ___EmotionJSX(React.Fragment, null, hasKeyboard && ___EmotionJSX(React.Fragment, null, ___EmotionJSX("h4", null, "Keyboard Navigation"), ___EmotionJSX("p", null, keyboardDescription || 'These keys provide additional functionality to the component.'), ___EmotionJSX("table", null, ___EmotionJSX("thead", null, ___EmotionJSX("tr", null, ___EmotionJSX("th", null, "Key"), ___EmotionJSX("th", null, "Function"))), ___EmotionJSX("tbody", null, _mapInstanceProperty(keyboardRows).call(keyboardRows, function (row) {
+    return ___EmotionJSX("tr", {
+      key: row.key + uuid()
+    }, ___EmotionJSX("td", null, ___EmotionJSX("span", null, row.key)), ___EmotionJSX("td", null, ___EmotionJSX(Markdown, {
+      options: {
+        forceInline: true
+      }
+    }, row.description)));
+  })))), hasScreenReader && ___EmotionJSX(React.Fragment, null, ___EmotionJSX("h4", null, "Screen Readers"), ___EmotionJSX("p", null, "This component uses the following attributes to assist screen readers:"), ___EmotionJSX("ul", null, _mapInstanceProperty(screenReaderRows).call(screenReaderRows, function (item) {
+    return ___EmotionJSX("li", {
+      key: item + uuid()
+    }, ___EmotionJSX(Markdown, null, item));
+  }))));
+};
+export default AccessibilityTable;

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

@@ -0,0 +1,190 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { universalComponentTests } from '../testUtils/universalComponentTest';
+import AccessibilityTable from './AccessibilityTable';
+
+// Needs to be added to each component test file
+import { jsx as ___EmotionJSX } from "@emotion/react";
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(AccessibilityTable, _extends({
+      keyboardRows: [{
+        key: 'Tab',
+        description: 'Focus next element'
+      }]
+    }, props));
+  },
+  skipForwardRefTest: true
+});
+test('renders nothing when both keyboardRows and screenReaderRows are absent', function () {
+  var _render = render(___EmotionJSX(AccessibilityTable, null)),
+    container = _render.container;
+  expect(container).toBeEmptyDOMElement();
+});
+test('renders nothing when both props are provided as empty arrays', function () {
+  var _render2 = render(___EmotionJSX(AccessibilityTable, {
+      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 () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(screen.getByText('Keyboard Navigation')).toBeInTheDocument();
+  });
+  test('renders the keyboard section description paragraph', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(screen.getByText('These keys provide additional functionality to the component.')).toBeInTheDocument();
+  });
+  test('renders Key and Function column headers', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(screen.getByText('Key')).toBeInTheDocument();
+    expect(screen.getByText('Function')).toBeInTheDocument();
+  });
+  test('renders one row per keyboardRows entry', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    var rows = 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 () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(screen.getByText('Tab')).toBeInTheDocument();
+    expect(screen.getByText('Shift+Tab')).toBeInTheDocument();
+  });
+  test('does not render the Screen Readers section', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(screen.queryByText('Screen Readers')).not.toBeInTheDocument();
+  });
+  test('renders a custom keyboardDescription when the prop is provided', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows,
+      keyboardDescription: "Custom keyboard description for this component."
+    }));
+    expect(screen.getByText('Custom keyboard description for this component.')).toBeInTheDocument();
+  });
+  test('does not render a custom keyboardDescription when the prop is omitted', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(screen.queryByText('Custom keyboard description for this component.')).not.toBeInTheDocument();
+  });
+  test('falls back to the default description when keyboardDescription is an empty string', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows,
+      keyboardDescription: ""
+    }));
+    expect(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 () {
+    render(___EmotionJSX(AccessibilityTable, {
+      screenReaderRows: screenReaderRows
+    }));
+    expect(screen.getByText('Screen Readers')).toBeInTheDocument();
+  });
+  test('renders the screen reader section description paragraph', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      screenReaderRows: screenReaderRows
+    }));
+    expect(screen.getByText('This component uses the following attributes to assist screen readers:')).toBeInTheDocument();
+  });
+  test('renders a list with one item per screenReaderRows entry', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      screenReaderRows: screenReaderRows
+    }));
+    var items = screen.getAllByRole('listitem');
+    expect(items).toHaveLength(screenReaderRows.length);
+  });
+  test('renders text content for each screen reader row item', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      screenReaderRows: screenReaderRows
+    }));
+    expect(screen.getByText('aria-label')).toBeInTheDocument();
+    expect(screen.getByText('aria-expanded')).toBeInTheDocument();
+  });
+  test('does not render the Keyboard Navigation section', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      screenReaderRows: screenReaderRows
+    }));
+    expect(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 () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows,
+      screenReaderRows: screenReaderRows
+    }));
+    expect(screen.getByText('Keyboard Navigation')).toBeInTheDocument();
+    expect(screen.getByText('Screen Readers')).toBeInTheDocument();
+  });
+  test('renders both the table and the list', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows,
+      screenReaderRows: screenReaderRows
+    }));
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(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'
+    }];
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    var strongEl = 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'
+    }];
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(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'];
+    render(___EmotionJSX(AccessibilityTable, {
+      screenReaderRows: screenReaderRows
+    }));
+    var strongEl = screen.getByText('aria-label');
+    expect(strongEl.tagName).toBe('STRONG');
+  });
+});