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

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -9,6 +9,8 @@ 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";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlProps", "fieldLabelProps", "helperText", "isLoadingInitial", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps"];
 
 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; }
 
@@ -18,6 +20,7 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { HiddenSelect } from '@react-aria/select';
 import MenuDown from 'mdi-react/MenuDownIcon';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import Box from '../Box';
 import Button from '../Button';
@@ -36,39 +39,44 @@ import Text from '../Text';
  */
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
-  var defaultText = props.defaultText,
-      helperText = props.helperText,
-      label = props.label,
-      name = props.name,
-      placeholder = props.placeholder,
-      status = props.status,
-      slots = props.slots,
-      columnStyleProps = props.columnStyleProps,
-      fieldContainerProps = props.fieldContainerProps,
-      fieldControlProps = props.fieldControlProps,
-      fieldLabelProps = props.fieldLabelProps,
-      isLoadingInitial = props.isLoadingInitial,
-      overlay = props.overlay,
-      state = props.state,
-      trigger = props.trigger,
-      triggerProps = props.triggerProps,
-      triggerRef = props.triggerRef,
-      valueProps = props.valueProps;
+var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var columnStyleProps = _ref.columnStyleProps,
+      defaultText = _ref.defaultText,
+      fieldContainerProps = _ref.fieldContainerProps,
+      fieldControlProps = _ref.fieldControlProps,
+      fieldLabelProps = _ref.fieldLabelProps,
+      helperText = _ref.helperText,
+      isLoadingInitial = _ref.isLoadingInitial,
+      label = _ref.label,
+      labelMode = _ref.labelMode,
+      name = _ref.name,
+      overlay = _ref.overlay,
+      placeholder = _ref.placeholder,
+      slots = _ref.slots,
+      state = _ref.state,
+      status = _ref.status,
+      trigger = _ref.trigger,
+      triggerProps = _ref.triggerProps,
+      triggerRef = _ref.triggerRef,
+      valueProps = _ref.valueProps,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  var _getAriaAttributeProp = getAriaAttributeProps(others),
+      ariaProps = _getAriaAttributeProp.ariaProps;
 
   var defaultTrigger = ___EmotionJSX(Box, {
     className: fieldControlProps.className,
     variant: "forms.input.container"
   }, ___EmotionJSX(Button, _extends({
+    className: fieldControlProps.className,
     ref: triggerRef,
-    variant: "forms.select",
-    className: fieldControlProps.className
-  }, triggerProps), ___EmotionJSX(Box, _extends({
+    variant: "forms.select"
+  }, triggerProps, ariaProps), ___EmotionJSX(Box, _extends({
     as: "span",
     variant: "forms.select.currentValue"
   }, valueProps), state.selectedItem ? state.selectedItem.rendered : ___EmotionJSX(Text, {
     variant: "placeholder"
-  }, props.labelMode === modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && ___EmotionJSX(Loader, {
+  }, labelMode === modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && ___EmotionJSX(Loader, {
     variant: "loader.withinInput"
   }), ___EmotionJSX(Box, {
     as: "span",
@@ -96,7 +104,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
     status: status
   }, helperText));
 });
-SelectFieldBase.propTypes = {
+SelectFieldBase.propTypes = _objectSpread({
   /** Default text rendered if no option is selected. Deprecated. */
   defaultText: PropTypes.string,
 
@@ -165,5 +173,5 @@ SelectFieldBase.propTypes = {
 
   /** Props for the element representing the selected value. */
   valueProps: PropTypes.shape({})
-};
+}, ariaAttributesBasePropTypes);
 export default SelectFieldBase;

package/lib/components/SwitchField/SwitchField.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onChange", "value", "name", "id", "isDisabled", "isReadOnly", "isRequired", "hasAutoFocus", "onFocus", "onBlur", "onFocusChange", "onKeyDown", "onKeyUp", "status", "aria-label", "aria-labelledby", "aria-describedby", "aria-details", "controlProps"];
+var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onChange", "value", "name", "id", "isDisabled", "isReadOnly", "isRequired", "hasAutoFocus", "onFocus", "onBlur", "onFocusChange", "onKeyDown", "onKeyUp", "status", "controlProps"];
 
 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; }
 
@@ -22,12 +22,10 @@ import omit from 'lodash/omit';
 import { useToggleState } from '@react-stately/toggle';
 import { useSwitch } from '@react-aria/switch';
 import { usePress } from '@react-aria/interactions';
+import { Box, FieldHelperText, Label, Switch } 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 FieldHelperText from '../FieldHelperText';
-import Label from '../Label';
-import Switch from '../Switch';
 /**
  * Combines a switch, label, and helper text for a complete, form-ready solution.
  *
@@ -55,10 +53,6 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
       onKeyDown = props.onKeyDown,
       onKeyUp = props.onKeyUp,
       status = props.status,
-      ariaLabel = props['aria-label'],
-      ariaLabelledby = props['aria-labelledby'],
-      ariaDescribedby = props['aria-describedby'],
-      ariaDetails = props['aria-details'],
       controlProps = props.controlProps,
       others = _objectWithoutProperties(props, _excluded);
 
@@ -98,18 +92,31 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
+  var unhandledAriaProps = {
+    'aria-controls': others['aria-controls'],
+    'aria-errormessage': others['aria-errormessage']
+  };
   return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, _extends({
     variant: "forms.switch.label"
-  }, fieldLabelProps), ___EmotionJSX(Switch, {
+  }, fieldLabelProps), ___EmotionJSX(Switch, _extends({
     ref: switchRef,
     inputProps: fieldControlProps
-  }), label), helperText && ___EmotionJSX(FieldHelperText, {
+  }, unhandledAriaProps)), label), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText));
 });
-SwitchField.propTypes = {
-  /** The rendered label for the field. */
-  label: PropTypes.node,
+SwitchField.propTypes = _objectSpread({
+  /** A list of class names to apply to the input element. */
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+
+  /** Props object that is spread directly into the root (top-level) element. */
+  containerProps: PropTypes.shape({}),
+
+  /** Props object that is spread directly into the input element. */
+  controlProps: PropTypes.shape({}),
+
+  /** Whether the element should receive focus on render. */
+  hasAutoFocus: PropTypes.bool,
 
   /** Text rendered below the input. */
   helperText: PropTypes.node,
@@ -123,21 +130,6 @@ SwitchField.propTypes = {
   /** Whether the element should be selected (uncontrolled). */
   isDefaultSelected: PropTypes.bool,
 
-  /** Whether the element should be selected (controlled). */
-  isSelected: PropTypes.bool,
-
-  /** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
-  name: PropTypes.string,
-
-  /** Handler that is called when the element's selection state changes. */
-  onChange: PropTypes.func,
-
-  /** The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */
-  value: PropTypes.string,
-
-  /** A list of class names to apply to the input element. */
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-
   /** Whether the field is disabled. */
   isDisabled: PropTypes.bool,
 
@@ -147,15 +139,27 @@ SwitchField.propTypes = {
   /** Whether user input is required on the input before form submission. */
   isRequired: PropTypes.bool,
 
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: PropTypes.bool,
+  /** Whether the element should be selected (controlled). */
+  isSelected: PropTypes.bool,
 
-  /** Handler that is called when the element receives focus. */
-  onFocus: PropTypes.func,
+  /** The rendered label for the field. */
+  label: PropTypes.node,
+
+  /** Props object that is spread directly into the label element. */
+  labelProps: PropTypes.shape({}),
+
+  /** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
+  name: PropTypes.string,
 
   /** Handler that is called when the element loses focus. */
   onBlur: PropTypes.func,
 
+  /** Handler that is called when the element's selection state changes. */
+  onChange: PropTypes.func,
+
+  /** Handler that is called when the element receives focus. */
+  onFocus: PropTypes.func,
+
   /** Handler that is called when the element's focus status changes. */
   onFocusChange: PropTypes.func,
 
@@ -168,30 +172,9 @@ SwitchField.propTypes = {
   /** Determines the textarea status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
 
-  /** 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,
-
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the input element. */
-  controlProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the label element. */
-  labelProps: PropTypes.shape({})
-};
+  /** The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */
+  value: PropTypes.string
+}, ariaAttributesBasePropTypes);
 SwitchField.defaultProps = {
   isDisabled: false,
   isReadOnly: false,

package/lib/components/SwitchField/SwitchField.stories.js

@@ -1,14 +1,29 @@
+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, { useState } from 'react';
 import { Pressable } from '@react-aria/interactions';
 import SwitchField from '.';
-import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { Tooltip, TooltipTrigger } from '../../index';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/SwitchField',
   component: SwitchField,
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -46,32 +61,12 @@ export default {
     labelProps: {},
     controlProps: {},
     id: {},
-    'aria-label': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-labelledby': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-describedby': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-details': {
-      control: {
-        type: 'text'
-      }
-    },
     isSelected: {
       control: {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(SwitchField, args);

package/lib/components/TextAreaField/TextAreaField.js

@@ -17,12 +17,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
+import { Box, FieldHelperText, Label, TextArea } from '../../';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useColumnStyles, useField, useLabelHeight, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
-import FieldHelperText from '../FieldHelperText';
-import Label from '../Label';
-import TextArea from '../TextArea';
 /**
  * Combines a textarea, label, and helper text for a complete, form-ready solution.
  */
@@ -45,12 +43,12 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
-  var textAreaRef = useRef();
-  var labelRef = useRef();
-  var labelWrapperRef = useRef();
   var containerRef = useRef();
   var inputContainerRef = useRef();
+  var labelRef = useRef();
+  var labelWrapperRef = useRef();
   var slotContainer = useRef();
+  var textAreaRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
@@ -144,7 +142,7 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     status: status
   }, helperText));
 });
-TextAreaField.propTypes = {
+TextAreaField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
 
@@ -245,7 +243,7 @@ TextAreaField.propTypes = {
     /** The given node will be inserted into the field container. */
     inContainer: PropTypes.node
   })
-};
+}, ariaAttributesBasePropTypes);
 TextAreaField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

package/lib/components/TextAreaField/TextAreaField.stories.js

@@ -1,18 +1,32 @@
+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 _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+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 SearchIcon from 'mdi-react/SearchIcon';
 import TextAreaField from '.';
-import Box from '../Box';
-import Icon from '../Icon';
-import statuses from '../../utils/devUtils/constants/statuses';
+import { Box, Icon } from '../../';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { modes as labelModes } from '../Label/constants';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextAreaField',
   component: TextAreaField,
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -63,7 +77,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 
 var IconSlot = ___EmotionJSX(Box, {

package/lib/components/TextField/TextField.js

@@ -16,12 +16,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
+import { Box, FieldHelperText, Input, Label } from '../../';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useField, useLabelHeight, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
-import Box from '../Box';
-import FieldHelperText from '../FieldHelperText';
-import Input from '../Input';
-import Label from '../Label';
 import useColumnStyles from '../../hooks/useColumnStyles';
 /**
  * Combines a text input, label, and helper text for a complete, form-ready solution.
@@ -75,7 +73,7 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
     status: status
   }, helperText));
 });
-TextField.propTypes = {
+TextField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
 
@@ -174,7 +172,7 @@ TextField.propTypes = {
 
   /** Props object that is spread directly into the input wrapper element. */
   wrapperProps: PropTypes.shape({})
-};
+}, ariaAttributesBasePropTypes);
 TextField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

package/lib/components/TextField/TextField.stories.js

@@ -1,21 +1,36 @@
+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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["variant"];
+
+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 isEmpty from 'lodash/isEmpty';
 import TextField from '.';
+import { Box } from '../../';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { modes as labelModes } from '../Label/constants';
+import CopyButton from '../CopyText/CopyButton';
 import statuses from '../../utils/devUtils/constants/statuses.js';
-import Box from '../Box';
 import useCopyToClipboard from '../../hooks/useCopyToClipboard';
-import CopyButton from '../CopyText/CopyButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextField',
   component: TextField,
-  argTypes: {
+  argTypes: _objectSpread({
     labelMode: {
       control: {
         type: 'select',
@@ -35,7 +50,7 @@ export default {
       },
       defaultValue: statuses.DEFAULT
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(_ref) {
   var variant = _ref.variant,

package/lib/hooks/useField/useField.js

@@ -6,8 +6,6 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 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$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
-import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
@@ -15,7 +13,7 @@ var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "cla
 
 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; }
+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 { useEffect, useState } from 'react';
 import omit from 'lodash/omit';
@@ -24,6 +22,7 @@ import { useLabel } from '@react-aria/label';
 import { useFocusWithin } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
+import { getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { useStatusClasses } from '../../hooks';
 import { modes as labelModes } from '../../components/Label/constants';
@@ -34,8 +33,6 @@ import { modes as labelModes } from '../../components/Label/constants';
  */
 
 var useField = function useField() {
-  var _context;
-
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
   var autocomplete = props.autocomplete,
@@ -142,14 +139,9 @@ var useField = function useField() {
   }, "is-".concat(status), true), statusClasses)),
       classNames = _useStatusClasses.classNames;
 
-  var ariaProps = _reduceInstanceProperty(_context = _Object$entries(others)).call(_context, function (acc, _ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        val = _ref2[1];
-
-    if (key.match(/^aria-.*/)) return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, val));
-    return _objectSpread({}, acc);
-  }, {}); // Handle focus within and value state for the container. These are needed for float labels.
+  var _getAriaAttributeProp = getAriaAttributeProps(others),
+      ariaProps = _getAriaAttributeProp.ariaProps,
+      nonAriaProps = _getAriaAttributeProp.nonAriaProps; // Handle focus within and value state for the container. These are needed for float labels.
 
 
   var _useFocusWithin = useFocusWithin({
@@ -172,9 +164,7 @@ var useField = function useField() {
   }),
       containerClasses = _useStatusClasses2.classNames;
 
-  var nonAriaOthers = _objectSpread({}, omit(others, _Object$keys(ariaProps)));
-
-  var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaOthers), mergeProps(containerProps, focusWithinProps)), {}, {
+  var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaProps), mergeProps(containerProps, focusWithinProps)), {}, {
     className: containerClasses,
     sx: _objectSpread({
       position: 'relative'