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

package/lib/cjs/hooks/useField/useField.js

@@ -16,7 +16,7 @@ var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/ins
 
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
 
-var _Object$keys2 = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -24,12 +24,6 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
-var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
-
-var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
-
-var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -50,6 +44,8 @@ var _focus = require("@react-aria/focus");
 
 var _utils = require("@react-aria/utils");
 
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _hooks = require("../../hooks");
@@ -58,9 +54,9 @@ var _constants = require("../../components/Label/constants");
 
 var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isReadOnly", "isRequired", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value"];
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys2(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 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 
 /**
  * Generates the necessary props to be used in field components.
@@ -68,8 +64,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * @returns {{}} Prop objects to be spread into field components.
  */
 var useField = function useField() {
-  var _context;
-
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var autocomplete = props.autocomplete,
       autoComplete = props.autoComplete,
@@ -174,14 +168,10 @@ var useField = function useField() {
   }, "is-".concat(status), true), statusClasses)),
       classNames = _useStatusClasses.classNames;
 
-  var ariaProps = (0, _reduce["default"])(_context = (0, _entries["default"])(others)).call(_context, function (acc, _ref) {
-    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
-        key = _ref2[0],
-        val = _ref2[1];
+  var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
+      ariaProps = _getAriaAttributeProp.ariaProps,
+      nonAriaProps = _getAriaAttributeProp.nonAriaProps; // Handle focus within and value state for the container. These are needed for float labels.
 
-    if (key.match(/^aria-.*/)) return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2["default"])({}, key, val));
-    return _objectSpread({}, acc);
-  }, {}); // Handle focus within and value state for the container. These are needed for float labels.
 
   var _useFocusWithin = (0, _interactions.useFocusWithin)({
     onFocusWithinChange: setFocusWithin
@@ -203,9 +193,7 @@ var useField = function useField() {
   }),
       containerClasses = _useStatusClasses2.classNames;
 
-  var nonAriaOthers = _objectSpread({}, (0, _omit["default"])(others, (0, _keys["default"])(ariaProps)));
-
-  var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaOthers), (0, _utils.mergeProps)(containerProps, focusWithinProps)), {}, {
+  var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaProps), (0, _utils.mergeProps)(containerProps, focusWithinProps)), {}, {
     className: containerClasses,
     sx: _objectSpread({
       position: 'relative'

package/lib/cjs/recipes/LogoTabs.stories.js

@@ -117,41 +117,52 @@ var GoogleLogo = function GoogleLogo(props) {
   })));
 };
 
-var logoTabsStyling = {
-  display: 'inline-flex !important',
-  '& > div': {
-    borderStyle: 'none',
-    borderBottomWidth: '0px !important',
-    justifyContent: 'space-between'
-  }
-};
-
-var tabStyling = _objectSpread(_objectSpread({}, _tabs.tab), {}, {
-  alignSelf: 'center',
-  '& > svg': {
-    borderWidth: 1,
-    borderStyle: 'dashed',
-    borderColor: 'neutral.70',
-    borderRadius: 4,
-    bg: 'white',
-    outline: '5px solid white'
+var sx = {
+  container: {
+    display: 'inline-flex !important',
+    position: 'relative',
+    width: '500px'
   },
-  '&.is-selected > svg': {
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: 'active',
-    borderRadius: 4,
-    bg: 'white',
-    outline: '5px solid white'
+  separator: {
+    position: 'absolute',
+    top: '25%',
+    backgroundColor: 'accent.70'
   },
-  // we only want the change the color of icon svgs to active not company logos
-  '&.is-selected > .mdi-icon > path': {
-    fill: 'active'
+  logoTabsStyling: {
+    display: 'inline-flex !important',
+    '& > div': {
+      borderStyle: 'none',
+      borderBottomWidth: '0px !important',
+      justifyContent: 'space-between'
+    }
   },
-  '& > [role="presentation"]': {
-    height: '0px'
-  }
-});
+  tabStyling: _objectSpread(_objectSpread({}, _tabs.tab), {}, {
+    alignSelf: 'center',
+    '& > svg': {
+      borderWidth: 1,
+      borderStyle: 'dashed',
+      borderColor: 'neutral.70',
+      borderRadius: 4,
+      bg: 'white',
+      outline: '5px solid white'
+    },
+    '&.is-selected > svg': {
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'active',
+      borderRadius: 4,
+      bg: 'white',
+      outline: '5px solid white'
+    },
+    // we only want the change the color of icon svgs to active not company logos
+    '&.is-selected > .mdi-icon > path': {
+      fill: 'active'
+    },
+    '& > [role="presentation"]': {
+      height: '0px'
+    }
+  })
+};
 
 var LogoTabs = function LogoTabs() {
   var _useState = (0, _react.useState)('tab1'),
@@ -165,19 +176,11 @@ var LogoTabs = function LogoTabs() {
       setShowMiddleTabs = _useState4[1];
 
   return (0, _react2.jsx)(_index.Box, {
-    sx: {
-      display: 'inline-flex !important',
-      position: 'relative',
-      width: '500px'
-    }
+    sx: sx.container
   }, (0, _react2.jsx)(_index.Separator, {
-    sx: {
-      position: 'absolute',
-      top: '25%'
-    },
-    bg: "accent.70"
+    sx: sx.separator
   }), (0, _react2.jsx)(_index.Tabs, {
-    sx: logoTabsStyling,
+    sx: sx.logoTabsStyling,
     selectedKey: currentTab,
     onSelectionChange: setCurrentTab,
     onClick: setShowMiddleTabs
@@ -193,7 +196,7 @@ var LogoTabs = function LogoTabs() {
       color: "#eb4c15",
       p: "sm"
     }),
-    sx: tabStyling
+    sx: sx.tabStyling
   }, (0, _react2.jsx)(_index.Text, null, "This is content for the source tab")), (showMiddleTabs || currentTab !== 'tab1') && (0, _react2.jsx)(_index.Tab, {
     key: "tab2",
     title: (0, _react2.jsx)(_index.Text, {
@@ -206,7 +209,7 @@ var LogoTabs = function LogoTabs() {
       color: "accent.20",
       p: "xs"
     }),
-    sx: tabStyling
+    sx: sx.tabStyling
   }, (0, _react2.jsx)(_index.Text, null, "This is content for the custom filter tab")), (showMiddleTabs || currentTab !== 'tab1') && (0, _react2.jsx)(_index.Tab, {
     key: "tab3",
     title: (0, _react2.jsx)(_index.Text, {
@@ -219,7 +222,7 @@ var LogoTabs = function LogoTabs() {
       color: "accent.20",
       p: "xs"
     }),
-    sx: tabStyling
+    sx: sx.tabStyling
   }, (0, _react2.jsx)(_index.Text, null, "This is content for attribute mapping tab")), (0, _react2.jsx)(_index.Tab, {
     key: "tab4",
     title: (0, _react2.jsx)(_index.Text, {
@@ -231,7 +234,7 @@ var LogoTabs = function LogoTabs() {
       size: 65,
       p: "sm"
     }),
-    sx: tabStyling
+    sx: sx.tabStyling
   }, (0, _react2.jsx)(_index.Text, null, "This is content for the target tab"))));
 };
 

package/lib/cjs/utils/devUtils/props/ariaAttributes.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+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$keys2 = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.getAriaAttributeProps = exports.ariaAttributesBasePropTypes = exports.ariaAttributeBaseDocSettings = exports.ariaAttributeBaseArgTypes = void 0;
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
+
+var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys2(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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var descriptions = {
+  ariaControls: 'Identifies the element (or elements) whose contents or presence are controlled by the current element.',
+  ariaDescribedby: 'Identifies the element (or elements) that describes the object.',
+  ariaDetails: 'Identifies the element (or elements) that provide a detailed, extended description for the object.',
+  ariaErrormessage: 'Identifies the element that provides an error message for the object.',
+  ariaLabel: 'Defines a string value that labels the current element.',
+  ariaLabelledby: 'Identifies the element (or elements) that labels the current element.'
+};
+var ariaAttributeBaseDocSettings = {
+  type: {
+    summary: 'string'
+  },
+  control: {
+    type: 'text'
+  },
+  table: {
+    category: 'Aria Attributes'
+  }
+};
+exports.ariaAttributeBaseDocSettings = ariaAttributeBaseDocSettings;
+var ariaAttributeBaseArgTypes = {
+  'aria-controls': _objectSpread({
+    description: descriptions.ariaControls
+  }, ariaAttributeBaseDocSettings),
+  'aria-describedby': _objectSpread({
+    description: descriptions.ariaDescribedby
+  }, ariaAttributeBaseDocSettings),
+  'aria-details': _objectSpread({
+    description: descriptions.ariaDetails
+  }, ariaAttributeBaseDocSettings),
+  'aria-errormessage': _objectSpread({
+    description: descriptions.ariaErrormessage
+  }, ariaAttributeBaseDocSettings),
+  'aria-label': _objectSpread({
+    description: descriptions.ariaLabel
+  }, ariaAttributeBaseDocSettings),
+  'aria-labelledby': _objectSpread({
+    description: descriptions.ariaLabelledby
+  }, ariaAttributeBaseDocSettings)
+};
+exports.ariaAttributeBaseArgTypes = ariaAttributeBaseArgTypes;
+var ariaAttributesBasePropTypes = {
+  'aria-controls': _propTypes["default"].string,
+  'aria-describedby': _propTypes["default"].string,
+  'aria-details': _propTypes["default"].string,
+  'aria-errormessage': _propTypes["default"].string,
+  'aria-label': _propTypes["default"].string,
+  'aria-labelledby': _propTypes["default"].string
+};
+exports.ariaAttributesBasePropTypes = ariaAttributesBasePropTypes;
+
+var getAriaAttributeProps = function getAriaAttributeProps(props) {
+  var _context;
+
+  var ariaProps = (0, _reduce["default"])(_context = (0, _entries["default"])(props)).call(_context, function (acc, _ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        key = _ref2[0],
+        val = _ref2[1];
+
+    if (key.match(/^aria-.*/)) return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2["default"])({}, key, val));
+    return _objectSpread({}, acc);
+  }, {});
+
+  var nonAriaProps = _objectSpread({}, (0, _omit["default"])(props, (0, _keys["default"])(ariaProps)));
+
+  return {
+    ariaProps: ariaProps,
+    nonAriaProps: nonAriaProps
+  };
+};
+
+exports.getAriaAttributeProps = getAriaAttributeProps;

package/lib/cjs/utils/devUtils/props/ariaAttributes.test.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+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$keys2 = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _ariaAttributes = require("./ariaAttributes");
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys2(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; }
+
+describe('getAriaAttributeProps', function () {
+  var subject = function subject(props) {
+    return (0, _ariaAttributes.getAriaAttributeProps)(props);
+  };
+
+  var propsWithNoAriaAttributes = {
+    propOne: 'prop1',
+    propTwo: 'prop2'
+  };
+  describe('when there are 2 props and no aria attributes', function () {
+    it('returns an object with empty ariaProps and 2 nonAriaProps', function () {
+      var _subject = subject(propsWithNoAriaAttributes),
+          ariaProps = _subject.ariaProps,
+          nonAriaProps = _subject.nonAriaProps;
+
+      expect((0, _keys["default"])(nonAriaProps).length).toBe(2);
+      expect((0, _keys["default"])(ariaProps).length).toBe(0);
+    });
+  });
+  describe('when there is an aria-label and an aria-labelledby in the props', function () {
+    it('returns an object with ariaProps containing aria-label and aria-labelledby', function () {
+      var propsWithAriaAttributes = _objectSpread({
+        'aria-labelledby': 'test labelledby',
+        'aria-label': 'test label'
+      }, propsWithNoAriaAttributes);
+
+      var _subject2 = subject(propsWithAriaAttributes),
+          ariaProps = _subject2.ariaProps,
+          nonAriaProps = _subject2.nonAriaProps;
+
+      expect((0, _keys["default"])(nonAriaProps).length).toBe(2);
+      expect((0, _keys["default"])(ariaProps).length).toBe(2);
+    });
+  });
+});

package/lib/components/ArrayField/ArrayField.js

@@ -21,18 +21,15 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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, { useCallback, useState } from 'react';
-import PropTypes from 'prop-types';
+import { useLabel } from '@react-aria/label';
 import { mergeProps } from '@react-aria/utils';
+import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
-import { useLabel } from '@react-aria/label';
-import Box from '../Box';
-import Button from '../Button';
-import FieldHelperText from '../FieldHelperText';
-import Text from '../Text';
-import Label from '../Label';
-import statuses from '../../utils/devUtils/constants/statuses';
-import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
+import { Box, Button, FieldHelperText, Label, Text } from '../../';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import ArrayFieldItem from './ArrayFieldItem';
+import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
+import statuses from '../../utils/devUtils/constants/statuses';
 /**
  * Displays array collections providing useful functions and
  * optimizations for arrays.
@@ -133,12 +130,17 @@ var ArrayField = function ArrayField(props) {
       raLabelProps = _useLabel.labelProps;
 
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
-  return ___EmotionJSX(Box, others, ___EmotionJSX(Label, _extends({}, raLabelProps, mergeProps(labelProps, raLabelProps, {
+
+  var _getAriaAttributeProp = getAriaAttributeProps(others),
+      ariaProps = _getAriaAttributeProp.ariaProps,
+      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
+
+  return ___EmotionJSX(Box, nonAriaProps, ___EmotionJSX(Label, _extends({}, raLabelProps, mergeProps(labelProps, raLabelProps, {
     children: label
-  }))), ___EmotionJSX(Box, {
+  }))), ___EmotionJSX(Box, _extends({
     as: "ul",
     pl: "0"
-  }, _mapInstanceProperty(_context2 = value || fieldValues).call(_context2, function (_ref2) {
+  }, ariaProps), _mapInstanceProperty(_context2 = value || fieldValues).call(_context2, function (_ref2) {
     var id = _ref2.id,
         onComponentRender = _ref2.onComponentRender,
         fieldValue = _ref2.fieldValue,
@@ -173,7 +175,7 @@ var ArrayField = function ArrayField(props) {
   }, addButtonLabel)));
 };
 
-ArrayField.propTypes = {
+ArrayField.propTypes = _objectSpread({
   /** Label for add button */
   addButtonLabel: PropTypes.string,
 
@@ -218,7 +220,7 @@ ArrayField.propTypes = {
 
   /** Text to display when the maximum number of items is reached */
   maxSizeText: PropTypes.node
-};
+}, ariaAttributesBasePropTypes);
 ArrayField.defaultProps = {
   addButtonLabel: '+ Add'
 };

package/lib/components/ArrayField/ArrayField.stories.js

@@ -1,11 +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 _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 _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 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 _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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from 'react';
 import { OverlayProvider } from '@react-aria/overlays';
 import { v4 as uuid } from 'uuid';
-import { ArrayField, ArrayFieldDeleteButton, Item, SelectField, TextField } from '../../index';
+import { ArrayField, ArrayFieldDeleteButton, Item, SelectField, TextField } from '../../';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/ArrayField',
@@ -20,7 +34,7 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       defaultValue: 'Array field label',
       control: {
@@ -49,7 +63,7 @@ export default {
         type: 'text'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 var defaultData = [{
   id: uuid(),

package/lib/components/CheckboxField/CheckboxField.js

@@ -15,15 +15,13 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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, useRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { useToggleState } from '@react-stately/toggle';
 import { useCheckbox } from '@react-aria/checkbox';
+import { useToggleState } from '@react-stately/toggle';
+import PropTypes from 'prop-types';
+import { Box, Checkbox, FieldHelperText, Label } from '../../';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useField, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
-import Checkbox from '../Checkbox';
-import FieldHelperText from '../FieldHelperText';
-import Label from '../Label';
 /**
  * Combines a checkbox, label, and helper text for a complete, form-ready solution.
  *
@@ -77,7 +75,7 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, helperText));
 });
-CheckboxField.propTypes = {
+CheckboxField.propTypes = _objectSpread({
   /** Whether the element should receive focus on render. */
   hasAutoFocus: PropTypes.bool,
 
@@ -141,30 +139,6 @@ CheckboxField.propTypes = {
   /** Handler that is called when a key is released. */
   onKeyUp: PropTypes.func,
 
-  /**
-   * Identifies the element (or elements) whose contents or presence are controlled by the current
-   * element.
-  */
-  'aria-controls': PropTypes.string,
-
-  /** Defines a string value that labels the current element. */
-  'aria-label': PropTypes.string,
-
-  /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby': PropTypes.string,
-
-  /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby': PropTypes.string,
-
-  /**
-   * Identifies the element (or elements) that provide a detailed, extended description for the
-   * object.
-  */
-  'aria-details': PropTypes.string,
-
-  /** Identifies the element that provides an error message for the object. */
-  'aria-errormessage': PropTypes.string,
-
   /** Props object that is spread directly into the root (top-level) element. */
   containerProps: PropTypes.shape({}),
 
@@ -173,6 +147,6 @@ CheckboxField.propTypes = {
 
   /** Props object that is spread directly into the label element. */
   labelProps: PropTypes.shape({})
-};
+}, ariaAttributesBasePropTypes);
 CheckboxField.displayName = 'CheckboxField';
 export default CheckboxField;

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -1,5 +1,20 @@
+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 _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 from 'react';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import CheckboxField from './CheckboxField';
 import Link from '../Link';
 import Text from '../Text';
@@ -8,7 +23,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/CheckboxField',
   component: CheckboxField,
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -46,36 +61,6 @@ export default {
     isIndeterminate: {},
     isDefaultSelected: {},
     isSelected: {},
-    'aria-label': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-labelledby': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-describedby': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-details': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-controls': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-errormessage': {
-      control: {
-        type: 'text'
-      }
-    },
     containerProps: {
       control: {
         type: 'none'
@@ -91,7 +76,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(CheckboxField, args);