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

package/lib/components/RadioGroupField/RadioGroupField.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, { useState } from 'react';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import RadioGroupField from '.';
 import RadioField from '../RadioField';
 import statuses from '../../utils/devUtils/constants/statuses';
@@ -7,7 +22,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/RadioGroupField',
   component: RadioGroupField,
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -39,37 +54,12 @@ export default {
     isRequired: {},
     name: {},
     id: {},
-    'aria-label': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-labelledby': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-describedby': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-details': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-errormessage': {
-      control: {
-        type: 'text'
-      }
-    },
     value: {
       control: {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(RadioGroupField, args, ___EmotionJSX(RadioField, {

package/lib/components/SearchField/SearchField.js

@@ -14,13 +14,14 @@ 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, useImperativeHandle, useRef } from 'react';
-import PropTypes from 'prop-types';
 import { useSearchField } from '@react-aria/searchfield';
 import { useSearchFieldState } from '@react-stately/searchfield';
-import SearchIcon from 'mdi-react/SearchIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
+import SearchIcon from 'mdi-react/SearchIcon';
+import PropTypes from 'prop-types';
+import { Box, Icon, IconButton, Input, Label } from '../../';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useField, usePropWarning } from '../../hooks';
-import { Box, Icon, IconButton, Input, Label } from '../../index';
 /**
  * Renders a search field with associated controls including visual elements and keyboard
  * interaction handlers.
@@ -91,7 +92,28 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
     icon: CloseIcon
   }))));
 });
-SearchField.propTypes = {
+SearchField.propTypes = _objectSpread({
+  /**
+   * @ignore
+   * Identifies the currently active element when DOM focus is on a composite widget, textbox,
+   * group, or application.
+   */
+  'aria-activedescendant': PropTypes.string,
+
+  /**
+   * Indicates whether inputting text could trigger display of one or more predictions of the
+   * user's intended value for an input and specifies how predictions would be presented if they
+   * are made.
+   */
+  'aria-autocomplete': PropTypes.oneOf(['none', 'inline', 'list', 'both']),
+
+  /**
+   * @ignore
+   * Indicates the availability and type of interactive popup element, such as menu or dialog, that
+   * can be triggered by an element.
+   */
+  'aria-haspopup': PropTypes.oneOf([true, false, 'menu', 'listbox', 'tree', 'grid', 'dialog']),
+
   /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
   autoComplete: PropTypes.string,
 
@@ -169,21 +191,6 @@ SearchField.propTypes = {
    * (value: string) => void
    */
   onChange: PropTypes.func,
-
-  /**
-   * Indicates whether inputting text could trigger display of one or more predictions of the
-   * user's intended value for an input and specifies how predictions would be presented if they
-   * are made.
-   */
-  'aria-autocomplete': PropTypes.oneOf(['none', 'inline', 'list', 'both']),
-
-  /** 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,
-
-  /** Props object that is spread directly into the root (top-level) element. */
   containerProps: PropTypes.shape({}),
 
   /** Props object that is spread into the input element. */
@@ -213,30 +220,6 @@ SearchField.propTypes = {
    */
   onFocusChange: PropTypes.func,
 
-  /**
-   * @ignore
-   * Identifies the currently active element when DOM focus is on a composite widget, textbox,
-   * group, or application.
-   */
-  'aria-activedescendant': PropTypes.string,
-
-  /**
-   * @ignore
-   * Indicates the availability and type of interactive popup element, such as menu or dialog, that
-   * can be triggered by an element.
-   */
-  'aria-haspopup': PropTypes.oneOf([true, false, 'menu', 'listbox', 'tree', 'grid', 'dialog']),
-
-  /** @ignore Identifies the element (or elements) that describes the object. */
-  'aria-describedby': PropTypes.string,
-
-  /**
-   * @ignore
-   * Identifies the element (or elements) that provide a detailed, extended description for the
-   * object.
-   */
-  'aria-details': PropTypes.string,
-
   /**
    * @ignore
    * Whether to exclude the element from the sequential tab order. If true, the element will not be
@@ -314,11 +297,8 @@ SearchField.propTypes = {
    * @ignore
    * Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
    */
-  onInput: PropTypes.func,
-
-  /** @ignore Identifies the element that provides an error message for the object. */
-  'aria-errormessage': PropTypes.string
-};
+  onInput: PropTypes.func
+}, ariaAttributesBasePropTypes);
 SearchField.defaultProps = {
   hasNoClearButton: false,
   icon: SearchIcon

package/lib/components/SearchField/SearchField.stories.js

@@ -1,15 +1,30 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React, { useState } from 'react';
 import Users from 'mdi-react/AccountGroupIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
-import { SearchField, Box, Text } from '../../index';
+import { Box, SearchField, Text } from '../../';
+import { ariaAttributeBaseArgTypes, ariaAttributeBaseDocSettings } from '../../utils/devUtils/props/ariaAttributes';
 import { useDebounce } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/SearchField',
   component: SearchField,
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -34,28 +49,19 @@ export default {
     labelProps: {},
     name: {},
     id: {},
-    'aria-label': {
-      control: {
-        type: 'text'
-      }
+    'aria-autocomplete': {
+      table: ariaAttributeBaseDocSettings.table
     },
-    'aria-labelledby': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-autocomplete': {},
     value: {
       control: {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(SearchField, _extends({}, args, {
     icon: SearchIcon,
-    "aria-label": "Search Groups",
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert

package/lib/components/SelectField/SelectField.js

@@ -1,10 +1,25 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useSelectField, usePropWarning } from '../../hooks';
-import statuses from '../../utils/devUtils/constants/statuses';
 import SelectFieldBase from '../SelectFieldBase';
+import statuses from '../../utils/devUtils/constants/statuses';
 /**
  * Select field (dropdown) that does not rely on native browser or mobile implementations.
  *
@@ -22,7 +37,7 @@ var SelectField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   return ___EmotionJSX(SelectFieldBase, _extends({}, props, selectFieldProps));
 });
-SelectField.propTypes = {
+SelectField.propTypes = _objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: PropTypes.oneOf(['start', 'end', 'middle']),
 
@@ -135,7 +150,7 @@ SelectField.propTypes = {
   scrollBoxProps: PropTypes.shape({
     maxHeight: PropTypes.string
   })
-};
+}, ariaAttributesBasePropTypes);
 SelectField.defaultProps = {
   placeholder: 'Select',
   status: statuses.DEFAULT,

package/lib/components/SelectField/SelectField.stories.js

@@ -1,3 +1,11 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
@@ -7,15 +15,21 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 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";
 
 var _context, _context2;
 
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React, { useState } from 'react';
 import { OverlayProvider } from '@react-aria/overlays';
 import { useAsyncList } from '@react-stately/data';
-import { SelectField, Item, Separator, Section } from '../../index';
-import statuses from '../../utils/devUtils/constants/statuses';
+import { Item, Section, SelectField, Separator } 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";
 var animals = [{
   name: 'Aardvark',
@@ -92,7 +106,7 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -141,7 +155,7 @@ export default {
         type: 'none'
       }
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({}, args, {

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,