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

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

@@ -2,13 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -32,17 +44,19 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _overlays = require("@react-aria/overlays");
 
 var _data = require("@react-stately/data");
 
-var _index = require("../../index");
+var _2 = require("../../");
 
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _Box = _interopRequireDefault(require("../Box"));
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
 
@@ -52,9 +66,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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) { (0, _defineProperty2["default"])(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; }
+
 var _default = {
   title: 'Form/LinkSelectField',
-  component: _index.LinkSelectField,
+  component: _2.LinkSelectField,
   parameters: {
     docs: {
       source: {
@@ -62,7 +80,7 @@ var _default = {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -104,18 +122,18 @@ var _default = {
         type: 'none'
       }
     }
-  }
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.LinkSelectField, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, (0, _extends2["default"])({}, args, {
     width: "100%"
-  }), (0, _react2.jsx)(_index.Item, {
+  }), (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow")));
 };
@@ -123,29 +141,29 @@ var Default = function Default(args) {
 exports.Default = Default;
 
 var LeftLabel = function LeftLabel() {
-  return (0, _react2.jsx)(_Box["default"], {
+  return (0, _react2.jsx)(_2.Box, {
     gap: "xl",
     width: "100%"
-  }, (0, _react2.jsx)(_index.LinkSelectField, {
+  }, (0, _react2.jsx)(_2.LinkSelectField, {
     helperText: "Here is some helpful text...",
     label: "Example Label",
     labelMode: "left"
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
-  }, "Yellow")), (0, _react2.jsx)(_index.LinkSelectField, {
+  }, "Yellow")), (0, _react2.jsx)(_2.LinkSelectField, {
     label: "Example Label that is much longer than the previous one",
     labelMode: "left"
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
-  }, "Yellow")), (0, _react2.jsx)(_index.LinkSelectField, {
+  }, "Yellow")), (0, _react2.jsx)(_2.LinkSelectField, {
     label: "Example label with set width",
     labelMode: "left",
     containerProps: {
@@ -153,11 +171,11 @@ var LeftLabel = function LeftLabel() {
         gridTemplateColumns: '120px auto'
       }
     }
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow")));
 };
@@ -181,15 +199,15 @@ var Controlled = function Controlled() {
     return setSelectedKey(key);
   };
 
-  return (0, _react2.jsx)(_index.LinkSelectField, {
+  return (0, _react2.jsx)(_2.LinkSelectField, {
     selectedKey: selectedKey,
     onSelectionChange: handleSelectionChange,
     label: "What's your favorite color?"
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow"));
 };
@@ -197,18 +215,18 @@ var Controlled = function Controlled() {
 exports.Controlled = Controlled;
 
 var WithNoneOption = function WithNoneOption() {
-  return (0, _react2.jsx)(_index.LinkSelectField, {
+  return (0, _react2.jsx)(_2.LinkSelectField, {
     label: "What's your favorite color?"
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "none"
-  }, "None"), (0, _react2.jsx)(_index.Item, {
+  }, "None"), (0, _react2.jsx)(_2.Item, {
     isSeparator: true,
     textValue: "-"
-  }, (0, _react2.jsx)(_index.Separator, null)), (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Separator, null)), (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow"));
 };
@@ -216,14 +234,14 @@ var WithNoneOption = function WithNoneOption() {
 exports.WithNoneOption = WithNoneOption;
 
 var DisabledField = function DisabledField() {
-  return (0, _react2.jsx)(_index.LinkSelectField, {
+  return (0, _react2.jsx)(_2.LinkSelectField, {
     label: "What's your favorite color?",
     isDisabled: true
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow"));
 };
@@ -231,14 +249,14 @@ var DisabledField = function DisabledField() {
 exports.DisabledField = DisabledField;
 
 var DisabledOptions = function DisabledOptions() {
-  return (0, _react2.jsx)(_index.LinkSelectField, {
+  return (0, _react2.jsx)(_2.LinkSelectField, {
     label: "What's your favorite color?",
     disabledKeys: ['blue']
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue (disabled)"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue (disabled)"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow"));
 };
@@ -246,7 +264,7 @@ var DisabledOptions = function DisabledOptions() {
 exports.DisabledOptions = DisabledOptions;
 
 var NoOptionsAvailable = function NoOptionsAvailable() {
-  return (0, _react2.jsx)(_index.LinkSelectField, {
+  return (0, _react2.jsx)(_2.LinkSelectField, {
     label: "Select an option...",
     isDisabled: true,
     defaultText: "No options available"
@@ -256,15 +274,15 @@ var NoOptionsAvailable = function NoOptionsAvailable() {
 exports.NoOptionsAvailable = NoOptionsAvailable;
 
 var HelperText = function HelperText() {
-  return (0, _react2.jsx)(_index.LinkSelectField, {
+  return (0, _react2.jsx)(_2.LinkSelectField, {
     status: "error",
     helperText: "Here is some helpful text...",
     label: "What's your favorite color?"
-  }, (0, _react2.jsx)(_index.Item, {
+  }, (0, _react2.jsx)(_2.Item, {
     key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
+  }, "Red"), (0, _react2.jsx)(_2.Item, {
     key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_2.Item, {
     key: "yellow"
   }, "Yellow"));
 };
@@ -283,11 +301,11 @@ var DynamicItems = function DynamicItems() {
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
       items = _useState4[0];
 
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.LinkSelectField, {
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
     label: "Select an option...",
     items: items
   }, function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_2.Item, {
       key: item.key
     }, item.name);
   }));
@@ -343,13 +361,13 @@ var AsyncLoading = function AsyncLoading() {
       }))();
     }
   });
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.LinkSelectField, {
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
     label: "Pick a Pokemon",
     items: list.items,
     isLoading: list.isLoading,
     onLoadMore: list.loadMore
   }, function (item) {
-    return (0, _react2.jsx)(_index.Item, {
+    return (0, _react2.jsx)(_2.Item, {
       key: item.name
     }, item.name);
   }));

package/lib/cjs/components/Messages/Message.js

@@ -14,7 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.icons = exports["default"] = void 0;
+exports.icons = exports["default"] = exports.ARIA_STATUSES = void 0;
 
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 
@@ -30,8 +30,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _liveAnnouncer = require("@react-aria/live-announcer");
-
 var _AlertCircleIcon = _interopRequireDefault(require("mdi-react/AlertCircleIcon"));
 
 var _CheckCircleIcon = _interopRequireDefault(require("mdi-react/CheckCircleIcon"));
@@ -69,6 +67,12 @@ var icons = {
   warning: _AlertIcon["default"]
 };
 exports.icons = icons;
+var ARIA_STATUSES = {
+  SUCCESS: 'Success Message',
+  ERROR: 'Error Message',
+  WARNING: 'Warning Message'
+};
+exports.ARIA_STATUSES = ARIA_STATUSES;
 
 var CloseButton = function CloseButton(_ref) {
   var color = _ref.color,
@@ -115,9 +119,6 @@ var Message = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   };
 
-  (0, _react.useEffect)(function () {
-    (0, _liveAnnouncer.announce)(children, 'polite');
-  }, []);
   var innerRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(0),
@@ -134,13 +135,28 @@ var Message = /*#__PURE__*/(0, _react.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 (0, _react2.jsx)(_Box["default"], {
     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)
   }, (0, _react2.jsx)(_Box["default"], {
     ref: innerRef
   }, (0, _react2.jsx)(_Box["default"], {

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

@@ -10,19 +10,15 @@ var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
 
-var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _liveAnnouncer = require("@react-aria/live-announcer");
+var _react = _interopRequireDefault(require("react"));
 
 var _collections = require("@react-stately/collections");
 
@@ -34,7 +30,7 @@ var _testWrapper = require("../../utils/testUtils/testWrapper");
 
 var _ = _interopRequireWildcard(require("."));
 
-var _Button = _interopRequireDefault(require("../Button"));
+var _Message = require("../Messages/Message");
 
 var _react2 = require("@emotion/react");
 
@@ -47,7 +43,6 @@ jest.mock('@react-aria/live-announcer', function () {
     announce: jest.fn()
   };
 });
-var mockAnnounce = _liveAnnouncer.announce;
 var testId = 'test-messages';
 var defaultProps = {
   'data-testid': testId
@@ -81,37 +76,6 @@ var getWithDynamicList = function getWithDynamicList() {
   return renderFn((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), function (item) {
     return (0, _react2.jsx)(_collections.Item, item, item.text);
   }));
-};
-
-var MessagesWithButton = function MessagesWithButton(props) {
-  var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      messages = _useState2[0],
-      setMessages = _useState2[1];
-
-  var addMessage = function addMessage() {
-    var _context;
-
-    setMessages((0, _concat["default"])(_context = []).call(_context, messages, [{
-      key: "message".concat(messages.length + 1),
-      text: "New message ".concat(messages.length + 1),
-      status: 'default'
-    }]));
-  };
-
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Button["default"], {
-    onPress: addMessage
-  }, "Click me!"), (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
-    items: messages
-  }, props), function (item) {
-    return (0, _react2.jsx)(_collections.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] : _testWrapper.render;
-  return renderFn((0, _react2.jsx)(MessagesWithButton, (0, _extends2["default"])({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -191,40 +155,31 @@ 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
-    });
-    (0, _forEach["default"])(items).call(items, function (item) {
-      return expect(mockAnnounce).toHaveBeenCalledWith(item.text, 'polite');
-    });
-  });
-  test('should announce on adding item', function () {
-    getWithButton();
+test('message has role and aria-live attributes', function () {
+  getComponent();
 
-    var messages = _testWrapper.screen.getByTestId(testId);
+  var _screen$getByTestId3 = _testWrapper.screen.getByTestId(testId),
+      firstMessage = _screen$getByTestId3.firstChild;
 
-    expect(messages.childElementCount).toBe(0);
+  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 button = _testWrapper.screen.getByText('Click me!');
+  var successMessage = _testWrapper.screen.getAllByRole('status')[1];
 
-    _userEvent["default"].click(button);
+  expect(successMessage).toHaveAttribute('aria-label', _Message.ARIA_STATUSES[0]);
+});
+test('messages without a status do not have an aria-label announcing the status', function () {
+  var _context;
 
-    expect(messages.childElementCount).toBe(1);
-    expect(mockAnnounce).toHaveBeenCalledWith('New message 1', 'polite');
+  getComponent();
+
+  var statusMessage = _testWrapper.screen.getAllByRole('status')[0];
+
+  (0, _map["default"])(_context = (0, _keys["default"])(_Message.ARIA_STATUSES)).call(_context, function (key) {
+    return expect(statusMessage).not.toHaveAttribute('aria-label', _Message.ARIA_STATUSES[key]);
   });
 });
 test('should render messages with messagesReducerStory', function () {

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -48,36 +48,40 @@ var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 
-var _i18n = require("@react-aria/i18n");
-
 var _focus = require("@react-aria/focus");
 
-var _list = require("@react-stately/list");
+var _i18n = require("@react-aria/i18n");
 
 var _overlays = require("@react-aria/overlays");
 
 var _utils = require("@react-aria/utils");
 
-var _ = require("../..");
+var _list = require("@react-stately/list");
 
-var _ListBox = _interopRequireDefault(require("../ListBox"));
+var _ = require("../../");
 
-var _isIterable = require("../../utils/devUtils/props/isIterable");
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _hooks = require("../../hooks");
 
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ListBox = _interopRequireDefault(require("../ListBox"));
+
+var _isIterable = require("../../utils/devUtils/props/isIterable");
 
-var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
 
+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 _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -126,7 +130,12 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       readOnlyKeys = _props$readOnlyKeys === void 0 ? [] : _props$readOnlyKeys,
       selectedKeys = props.selectedKeys,
       scrollBoxProps = props.scrollBoxProps,
-      status = props.status;
+      status = props.status,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
+      ariaProps = _getAriaAttributeProp.ariaProps;
+
   var hasCustomValue = mode === 'non-restrictive';
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
 
@@ -468,7 +477,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       beforeInput: (0, _react2.jsx)(_react["default"].Fragment, null, readOnlyItems, " ", selectedItems, readOnlyInputEntry)
     },
     value: filterString
-  }, inputProps)), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+  }, ariaProps, inputProps)), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
   }, helperText), (0, _react2.jsx)(_.PopoverContainer, {
     ref: popoverRef,
@@ -479,7 +488,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.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["default"].shape({}),
 
@@ -605,7 +614,7 @@ MultivaluesField.propTypes = {
 
   /** Determines the input status indicator and helper text styling. */
   status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
-};
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 MultivaluesField.defaultProps = {
   direction: 'bottom',
   isReadOnly: false,

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

@@ -2,13 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
 
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -20,9 +32,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
-var _ = require("../..");
+var _ = require("../../");
+
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
@@ -32,10 +48,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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) { (0, _defineProperty2["default"])(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; }
+
 var _default = {
   title: 'Form/MultivaluesField',
   component: _.MultivaluesField,
-  argTypes: {
+  argTypes: _objectSpread({
     direction: {
       defaultValue: 'bottom'
     },
@@ -82,7 +102,7 @@ var _default = {
         type: 'text'
       }
     }
-  },
+  }, _ariaAttributes.ariaAttributeBaseArgTypes),
   parameters: {
     docs: {
       source: {