@pingux/astro 1.36.2-alpha.0 → 1.36.2-alpha.2

package/lib/cjs/components/CheckboxField/CheckboxField.js

@@ -42,6 +42,8 @@ var _toggle = require("@react-stately/toggle");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _uuid = require("uuid");
+
 var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
@@ -111,15 +113,18 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
+  var helperTextId = (0, _uuid.v4)();
   return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
     variant: "forms.label.checkbox"
   }, fieldLabelProps), (0, _react2.jsx)(_.Checkbox, (0, _extends2["default"])({
-    ref: checkboxRef
+    ref: checkboxRef,
+    "aria-describedby": helperText && helperTextId
   }, fieldControlProps)), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     sx: {
       pt: 7
-    }
+    },
+    id: helperTextId
   }, helperText));
 });
 CheckboxField.propTypes = _objectSpread({

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

@@ -12,6 +12,8 @@ var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
 var _CheckboxField = _interopRequireDefault(require("../CheckboxField"));
 
 var _react2 = require("@emotion/react");
@@ -119,6 +121,20 @@ test('read only checkbox', function () {
 
   expect(input).toHaveAttribute('readonly');
 });
+test('passing helper text should display it and correct aria attributes on input', function () {
+  var testHelperText = 'testHelperText';
+  getComponent({
+    helperText: testHelperText,
+    status: _statuses["default"].ERROR
+  });
+
+  var helper = _testWrapper.screen.getByText(testHelperText);
+
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
+  var helperTextID = helper.getAttribute('id');
+  expect(_testWrapper.screen.getByRole('checkbox')).toHaveAttribute('aria-describedby', helperTextID);
+});
 test('indeterminate checkbox', function () {
   var _getComponent = getComponent({
     isIndeterminate: true

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -76,7 +76,7 @@ var _ScrollBox = _interopRequireDefault(require("../ScrollBox"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter"],
+var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter", "status", "helperText"],
     _excluded2 = ["shouldFocusOnHover", "shouldSelectOnPressUp"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -114,6 +114,8 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       scrollBoxProps = props.scrollBoxProps,
       controlProps = props.controlProps,
       defaultFilter = props.defaultFilter,
+      status = props.status,
+      helperText = props.helperText,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
@@ -277,7 +279,8 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     inputRef: inputRef,
     triggerProps: buttonProps,
     triggerRef: buttonRef,
-    controlProps: controlProps
+    controlProps: controlProps,
+    "aria-invalid": status === 'error' && true
   })), (0, _react2.jsx)(_PopoverContainer["default"], {
     hasNoArrow: true,
     isDismissable: true,

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

@@ -60,6 +60,8 @@ var _index = require("../../index");
 
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
 
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
 var _react3 = require("@emotion/react");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -1110,6 +1112,24 @@ test('if "hasAddOption" is provided, then custom value is added to listbox on bl
 
   expect(options[options.length - 1]).toHaveTextContent(inputValue);
 });
+test('passing helper text should display it and correct aria attributes on input', function () {
+  var testHelperText = 'testHelperText';
+  getComponent({
+    helperText: testHelperText,
+    status: _statuses["default"].ERROR
+  });
+
+  var helper = _testWrapper.screen.getByText(testHelperText);
+
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  expect(input).toHaveAttribute('aria-invalid', 'true');
+  var helperTextID = helper.getAttribute('id');
+  expect(input).toHaveAttribute('aria-describedby', helperTextID);
+});
 test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
   var _getComponent6, container, results;
 

package/lib/cjs/components/FieldHelperText/FieldHelperText.js

@@ -36,7 +36,7 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "status"];
+var _excluded = ["className", "status", "id"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -51,6 +51,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var FieldHelperText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
       status = props.status,
+      id = props.id,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])({}, "is-".concat(status), true)),
@@ -60,14 +61,18 @@ var FieldHelperText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     ref: ref,
     pt: "sm",
     variant: "fieldHelperText",
-    role: "status"
+    role: status === 'error' ? 'alert' : 'status',
+    id: id
   }, others, {
     className: classNames
   }));
 });
 FieldHelperText.propTypes = {
   /** Determines the color of the field message. */
-  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
+
+  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+  id: _propTypes["default"].string
 };
 FieldHelperText.defaultProps = {
   status: _statuses["default"].DEFAULT

package/lib/cjs/components/FileInputField/FileInputField.js

@@ -132,6 +132,8 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
+  var helperTextId = (0, _uuid.v4)();
+
   var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
       visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
 
@@ -210,7 +212,8 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         handleFileDelete: handleFileDelete,
         isDisabled: isDisabled || isLoading,
         key: fileProps.id,
-        textProps: textProps
+        textProps: textProps,
+        helperTextId: helperTextId
       }, fileProps));
     });
   }, [uploadedFilesImperative, uploadedFiles, handleFileDelete, isDisabled, isLoading, textProps]);
@@ -257,7 +260,8 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     },
     "data-testid": "file-input-field__loader"
   })), helperText && (0, _react2.jsx)(_.FieldHelperText, {
-    status: status
+    status: status,
+    id: helperTextId
   }, helperText));
 });
 FileInputField.displayName = 'FileInputField';

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

@@ -218,6 +218,21 @@ test('should display loader if appropriate prop is passed', function () {
   });
   expect(_react2.screen.getByTestId(loaderTestId)).toBeInTheDocument();
 });
+test('passing helper text should display it and correct aria attributes on input', function () {
+  var testHelperText = 'testHelperText';
+  getComponent({
+    helperText: testHelperText,
+    status: _statuses["default"].ERROR,
+    defaultFileList: [testFileObject]
+  });
+
+  var helper = _react2.screen.getByText(testHelperText);
+
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
+  var helperTextID = helper.getAttribute('id');
+  expect(_react2.screen.getAllByRole('button')[0]).toHaveAttribute('aria-describedby', helperTextID);
+});
 test('should display helper text if passed', function () {
   var testHelperText = 'testHelperText';
   getComponent({

package/lib/cjs/components/FileInputField/FileItem.js

@@ -49,7 +49,8 @@ var FileItem = function FileItem(props) {
       isDisabled = props.isDisabled,
       name = props.name,
       status = props.status,
-      textProps = props.textProps;
+      textProps = props.textProps,
+      helperTextId = props.helperTextId;
   var handleDeleteButtonPress = (0, _react.useCallback)(function (e) {
     return handleFileDelete(e, id);
   }, [id, handleFileDelete]);
@@ -95,7 +96,8 @@ var FileItem = function FileItem(props) {
     isDisabled: isDisabled,
     "aria-label": name,
     "data-testid": "file-uploaded__download-file-button",
-    onPress: handleDownloadPress
+    onPress: handleDownloadPress,
+    "aria-describedby": helperTextId
   }, (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({
     color: "active"
   }, textProps), name)), (0, _react2.jsx)(_index.IconButton, {
@@ -129,6 +131,7 @@ FileItem.propTypes = {
   id: _propTypes["default"].string,
   isDisabled: _propTypes["default"].bool,
   name: _propTypes["default"].string,
+  helperTextId: _propTypes["default"].string,
   status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
   textProps: _propTypes["default"].shape({})
 };

package/lib/cjs/components/ImageUploadField/ImageUploadField.js

@@ -38,6 +38,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _visuallyHidden = require("@react-aria/visually-hidden");
+
+var _uuid = require("uuid");
+
 var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
@@ -76,6 +80,7 @@ var ImageUploadField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
   });
+  var statusId = (0, _uuid.v4)();
   var onAction = (0, _react.useCallback)(function (action) {
     // eslint-disable-next-line default-case
     switch (action) {
@@ -97,7 +102,7 @@ var ImageUploadField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
         }
     }
   }, [state.showFileDialog, props === null || props === void 0 ? void 0 : props.onRemove, state.removePreview]);
-  return (0, _react2.jsx)(_ImageUploadFieldBase["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ImageUploadFieldBase["default"], (0, _extends2["default"])({
     fileName: state.fileName,
     handleInputChange: state.handleInputChange,
     handleLabelClick: state.handleLabelClick,
@@ -116,14 +121,22 @@ var ImageUploadField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     previewHeight: props === null || props === void 0 ? void 0 : props.previewHeight,
     previewImage: state.previewImage,
     previewWidth: props === null || props === void 0 ? void 0 : props.previewWidth,
-    widthHeightSx: state.widthHeightSx
+    widthHeightSx: state.widthHeightSx,
+    "aria-haspopup": state.isMenuOpen
   }), (0, _react2.jsx)(_.Menu, {
-    onAction: onAction
+    onAction: onAction,
+    "aria-labelledby": statusId
   }, (0, _react2.jsx)(_.Item, {
-    key: "upload"
+    key: "upload",
+    role: "button"
   }, uploadItemText), (0, _react2.jsx)(_.Item, {
-    key: "remove"
-  }, removeItemText)));
+    key: "remove",
+    role: "button"
+  }, removeItemText))), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
+    "aria-live": "polite",
+    role: state.isMenuOpen ? 'button' : 'status',
+    id: statusId
+  }, state.isMenuOpen && 'Menu pop up expanded'));
 });
 ImageUploadField.propTypes = _objectSpread({
   /** Image preview (controlled), used to represent the current image state. */

package/lib/cjs/components/ImageUploadField/ImageUploadFieldBase.js

@@ -38,10 +38,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _visuallyHidden = require("@react-aria/visually-hidden");
-
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
+var _visuallyHidden = require("@react-aria/visually-hidden");
+
 var _index = require("../../index");
 
 var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
@@ -95,7 +95,8 @@ var ImageUploadFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     variant: "forms.input.wrapper"
   }, fieldContainerProps), (0, _react2.jsx)(_Label["default"], (0, _extends2["default"])({}, fieldLabelProps, {
     onClick: handleLabelClick,
-    ref: labelRef
+    ref: labelRef,
+    tabIndex: "-1"
   })), (0, _react2.jsx)(_index.PopoverMenu, {
     isOpen: isMenuOpen,
     onOpenChange: handleOpenMenuChange

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

@@ -40,6 +40,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 
+var _uuid = require("uuid");
+
+var _visuallyHidden = require("@react-aria/visually-hidden");
+
 var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
@@ -70,11 +74,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var placeholder = props.placeholder,
       isDisabled = props.isDisabled,
-      status = props.status;
+      status = props.status,
+      helperText = props.helperText;
 
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
       ariaProps = _getAriaAttributeProp.ariaProps;
 
+  var helperTextId = (0, _uuid.v4)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
 
   var _useSelectField = (0, _hooks.useSelectField)(_objectSpread(_objectSpread({
@@ -96,7 +102,8 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     className: fieldControlProps.className,
     ref: triggerRef,
     variant: "link",
-    tabIndex: isDisabled ? -1 : 0
+    tabIndex: isDisabled ? -1 : 0,
+    "aria-describedby": helperText && helperTextId
   }, triggerProps, ariaProps), (0, _react2.jsx)(_.Text, {
     variant: "label",
     color: "active"
@@ -113,7 +120,10 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     sx: state.isOpen ? {
       transform: 'rotate(180deg)'
     } : null
-  }))));
+  }))), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
+    "aria-live": "polite",
+    id: helperTextId
+  }, helperText));
   return (0, _react2.jsx)(_SelectFieldBase["default"], (0, _extends2["default"])({}, props, selectFieldProps, {
     trigger: trigger
   }));

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

@@ -181,10 +181,10 @@ test('select field with helper text', function () {
     status: _statuses["default"].ERROR
   });
 
-  var fieldHelperText = _testWrapper.screen.getByText(helperText);
+  var fieldHelperText = _testWrapper.screen.getAllByText(helperText);
 
-  expect(fieldHelperText).toBeInTheDocument();
-  expect(fieldHelperText).toHaveClass("is-".concat(_statuses["default"].ERROR));
+  expect(fieldHelperText[1]).toBeInTheDocument();
+  expect(fieldHelperText[1]).toHaveClass("is-".concat(_statuses["default"].ERROR));
 });
 test('displays a loader while loading', function () {
   var _getComponent = getComponent({
@@ -205,6 +205,19 @@ test('displays a loader while loading', function () {
   });
   expect(loader).not.toBeInTheDocument();
 });
+test('passing helper text should display it and correct aria attributes on input', function () {
+  var testHelperText = 'testHelperText';
+  getComponent({
+    helperText: testHelperText,
+    status: _statuses["default"].ERROR
+  });
+
+  var helper = _testWrapper.screen.getAllByText(testHelperText)[0];
+
+  expect(helper).toBeInTheDocument();
+  var helperTextID = helper.getAttribute('id');
+  expect(_testWrapper.screen.getByRole('button')).toHaveAttribute('aria-describedby', helperTextID);
+});
 test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
   var _getComponent2, container, results;
 

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

@@ -478,10 +478,10 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     slots: {
       beforeInput: (0, _react2.jsx)(_react["default"].Fragment, null, readOnlyItems, " ", selectedItems, readOnlyInputEntry)
     },
-    value: filterString
-  }, ariaProps, inputProps)), helperText && (0, _react2.jsx)(_.FieldHelperText, {
-    status: status
-  }, helperText), (0, _react2.jsx)(_.PopoverContainer, {
+    value: filterString,
+    helperText: helperText,
+    "aria-invalid": status === 'error' && true
+  }, ariaProps, inputProps)), (0, _react2.jsx)(_.PopoverContainer, {
     hasNoArrow: true,
     isDismissable: true,
     isNonModal: true,

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

@@ -523,17 +523,23 @@ test('read only keys', function () {
   var deleteButton2 = firstChip.nextSibling;
   expect(deleteButton2).toBeNull();
 });
-test(' multivalue field with helper text', function () {
-  var helperText = 'helper text';
+test('passing helper text should display it and correct aria attributes on input', function () {
+  var testHelperText = 'testHelperText';
   getComponent({
-    helperText: helperText,
+    helperText: testHelperText,
     status: _statuses["default"].ERROR
   });
 
-  var helper = _testWrapper.screen.getByText(helperText);
+  var helper = _testWrapper.screen.getByText(testHelperText);
 
   expect(helper).toBeInTheDocument();
   expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  expect(input).toHaveAttribute('aria-invalid', 'true');
+  var helperTextID = helper.getAttribute('id');
+  expect(input).toHaveAttribute('aria-describedby', helperTextID);
 });
 test('read only field', function () {
   var isReadOnly = true;

package/lib/cjs/components/NumberField/NumberField.js

@@ -54,6 +54,8 @@ var _utils = require("@react-aria/utils");
 
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
+var _uuid = require("uuid");
+
 var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
@@ -177,6 +179,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   inputProps['aria-roledescription'] = null;
+  var helperTextId = (0, _uuid.v4)();
   return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, (0, _utils.mergeProps)(fieldLabelProps, labelProps)), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "numberField.noDefaultArrows"
   }, groupProps), (0, _react2.jsx)(_.Box, {
@@ -188,9 +191,12 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     // overwrite them like defaultValue, value, ect.
 
   }, updatedFieldControlProps, (0, _omit["default"])(inputProps, ['name', 'onFocus', 'onBlur']), {
-    onChange: onInputChange
+    onChange: onInputChange,
+    "aria-describedby": helperText && helperTextId,
+    role: "textbox"
   })), ControlArrows), helperText && (0, _react2.jsx)(_.FieldHelperText, {
-    status: status
+    status: status,
+    id: helperTextId
   }, helperText)));
 });
 var _default = NumberField;

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

@@ -183,4 +183,18 @@ test('number field can be focused', function () {
   _userEvent["default"].tab();
 
   expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveClass('is-focused');
+});
+test('passing helper text should display it and correct aria attributes on input', function () {
+  var testHelperText = 'testHelperText';
+  getComponent({
+    helperText: testHelperText,
+    status: _statuses["default"].ERROR
+  });
+
+  var helper = _testWrapper.screen.getByText(testHelperText);
+
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
+  var helperTextID = helper.getAttribute('id');
+  expect(_testWrapper.screen.getByRole('textbox')).toHaveAttribute('aria-describedby', helperTextID);
 });

package/lib/cjs/components/RadioGroupField/RadioGroupField.js

@@ -42,6 +42,8 @@ var _radio2 = require("@react-stately/radio");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _uuid = require("uuid");
+
 var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
@@ -97,6 +99,7 @@ var RadioGroupField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var unhandledAriaProps = {
     'aria-controls': props['aria-controls']
   };
+  var helperTextId = (0, _uuid.v4)();
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     ref: ref,
     className: classNames
@@ -107,7 +110,9 @@ var RadioGroupField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     variant: "forms.label.radioGroup"
   }, labelProps), label), (0, _react2.jsx)(_.Box, {
     variant: "forms.radioGroupWrapper",
-    isRow: orientation === _orientation["default"].HORIZONTAL
+    isRow: orientation === _orientation["default"].HORIZONTAL,
+    "aria-labelledby": helperText && helperTextId,
+    "data-testid": "radioGroupWrapper"
   }, (0, _react2.jsx)(_RadioField.RadioContext.Provider, {
     value: _objectSpread({
       isDisabled: isDisabled
@@ -116,7 +121,8 @@ var RadioGroupField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     status: status,
     sx: {
       pt: 'xs'
-    }
+    },
+    id: helperTextId
   }, helperText));
 });
 RadioGroupField.propTypes = _objectSpread({

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

@@ -199,4 +199,18 @@ test('radio group with horizontal orientation', function () {
   var group = _testWrapper.screen.getByRole('radiogroup');
 
   expect(group).toHaveAttribute('aria-orientation', _orientation["default"].HORIZONTAL);
+});
+test('passing helper text should display it and correct aria attributes on input', function () {
+  var testHelperText = 'testHelperText';
+  getComponent({
+    helperText: testHelperText,
+    status: _statuses["default"].ERROR
+  });
+
+  var helper = _testWrapper.screen.getByText(testHelperText);
+
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
+  var helperTextID = helper.getAttribute('id');
+  expect(_testWrapper.screen.getByTestId('radioGroupWrapper')).toHaveAttribute('aria-labelledby', helperTextID);
 });

package/lib/cjs/components/SelectField/SelectField.js

@@ -64,12 +64,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * React Stately.
  */
 var SelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var status = props.status;
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
 
   var _useSelectField = (0, _hooks.useSelectField)(props, ref),
       selectFieldProps = (0, _extends2["default"])({}, _useSelectField);
 
-  return (0, _react2.jsx)(_SelectFieldBase["default"], (0, _extends2["default"])({}, props, selectFieldProps));
+  return (0, _react2.jsx)(_SelectFieldBase["default"], (0, _extends2["default"])({}, props, selectFieldProps, {
+    "aria-invalid": status === 'error' && true
+  }));
 });
 SelectField.propTypes = _objectSpread({
   /** Alignment of the popover menu relative to the trigger. */

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

@@ -12,6 +12,8 @@ var _testWrapper = require("../../utils/testUtils/testWrapper");
 
 var _index = require("../../index");
 
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
 var _react2 = require("@emotion/react");
 
 var items = [{
@@ -82,4 +84,22 @@ test('default select field', function () {
   expect(hiddenLabel.closest('[aria-hidden="true"]')).not.toBeNull();
   expect(visibleLabel.closest('[aria-hidden="true"]')).toBeNull();
   /* eslint-enable testing-library/no-node-access */
+});
+test('passing helper text should display it and correct aria attributes on input', function () {
+  var testHelperText = 'testHelperText';
+  getComponent({
+    helperText: testHelperText,
+    status: _statuses["default"].ERROR
+  });
+
+  var helper = _testWrapper.screen.getByText(testHelperText);
+
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
+
+  var visibleInput = _testWrapper.screen.getAllByLabelText(defaultProps.label)[1];
+
+  expect(visibleInput).toHaveAttribute('aria-invalid', 'true');
+  var helperTextID = helper.getAttribute('id');
+  expect(_testWrapper.screen.getByRole('button')).toHaveAttribute('aria-describedby', helperTextID);
 });

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -44,6 +44,8 @@ var _select = require("@react-aria/select");
 
 var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 
+var _uuid = require("uuid");
+
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -108,13 +110,15 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
       ariaProps = _getAriaAttributeProp.ariaProps;
 
+  var helperTextId = (0, _uuid.v4)();
   var defaultTrigger = (0, _react2.jsx)(_Box["default"], {
     className: fieldControlProps.className,
     variant: "forms.input.container"
   }, (0, _react2.jsx)(_Button["default"], (0, _extends2["default"])({
     className: fieldControlProps.className,
     ref: triggerRef,
-    variant: "forms.select"
+    variant: "forms.select",
+    "aria-describedby": helperText && helperTextId
   }, triggerProps, ariaProps), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "span",
     variant: "forms.select.currentValue"
@@ -144,7 +148,8 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     name: name,
     isDisabled: true
   }), trigger || defaultTrigger, overlay, helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
-    status: status
+    status: status,
+    id: helperTextId
   }, helperText));
 });
 SelectFieldBase.propTypes = _objectSpread({