@pingux/astro 2.9.1 → 2.13.0-alpha.3

package/lib/components/ImageUploadField/ImageUploadField.mdx

@@ -0,0 +1,38 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ImageUploadField/ImageUploadField" />
+
+# ImageUploadField
+
+The ImageUploadField component is a variation of the [FileInputField](./?path=/docs/form-fileinputfield--default) used for uploading images. 
+
+### Required components
+
+This component requires the OverlayProvider component. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | Focuses the field and follows the page tab sequence. |
+| Space or Enter | When the trigger is focused, the file browser opens. When the menu item is focused, it triggers an action. |
+| Down arrow | After uploading, pressing the Down arrow with a focused trigger opens the popover menu. |
+| Arrow keys | Can be used to move the selection in the popover. |
+| Shift + Tab | Moves focus to the previous focusable component.|
+| 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 trigger. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+
+- The input uses the **`aria-labelledby`** attribute to reference the label.
+- The trigger button uses the **`aria-label`** attribute to provide an accessible name.
+- The **`aria-expanded`** attribute is used to indicate the expansion or collapse of the popover.
+- The **`aria-haspopup`** attribute indicates the type of popup content as a menu. Once expanded, **`aria-controls`** is added to the button pointing to the popover. 
+- The menu uses vertical **`aria-orientation`** by default, and each menu item has a “False” **`aria-disabled`** value. 

package/lib/components/Link/Link.mdx

@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Link/Link" />
+
+# Link
+
+This basic link component is built on [Link from Theme-UI](https://theme-ui.com/components/link) and [useLink](https://react-spectrum.adobe.com/react-aria/useLink.html) from React Aria.
+
+Links should:
+- Have the same font size as surrounding text when used inline.
+- Be considerate of the screen reader. Write descriptive link text and alternate text.
+
+Link shouldn’t be used in titles, and preferably used within the body text.
+
+### Required Components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+This component adheres to [WAI-ARIA Link](https://www.w3.org/WAI/ARIA/apg/patterns/link/) accessibility guidelines.
+
+#### Keyboard Navigation
+
+| Key | Functions |
+| ---- | ---- |
+| Space or Enter | Selects the link. |
+| Tab | Focuses the link and follows the page tab sequence. |

package/lib/components/LinkSelectField/LinkSelectField.mdx

@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/LinkSelectField/LinkSelectField" />
+
+# LinkSelectField
+
+The LinkSelectField component collects information from a dropdown menu of options using [useSelect](https://react-spectrum.adobe.com/react-aria/useSelect.html) from React Aria and 
+[useSelectState](https://react-spectrum.adobe.com/react-stately/useSelectState.html) from React Stately. 
+It does not rely on native browser or mobile implementations.
+
+This component should be used to limit the options available to users. 
+It should not be used:
+- When there are fewer than 3 options for the user to choose from: 
+  - Use the [RadioGroupField](./?path=/docs/form-radiogroupfield--default) if users must choose 1 option. 
+  - Use the [CheckBoxField](./?path=/docs/form-checkboxfield--default) if users can choose more than 1 option. 
+- If the exact input value is important to specify, use the [TextField](./?path=/docs/form-textfield--default).
+
+### Required components
+
+This component requires the OverlayProvider and Item originating from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html). 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | Focuses the field and follows the page tab sequence. |
+| Space or Enter | When the trigger is focused, the menu opens or closes. When the menu item is focused, it selects the listbox option. |
+| Arrow keys | Can be used to move the selection in the listbox. |
+| Shift + Tab | Moves focus to the previous focusable component.|
+| 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 previously focused component.|
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+
+- The trigger button uses the **`aria-expanded`** attribute to indicate the expansion or collapse of the popover menu, the  **`aria-label`** attribute to provide an accessible name, and the  **`aria-labelledby`** attribute to reference the label.
+- The **`aria-haspopup`** attribute indicates the type of popup content as a listbox.
+- A visually hidden DismissButton is added for screen reader users to close the overlay in the absence of a dismiss button.
+- The listbox in the popover uses the **`aria-labelledby`** attribute, which also references the label.
+- Each option 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 **`aria-disabled`** attribute value is “False” for each option, by default.

package/lib/components/ListItem/ListItem.mdx

@@ -0,0 +1,21 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ListItem/ListItem" />
+
+# ListItem
+
+ListItems are items that display within the [ListView](./?path=/docs/components-listview--default) component. 
+This component accepts most of its styling properties from [Styled System](https://styled-system.com/table/). 
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+#### Keyboard Navigation
+
+| Key | Functions |
+| ---- | ---- |
+| Space or Enter | Selects the item. |
+| Tab | Focuses item and follows the page tab sequence. |

package/lib/components/ListView/ListView.mdx

@@ -0,0 +1,44 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ListView/ListView" />
+
+# ListView
+
+ListViews are used to display a list of items. Users can select, view, or edit items in this list.
+This virtualized component supports asynchronous data in infinitely scrollable lists. 
+
+This component should:
+- Be used to list items that contain a significant amount of information within them.
+- Be able to access ListItem information.
+
+It shouldn’t be used to list items that only have a single piece of information.
+
+### Required Components
+
+This component requires [ListItem](./?path=/docs/components-listitem--default).
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA ListBox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) accessibility guidelines. 
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Key | Functions |
+| ---- | ---- |
+| Space or Enter | Selects the item. |
+| Tab | Focuses item and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Arrow keys | Can be used to move the selection in the menu.  |
+| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first row. |
+| End(Fn + Left Arrow Key) Or Control/Command + End | 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 **`aria-multiselectable`**  attribute is used to indicate that users can toggle between items in the grid. 
+- Each ListViewItem uses the **`aria-rowindex`**  attribute, which defines a component's position in the total number of rows. 
+- Each item also uses the aria-label, **`aria-colindex`**  attributes to indicate the component’s column position and aria-selected to indicate the currently selected state.

package/lib/components/ListView/ListView.stories.js

@@ -17,16 +17,18 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import React from 'react';
 import { Item, useAsyncList } from 'react-stately';
+import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
+import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
 import { action } from '@storybook/addon-actions';
 import isChromatic from 'chromatic/isChromatic';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, ListView, ListViewItem, ListViewItemMenu, ListViewItemSwitchField } from '../../index';
+import { Box, Icon, IconButton, ListView, Text } from '../../index';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import ListViewReadme from './ListView.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Experimental/ListView',
+  title: 'Components/ListView',
   component: ListView,
   parameters: {
     docs: {
@@ -45,20 +47,19 @@ export default {
         options: loadingStates
       }
     },
-    disabledKeys: {},
+    disabledKeys: {
+      defaultValue: ['Snake']
+    },
     items: {
       control: {
         type: 'none'
       }
     },
     onSelectionChange: {
-      control: 'none'
+      control: 'none',
+      // eslint-disable-next-line no-console
+      defaultValue: console.log
     }
-  },
-  args: {
-    disabledKeys: ['Snake'],
-    // eslint-disable-next-line no-console
-    onSelectionChange: console.log
   }
 };
 var items = [{
@@ -532,33 +533,82 @@ var actions = {
   onFocus: action('onFocus'),
   onLoadMore: action('onLoadMore')
 };
-var Controls = function Controls() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ListViewItemSwitchField, null), ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
-    key: "enable"
-  }, "Enable user"), ___EmotionJSX(Item, {
-    key: "disable"
-  }, "Disable user"), ___EmotionJSX(Item, {
-    key: "delete"
-  }, "Delete user")));
+var ListElement = function ListElement(_ref) {
+  var item = _ref.item;
+  return ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    mr: "auto",
+    alignSelf: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: FormSelectIcon,
+    mr: "sm",
+    color: "accent.40",
+    size: "md"
+  }), ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    alignSelf: "center"
+  }, item.name)), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center",
+    gap: "sm"
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "create-icon"
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    size: "sm"
+  })), ___EmotionJSX(IconButton, {
+    "aria-label": "actions-icon"
+  }, ___EmotionJSX(Icon, {
+    icon: MoreVertIcon,
+    size: "sm"
+  }))));
 };
-export var Default = function Default(_ref) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+export var Default = function Default(_ref2) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   return ___EmotionJSX(ListView, _extends({}, props, args, {
     items: items
   }), function (item) {
     return ___EmotionJSX(Item, {
-      key: item.name
-    }, ___EmotionJSX(ListViewItem, {
-      data: {
-        text: item.name,
-        icon: FormSelectIcon
-      }
-    }, ___EmotionJSX(Controls, null)));
+      key: item.name,
+      textValue: item.name,
+      "data-id": item.key
+    }, ___EmotionJSX(Box, {
+      isRow: true
+    }, ___EmotionJSX(Box, {
+      isRow: true,
+      mr: "auto",
+      alignSelf: "center"
+    }, ___EmotionJSX(Icon, {
+      icon: FormSelectIcon,
+      mr: "sm",
+      color: "accent.40",
+      size: "md"
+    }), ___EmotionJSX(Text, {
+      variant: "itemTitle",
+      alignSelf: "center"
+    }, item.name)), ___EmotionJSX(Box, {
+      isRow: true,
+      alignSelf: "center",
+      gap: "sm"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "create-icon"
+    }, ___EmotionJSX(Icon, {
+      icon: CreateIcon,
+      size: "sm"
+    })), ___EmotionJSX(IconButton, {
+      "aria-label": "actions-icon",
+      size: "sm"
+    }, ___EmotionJSX(Icon, {
+      icon: MoreVertIcon,
+      size: "sm"
+    })))));
   });
 };
 export var InfiniteLoadingList = function InfiniteLoadingList(args) {
   var getMockData = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
       var pageNumber;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) {
@@ -590,11 +640,11 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
       }, _callee);
     }));
     return function getMockData(_x, _x2) {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   var fetchApiData = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
       var res, json;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) {
@@ -648,18 +698,18 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
       }, _callee2, null, [[2, 14]]);
     }));
     return function fetchApiData(_x3, _x4, _x5) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   var list = useAsyncList({
-    load: function load(_ref4) {
+    load: function load(_ref5) {
       return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
         var signal, cursor, filterText;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
-                signal = _ref4.signal, cursor = _ref4.cursor, filterText = _ref4.filterText;
+                signal = _ref5.signal, cursor = _ref5.cursor, filterText = _ref5.filterText;
                 if (cursor) {
                   // eslint-disable-next-line
                   cursor = cursor.replace(/^http:\/\//i, "https://");
@@ -692,13 +742,11 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
     onLoadMore: list.loadMore
   }), function (item) {
     return ___EmotionJSX(Item, {
-      key: item.name
-    }, ___EmotionJSX(ListViewItem, {
-      data: {
-        text: item.name,
-        icon: FormSelectIcon
-      }
-    }, ___EmotionJSX(Controls, null)));
+      key: item.name,
+      textValue: item.name
+    }, ___EmotionJSX(ListElement, {
+      item: item
+    }));
   }));
 };
 InfiniteLoadingList.args = {
@@ -711,19 +759,17 @@ InfiniteLoadingList.parameters = {
     }
   }
 };
-export var MultipleSelection = function MultipleSelection(_ref5) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
+export var MultipleSelection = function MultipleSelection(_ref6) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
   return ___EmotionJSX(ListView, _extends({}, props, args, {
     items: items,
     selectionMode: "multiple"
   }), function (item) {
     return ___EmotionJSX(Item, {
-      key: item.name
-    }, ___EmotionJSX(ListViewItem, {
-      data: {
-        text: item.name,
-        icon: FormSelectIcon
-      }
-    }, ___EmotionJSX(Controls, null)));
+      key: item.name,
+      textValue: item.name
+    }, ___EmotionJSX(ListElement, {
+      item: item
+    }));
   });
 };

package/lib/components/Loader/Loader.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["size"];
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Loader = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -24,17 +23,4 @@ var Loader = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "loader.dotRight"
   }));
 });
-Loader.propTypes = {
-  /**
-   * Color key from theme or string value.
-   * Default color inherits the font color.
-  */
-  color: PropTypes.string,
-  /**
-   * Size as number or pixel / em / rem value.
-   * Sizes can either be a string such as xs, sm, md, etc or numeric size with unit such as 15px.
-   * Default size inherits the font size.
-  */
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
 export default Loader;

package/lib/components/Loader/Loader.mdx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Loader/Loader" />
+
+# Loader
+
+The Loader component provides users information about the loading or computing processes that are occurring. 
+
+This component should be:
+- Used to show an indeterminate state.
+- Restricted to a single use per view to avoid unnecessary disruption.
+
+It should not be used: 
+- When the wait time for a process is known.
+- When trying to communicate progression in steps.
+
+The Loader component is based on the [useProgressBar](https://react-spectrum.adobe.com/react-aria/useProgressBar.html) React Aria component.
+
+### Required Components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### 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-live`** attribute is used to announce content changes in a live region.

package/lib/components/Menu/Menu.mdx

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Menu/Menu" />
+
+# Menu
+
+The Menu component is intended to be used as a wrapper for MenuItems. It is based on the [useMenu](https://react-spectrum.adobe.com/react-aria/useMenu.html) 
+React Aria component, and is often used in a [PopoverMenu](./?path=/story/components-popovermenu--default).
+
+Menus should:
+- Only contain the most relevant categories for a quick scan.
+- Be used to view actions and not content.
+
+Menus shouldn’t:
+- Display more than 5 items to easily interpret the scope of actions.
+- Include ellipses (…) in menu item names. An ellipsis indicates that the user action prompt opens a new window.
+
+### Required Components
+
+This component requires the Item component, which is exported within Astro, but originates from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Menu](https://www.w3.org/WAI/tutorials/menus/) accessibility guidelines. 
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Key | Functions |
+| ---- | ---- |
+| Space or Enter | Selects the menu item. |
+| Tab | Focuses the menu item and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Home(Fn + Right Arrow Key) Or Control/Command + Home| Shifts the focus to the first row. |
+| End(Fn + Left Arrow Key) Or Control/Command + End | 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.
+- Each menu option has the default **`aria-disabled`** value as “False.” 
+- The **`aria-orientation`** attribute indicates whether the menu is horizontally or vertically oriented, or undefined.

package/lib/components/Messages/Messages.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Messages/Messages" />
+
+# Messages
+
+Use this component to display warning or alert messages, which often highlight an imminent problem or confirm a risky action. 
+
+These messages should:
+- Capture the user’s attention at the right time.
+- Clearly explain the reason for the warning or alert and the actions the user needs to take.
+- Explain what will happen if they don’t act, using the appropriate sense of urgency.
+- Be short. Limit the number of alerts to one per component.
+
+See our [Warning and alert messages writing guidelines](https://pingidentity.atlassian.net/wiki/spaces/CCC/pages/21137295/Warning+and+alert+messages) for additional information. 
+
+### Required Components
+
+This component requires the Item component, which is exported within Astro, but originates from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Key | Functions |
+| ---- | ---- |
+| Tab | Focuses the IconButton within the message and follows the page tab sequence. |
+| Space or Enter | Selects the button when it is focused. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+
+#### Screen Readers
+
+The **`aria-live`** attribute is used to announce content changes in a live region.

package/lib/components/Modal/Modal.mdx

@@ -0,0 +1,59 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Modal/Modal" />
+
+# Modal
+
+Modals (also known as modal windows, overlays, and dialogs) are large UI elements that sit on top of an application's main window.
+To return to the application's main interface, users must interact with the modal.
+
+This component must be wrapped in an OverlayProvider and the first child component should be a trigger, such as a button.
+
+If the modal is used to display an error message, it displays after users perform an action and require a response. 
+These messages should be short, meaningful, free of technical jargon, and follow status color guidelines. 
+They can also be used to educate users, but don’t try to explain complicated troubleshooting processes in error messages.
+
+Error messages should clearly explain: 
+- What happened
+- Why it happened, if that’s relevant
+- The steps users should take to resolve the issue
+
+See our [Error message writing guidelines](https://pingidentity.atlassian.net/wiki/spaces/CCC/pages/21137273/Error+messages) for additional information. 
+
+Modals should:
+- Be used for important warnings and information requests as a way to prevent or correct critical errors.
+- Be used to break down complex workflow to not overwhelm the user.
+- Have all the critical information inside it to help users make decisions.
+
+Modals should not:
+- Be nested inside or replaced by another modal.
+- Be overused as it disrupts the user’s workflow and requires a response.
+- Have content that requires scrolling. If the content length is exceedingly large or requires complex forms, use the [OverlayPanel](./?path=/docs/components-overlaypanel--default) component.
+- Be used for brief warnings and alerts, use the [Messages](./?path=/docs/components-messages--default) component instead.
+
+### Required Components
+
+This component requires the OverlayProvider and [Button](./?path=/docs/components-button--default) components. 
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Modal](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Key | Functions |
+| ---- | ---- |
+| Tab | The trigger component and the content in the modal are focusable using the Tab key.   |
+|  | When a modal opens, focus moves to an element contained in the modal, which is usually the first focusable element. If the first focusable element does not make sense, tabindex=”-1” should be added to a static element at the top of the modal, which could be the panel title. |
+| Space or Enter | Opens the modal when the trigger is focused. Once opened, the focus is locked inside the modal. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Esc | Pressing the escape key closes the modal and adds focus to the previously focused component. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The button uses the **`aria-label`** attribute to provide an accessible name.
+- The **`aria-labelledby`** attribute is supplied with label ID.
+- The **`aria-modal`** attribute allows the assistive technologies to inform users that the ability to interact with or access other content on the page requires the modal dialog to be closed.

package/lib/components/MultivaluesField/MultivaluesField.mdx

@@ -0,0 +1,44 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/MultivaluesField/MultivaluesField" />
+
+# MultivaluesField
+ 
+The MultivalueField component allows users to select more than one option from a list. 
+Using [useListState](https://react-spectrum.adobe.com/react-stately/useListState.html) from React Stately, it combines an input with a Listbox for a filterable dropdown list.
+
+This component should:
+- Be used when choosing multiple items from a list of options or filtering through items by typing.
+- Allow you to add and remove custom items from the list.
+
+It should not:
+- Have fewer than 4 options. If it does, use a [CheckboxField](./?path=/docs/form-checkboxfield--default) instead.
+- Be used when only 1 item can be selected. 
+- Have a long async loaded list, consider using useAsyncList like [ComboBoxField](./?path=/docs/form-comboboxfield--default) instead.
+
+### Required components
+
+This component requires the OverlayProvider and Item originating from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html). 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | Focuses the field and follows the page tab sequence. |
+| Space or Enter | Opens or closes the menu when the input is focused. |
+| Arrow keys | Moves through the list popover. |
+| Shift + Tab | Moves focus to the previous focusable component.|
+|  | To allow multiple selections, the user making a selection does not close the menu. However, clicking outside of the listbox or pressing Tab with an open popover does. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+
+- The input uses the **`aria-expanded`** attribute to show the expansion and collapse of the popover, the **`aria-invalid`** attribute set to “True” when an incorrect value or status error occurs, and the **`aria-labelledby`** attribute is used to reference the label.
+- The list box **`aria-multiselectable`** attribute is set to “True” by default. 
+- Each option uses the **`aria-selected`** attribute to indicate the state of selection, **`aria-posinset`** to give the option position in the current set of list items, and the **`aria-setsize`** attribute to define the current set of options. 
+- The **`aria-disabled`** attribute is set to “False” for each option by default.