@pingux/astro 1.28.2-alpha.1 → 1.29.0-alpha.0

package/lib/components/FileInputField/FileInputField.stories.js

@@ -1,9 +1,24 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React, { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import FileInputField from './';
-import { Box } from '../../index';
+import { Box } from '../../';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -16,7 +31,7 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -70,7 +85,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 var fitContentWidthSx = {
   width: 'fit-content'

package/lib/components/FileInputField/FileSelect.js

@@ -1,15 +1,37 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["buttonText", "handleFileSelect", "isDisabled", "textProps"];
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Text } from '../../index';
+import { Button, Text } from '../../';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-var FileSelect = function FileSelect(props) {
-  var buttonText = props.buttonText,
-      handleFileSelect = props.handleFileSelect,
-      isDisabled = props.isDisabled,
-      textProps = props.textProps;
-  return ___EmotionJSX(Button, {
+var FileSelect = function FileSelect(_ref) {
+  var buttonText = _ref.buttonText,
+      handleFileSelect = _ref.handleFileSelect,
+      isDisabled = _ref.isDisabled,
+      textProps = _ref.textProps,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  var _getAriaAttributeProp = getAriaAttributeProps(others),
+      ariaProps = _getAriaAttributeProp.ariaProps;
+
+  return ___EmotionJSX(Button, _extends({
     "aria-label": buttonText,
     "data-testid": "file-input-field__file-select",
     isDisabled: isDisabled,
@@ -17,15 +39,15 @@ var FileSelect = function FileSelect(props) {
     my: 5,
     onPress: handleFileSelect,
     variant: "fileInputField"
-  }, ___EmotionJSX(Text, _extends({
+  }, ariaProps), ___EmotionJSX(Text, _extends({
     color: "active"
   }, textProps), buttonText));
 };
 
 export default FileSelect;
-FileSelect.propTypes = {
+FileSelect.propTypes = _objectSpread({
   buttonText: PropTypes.string,
   handleFileSelect: PropTypes.func,
   isDisabled: PropTypes.bool,
   textProps: PropTypes.shape({})
-};
+}, ariaAttributesBasePropTypes);

package/lib/components/ImageUploadField/ImageUploadField.js

@@ -1,12 +1,27 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
-import ImageUploadFieldBase from './ImageUploadFieldBase';
-import { Item, Menu } from '../../index';
-import { useImageUploadState } from '../../hooks/useImageUploadState';
+import { Item, Menu } from '../../';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import ImagePreviewButton from './ImagePreviewButton';
+import ImageUploadFieldBase from './ImageUploadFieldBase';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { useImageUploadState } from '../../hooks/useImageUploadState';
 /**
  * The Image Upload Field component gives users the ability to upload a file (image by default).
  */
@@ -56,14 +71,14 @@ var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: inputRef,
     widthHeightSx: state.widthHeightSx
   }, props), ___EmotionJSX(ImagePreviewButton, {
-    isLoading: isLoading,
-    loaderSize: loaderSize,
-    previewImage: state.previewImage,
     defaultPreviewImage: state.defaultPreviewImage,
     defaultPreviewNode: state.defaultPreviewNode,
     isImageType: state.isImageType,
+    isLoading: isLoading,
+    loaderSize: loaderSize,
     onPress: state.pressPreviewButton,
     previewHeight: props === null || props === void 0 ? void 0 : props.previewHeight,
+    previewImage: state.previewImage,
     previewWidth: props === null || props === void 0 ? void 0 : props.previewWidth,
     widthHeightSx: state.widthHeightSx
   }), ___EmotionJSX(Menu, {
@@ -74,7 +89,7 @@ var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
     key: "remove"
   }, removeItemText)));
 });
-ImageUploadField.propTypes = {
+ImageUploadField.propTypes = _objectSpread({
   /** Image preview (controlled), used to represent the current image state. */
   previewImage: PropTypes.string,
 
@@ -123,7 +138,7 @@ ImageUploadField.propTypes = {
 
   /** Determines the helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses))
-};
+}, ariaAttributesBasePropTypes);
 ImageUploadField.defaultProps = {
   fileTypes: ['image'],
   loaderSize: 10,

package/lib/components/ImageUploadField/ImageUploadField.stories.js

@@ -1,10 +1,25 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React, { useRef, useState } from 'react';
-import { Image, ImageUploadField, OverlayProvider } from '../../index';
+import { Image, ImageUploadField, OverlayProvider } from '../../';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -17,7 +32,7 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     previewImage: {
       control: {
         type: 'text'
@@ -74,7 +89,7 @@ export default {
       },
       defaultValue: statuses.DEFAULT
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -17,14 +17,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import MenuDown from 'mdi-react/MenuDownIcon';
+import { Box, Button, Loader, Icon, Text } from '../../';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import { usePropWarning, useSelectField } from '../../hooks';
-import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
-import Button from '../Button';
-import Icon from '../Icon';
-import Loader from '../Loader';
 import SelectFieldBase from '../SelectFieldBase';
-import Text from '../Text';
+import statuses from '../../utils/devUtils/constants/statuses';
 /**
  * Select field (dropdown) that does not rely on native browser or mobile implementations.
  *
@@ -37,6 +34,10 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var placeholder = props.placeholder,
       status = props.status;
+
+  var _getAriaAttributeProp = getAriaAttributeProps(props),
+      ariaProps = _getAriaAttributeProp.ariaProps;
+
   usePropWarning(props, 'disabled', 'isDisabled');
 
   var _useSelectField = useSelectField(_objectSpread(_objectSpread({
@@ -56,10 +57,10 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
       triggerRef = selectFieldProps.triggerRef;
 
   var trigger = ___EmotionJSX(Button, _extends({
+    className: fieldControlProps.className,
     ref: triggerRef,
-    variant: "link",
-    className: fieldControlProps.className
-  }, triggerProps), ___EmotionJSX(Text, {
+    variant: "link"
+  }, triggerProps, ariaProps), ___EmotionJSX(Text, {
     variant: "label",
     color: "active"
   }, placeholder), ___EmotionJSX(Box, {
@@ -81,7 +82,7 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     trigger: trigger
   }));
 });
-LinkSelectField.propTypes = {
+LinkSelectField.propTypes = _objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: PropTypes.oneOf(['start', 'end', 'middle']),
 
@@ -180,7 +181,7 @@ LinkSelectField.propTypes = {
 
   /** Props object passed along to the label as-is. */
   labelProps: PropTypes.shape({})
-};
+}, ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = {
   placeholder: 'Select',
   status: statuses.DEFAULT,

package/lib/components/LinkSelectField/LinkSelectField.stories.js

@@ -1,3 +1,11 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
@@ -6,15 +14,20 @@ import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 
 var _context, _context2;
 
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React, { useState } from 'react';
 import { OverlayProvider } from '@react-aria/overlays';
 import { useAsyncList } from '@react-stately/data';
-import { LinkSelectField, Item, Separator } from '../../index';
+import { Box, Item, LinkSelectField, Separator } from '../../';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/LinkSelectField',
@@ -26,7 +39,7 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -68,7 +81,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(LinkSelectField, _extends({}, args, {

package/lib/components/Messages/Message.js

@@ -4,9 +4,8 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["color"];
-import React, { forwardRef, useEffect, useRef, useState, useLayoutEffect } from 'react';
+import React, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import { announce } from '@react-aria/live-announcer';
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
@@ -25,6 +24,11 @@ export var icons = {
   error: AlertCircleIcon,
   warning: AlertIcon
 };
+export var ARIA_STATUSES = {
+  SUCCESS: 'Success Message',
+  ERROR: 'Error Message',
+  WARNING: 'Warning Message'
+};
 
 var CloseButton = function CloseButton(_ref) {
   var color = _ref.color,
@@ -72,9 +76,6 @@ var Message = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
 
-  useEffect(function () {
-    announce(children, 'polite');
-  }, []);
   var innerRef = useRef(null);
 
   var _useState = useState(0),
@@ -91,13 +92,28 @@ var Message = /*#__PURE__*/forwardRef(function (props, ref) {
   }),
       wrapperClasses = _useStatusClasses3.classNames;
 
+  var ariaStatus = function ariaStatus(ariaStatusClass) {
+    if (ariaStatusClass === 'is-success') {
+      return ARIA_STATUSES.SUCCESS;
+    } else if (ariaStatusClass === 'is-error') {
+      return ARIA_STATUSES.ERROR;
+    } else if (ariaStatusClass === 'is-warning') {
+      return ARIA_STATUSES.WARNING;
+    }
+
+    return '';
+  };
+
   return ___EmotionJSX(Box, {
     variant: "messages.transition",
     className: wrapperClasses,
     sx: {
       maxHeight: !isHidden ? innerHeight : 0
     },
-    "data-id": dataId
+    "data-id": dataId,
+    role: "status",
+    "aria-live": "polite",
+    "aria-label": ariaStatus(statusClasses)
   }, ___EmotionJSX(Box, {
     ref: innerRef
   }, ___EmotionJSX(Box, {

package/lib/components/Messages/Messages.test.js

@@ -1,23 +1,20 @@
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React, { useState } from 'react';
-import { announce } from '@react-aria/live-announcer';
+import React from 'react';
 import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import Messages, { messagesReducerStory, multiMessagesReducerStory } from '.';
-import Button from '../Button';
+import { ARIA_STATUSES } from '../Messages/Message';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 jest.mock('@react-aria/live-announcer', function () {
   return {
     announce: jest.fn()
   };
 });
-var mockAnnounce = announce;
 var testId = 'test-messages';
 var defaultProps = {
   'data-testid': testId
@@ -51,37 +48,6 @@ var getWithDynamicList = function getWithDynamicList() {
   return renderFn(___EmotionJSX(Messages, _extends({}, defaultProps, props), function (item) {
     return ___EmotionJSX(Item, item, item.text);
   }));
-};
-
-var MessagesWithButton = function MessagesWithButton(props) {
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      messages = _useState2[0],
-      setMessages = _useState2[1];
-
-  var addMessage = function addMessage() {
-    var _context;
-
-    setMessages(_concatInstanceProperty(_context = []).call(_context, messages, [{
-      key: "message".concat(messages.length + 1),
-      text: "New message ".concat(messages.length + 1),
-      status: 'default'
-    }]));
-  };
-
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
-    onPress: addMessage
-  }, "Click me!"), ___EmotionJSX(Messages, _extends({
-    items: messages
-  }, props), function (item) {
-    return ___EmotionJSX(Item, item, item.text);
-  }));
-};
-
-var getWithButton = function getWithButton() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var renderFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : render;
-  return renderFn(___EmotionJSX(MessagesWithButton, _extends({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -147,36 +113,28 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
 
   expect(firstMessage).toHaveAttribute('data-id', 'message1');
 });
-describe('announcements', function () {
-  // Live announcer is (mostly) only used on apple devices for VoiceOver.
-  // Mock navigator.platform so we take that codepath.
-  var platformMock;
-  beforeEach(function () {
-    platformMock = jest.spyOn(navigator, 'platform', 'get').mockImplementation(function () {
-      return 'MacIntel';
-    });
-  });
-  afterEach(function () {
-    jest.clearAllMocks();
-    platformMock.mockRestore();
-  });
-  test('should announce on render', function () {
-    getWithDynamicList({
-      items: items
-    });
+test('message has role and aria-live attributes', function () {
+  getComponent();
 
-    _forEachInstanceProperty(items).call(items, function (item) {
-      return expect(mockAnnounce).toHaveBeenCalledWith(item.text, 'polite');
-    });
-  });
-  test('should announce on adding item', function () {
-    getWithButton();
-    var messages = screen.getByTestId(testId);
-    expect(messages.childElementCount).toBe(0);
-    var button = screen.getByText('Click me!');
-    userEvent.click(button);
-    expect(messages.childElementCount).toBe(1);
-    expect(mockAnnounce).toHaveBeenCalledWith('New message 1', 'polite');
+  var _screen$getByTestId3 = screen.getByTestId(testId),
+      firstMessage = _screen$getByTestId3.firstChild;
+
+  expect(firstMessage).toHaveAttribute('role', 'status');
+  expect(firstMessage).toHaveAttribute('aria-live', 'polite');
+});
+test('messages with a status have an aria-label announcing the status', function () {
+  getComponent();
+  var successMessage = screen.getAllByRole('status')[1];
+  expect(successMessage).toHaveAttribute('aria-label', ARIA_STATUSES[0]);
+});
+test('messages without a status do not have an aria-label announcing the status', function () {
+  var _context;
+
+  getComponent();
+  var statusMessage = screen.getAllByRole('status')[0];
+
+  _mapInstanceProperty(_context = _Object$keys(ARIA_STATUSES)).call(_context, function (key) {
+    return expect(statusMessage).not.toHaveAttribute('aria-label', ARIA_STATUSES[key]);
   });
 });
 test('should render messages with messagesReducerStory', function () {

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -15,6 +15,8 @@ import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onOpenChange", "onSelectionChange", "placeholder", "readOnlyKeys", "selectedKeys", "scrollBoxProps", "status"];
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -23,17 +25,17 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import Clear from 'mdi-react/CloseIcon';
-import { useFilter } from '@react-aria/i18n';
 import { FocusScope } from '@react-aria/focus';
-import { useListState } from '@react-stately/list';
+import { useFilter } from '@react-aria/i18n';
 import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
-import { Box, Chip, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../..';
+import { useListState } from '@react-stately/list';
+import { Box, FieldHelperText, Chip, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../../';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
+import { usePropWarning } from '../../hooks';
 import ListBox from '../ListBox';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
-import { usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
-import FieldHelperText from '../FieldHelperText';
 /**
  * Complex control that lets you choose several tags from the dropdown list.
  * Or to add your own values in non-restrictive mode.
@@ -76,7 +78,12 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       readOnlyKeys = _props$readOnlyKeys === void 0 ? [] : _props$readOnlyKeys,
       selectedKeys = props.selectedKeys,
       scrollBoxProps = props.scrollBoxProps,
-      status = props.status;
+      status = props.status,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var _getAriaAttributeProp = getAriaAttributeProps(others),
+      ariaProps = _getAriaAttributeProp.ariaProps;
+
   var hasCustomValue = mode === 'non-restrictive';
   usePropWarning(props, 'disabled', 'isDisabled');
 
@@ -421,7 +428,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       beforeInput: ___EmotionJSX(React.Fragment, null, readOnlyItems, " ", selectedItems, readOnlyInputEntry)
     },
     value: filterString
-  }, inputProps)), helperText && ___EmotionJSX(FieldHelperText, {
+  }, ariaProps, inputProps)), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText), ___EmotionJSX(PopoverContainer, {
     ref: popoverRef,
@@ -432,7 +439,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     style: style
   }, listbox));
 });
-MultivaluesField.propTypes = {
+MultivaluesField.propTypes = _objectSpread({
   /** Props object that is spread directly into the root (top-level) Box component. */
   containerProps: PropTypes.shape({}),
 
@@ -558,7 +565,7 @@ MultivaluesField.propTypes = {
 
   /** Determines the input status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses))
-};
+}, ariaAttributesBasePropTypes);
 MultivaluesField.defaultProps = {
   direction: 'bottom',
   isReadOnly: false,

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -1,13 +1,28 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React, { useState } from 'react';
-import { Box, Item, MultivaluesField, OverlayProvider } from '../..';
+import { Box, Item, MultivaluesField, OverlayProvider } from '../../';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/MultivaluesField',
   component: MultivaluesField,
-  argTypes: {
+  argTypes: _objectSpread({
     direction: {
       defaultValue: 'bottom'
     },
@@ -54,7 +69,7 @@ export default {
         type: 'text'
       }
     }
-  },
+  }, ariaAttributeBaseArgTypes),
   parameters: {
     docs: {
       source: {