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

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

@@ -472,6 +472,23 @@ test('form wrapper will have a max label column width when custom width set', fu
 
   expect(textAreaContainer).toHaveStyle('grid-template-columns: 120px auto');
 });
+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];
+
+  var helperTextID = helper.getAttribute('id');
+  expect(visibleInput).toHaveAttribute('aria-describedby', helperTextID);
+});
 test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
   var _getComponent3, container, results;
 

package/lib/cjs/components/TextAreaField/TextAreaField.js

@@ -40,6 +40,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("@react-aria/utils");
 
+var _uuid = require("uuid");
+
 var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
@@ -84,6 +86,7 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var labelWrapperRef = (0, _react.useRef)();
   var slotContainer = (0, _react.useRef)();
   var textAreaRef = (0, _react.useRef)();
+  var helperTextId = (0, _uuid.v4)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
@@ -168,12 +171,15 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       paddingRight: '35px'
     } : {
       overflow: 'hidden'
-    }
+    },
+    "aria-invalid": status === 'error' && true,
+    "aria-describedby": helperText && helperTextId
   })), (slots === null || slots === void 0 ? void 0 : slots.inContainer) && (0, _react2.jsx)(_.Box, {
     variant: "boxes.textFieldInContainerSlot",
     ref: slotContainer
   }, slots === null || slots === void 0 ? void 0 : slots.inContainer)), helperText && (0, _react2.jsx)(_.FieldHelperText, {
-    status: status
+    status: status,
+    id: helperTextId
   }, helperText));
 });
 TextAreaField.propTypes = _objectSpread({

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

@@ -20,6 +20,8 @@ var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
 var _ = _interopRequireDefault(require("."));
 
 var _react3 = require("@emotion/react");
@@ -165,4 +167,22 @@ test('providing slot props causes slot to render', function () {
     slots: slots
   });
   expect(_testWrapper.screen.getByTestId('testSlot')).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.getByText(testHelperText);
+
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
+
+  var input = _testWrapper.screen.getByRole('textbox');
+
+  expect(input).toHaveAttribute('aria-invalid', 'true');
+  var helperTextID = helper.getAttribute('id');
+  expect(input).toHaveAttribute('aria-describedby', helperTextID);
 });

package/lib/cjs/components/TextField/TextField.js

@@ -38,6 +38,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _uuid = require("uuid");
+
 var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
@@ -90,6 +92,7 @@ var TextField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var columnStyleProps = (0, _useColumnStyles["default"])({
     labelMode: props.labelMode
   });
+  var helperTextId = (0, _uuid.v4)();
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.input.wrapper"
   }, fieldContainerProps, {
@@ -104,8 +107,12 @@ var TextField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: fieldControlProps.className
   }, wrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
     ref: inputRef
-  }, fieldControlProps)), slots === null || slots === void 0 ? void 0 : slots.inContainer), helperText && (0, _react2.jsx)(_.FieldHelperText, {
-    status: status
+  }, fieldControlProps, {
+    "aria-invalid": status === 'error' && true,
+    "aria-describedby": helperText && helperTextId
+  })), slots === null || slots === void 0 ? void 0 : slots.inContainer), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+    status: status,
+    id: helperTextId
   }, helperText));
 });
 TextField.propTypes = _objectSpread({

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

@@ -20,6 +20,8 @@ var _ = _interopRequireDefault(require("."));
 
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
 var _react3 = require("@emotion/react");
 
 var testId = 'test-text-field';
@@ -172,4 +174,22 @@ test('text field container and input have is-read-only class name when isReadOnl
   var control = _react2.screen.getByLabelText(testLabel);
 
   expect(control).toHaveClass('is-read-only');
+});
+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 = _react2.screen.getByText(testHelperText);
+
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
+
+  var input = _react2.screen.getByRole('textbox');
+
+  expect(input).toHaveAttribute('aria-invalid', 'true');
+  var helperTextID = helper.getAttribute('id');
+  expect(input).toHaveAttribute('aria-describedby', helperTextID);
 });

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

@@ -16,6 +16,8 @@ var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
 var _AlertCircleIcon = _interopRequireDefault(require("mdi-react/AlertCircleIcon"));
 
+var _uuid = require("uuid");
+
 var _index = require("../index");
 
 var _react2 = require("@emotion/react");
@@ -87,6 +89,7 @@ var sx = {
     width: 'md'
   }
 };
+var helperTextId = (0, _uuid.v4)();
 
 var Row = function Row(props) {
   var withChip = props.withChip,
@@ -110,6 +113,7 @@ var Row = function Row(props) {
         width: '165px'
       }
     },
+    "aria-labelledby": withError && helperTextId,
     slots: withError && {
       inContainer: (0, _react2.jsx)(_index.Icon, {
         icon: _AlertCircleIcon["default"],
@@ -221,7 +225,9 @@ var WithError = function WithError() {
     icon: _AlertCircleIcon["default"],
     color: "#A31300"
   }), (0, _react2.jsx)(_index.Text, {
-    sx: withErrorSx.text
+    sx: withErrorSx.text,
+    id: helperTextId,
+    role: "alert"
   }, "This attribute is unavailable. Please map the attribute again or re-map to a different attribute.")), (0, _react2.jsx)(_index.Box, {
     sx: sx.defaultFieldsWrapperBox
   }, (0, _react2.jsx)(_index.Box, {

package/lib/components/CheckboxField/CheckboxField.js

@@ -18,6 +18,7 @@ import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react
 import { useCheckbox } from '@react-aria/checkbox';
 import { useToggleState } from '@react-stately/toggle';
 import PropTypes from 'prop-types';
+import { v4 as uuid } from 'uuid';
 import { Box, Checkbox, FieldHelperText, Label } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useField, usePropWarning } from '../../hooks';
@@ -75,15 +76,18 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
+  var helperTextId = uuid();
   return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, _extends({
     variant: "forms.label.checkbox"
   }, fieldLabelProps), ___EmotionJSX(Checkbox, _extends({
-    ref: checkboxRef
+    ref: checkboxRef,
+    "aria-describedby": helperText && helperTextId
   }, fieldControlProps)), label), helperText && ___EmotionJSX(FieldHelperText, {
     status: status,
     sx: {
       pt: 7
-    }
+    },
+    id: helperTextId
   }, helperText));
 });
 CheckboxField.propTypes = _objectSpread({

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

@@ -3,6 +3,7 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
+import statuses from '../../utils/devUtils/constants/statuses';
 import CheckboxField from '../CheckboxField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testLabel = 'Test Label';
@@ -87,6 +88,18 @@ test('read only checkbox', function () {
   var input = screen.getByRole('checkbox');
   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.ERROR
+  });
+  var helper = screen.getByText(testHelperText);
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(statuses.ERROR));
+  var helperTextID = helper.getAttribute('id');
+  expect(screen.getByRole('checkbox')).toHaveAttribute('aria-describedby', helperTextID);
+});
 test('indeterminate checkbox', function () {
   var _getComponent = getComponent({
     isIndeterminate: true

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -13,7 +13,7 @@ import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-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 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; }
@@ -65,6 +65,8 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
       scrollBoxProps = props.scrollBoxProps,
       controlProps = props.controlProps,
       defaultFilter = props.defaultFilter,
+      status = props.status,
+      helperText = props.helperText,
       others = _objectWithoutProperties(props, _excluded);
 
   var _getAriaAttributeProp = getAriaAttributeProps(others),
@@ -230,7 +232,8 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     inputRef: inputRef,
     triggerProps: buttonProps,
     triggerRef: buttonRef,
-    controlProps: controlProps
+    controlProps: controlProps,
+    "aria-invalid": status === 'error' && true
   })), ___EmotionJSX(PopoverContainer, {
     hasNoArrow: true,
     isDismissable: true,

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

@@ -28,6 +28,7 @@ import userEvent from '@testing-library/user-event';
 import { render, screen, act, within } from '../../utils/testUtils/testWrapper';
 import { ComboBoxField, Item, OverlayProvider } from '../../index';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
   name: 'Aardvark',
@@ -912,6 +913,20 @@ test('if "hasAddOption" is provided, then custom value is added to listbox on bl
   var options = screen.queryAllByRole('option');
   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.ERROR
+  });
+  var helper = screen.getByText(testHelperText);
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(statuses.ERROR));
+  var input = 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__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
   var _getComponent6, container, results;
 

package/lib/components/FieldHelperText/FieldHelperText.js

@@ -2,7 +2,7 @@ import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values"
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "status"];
+var _excluded = ["className", "status", "id"];
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
@@ -19,6 +19,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var FieldHelperText = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
       status = props.status,
+      id = props.id,
       others = _objectWithoutProperties(props, _excluded);
 
   var _useStatusClasses = useStatusClasses(className, _defineProperty({}, "is-".concat(status), true)),
@@ -28,14 +29,18 @@ var FieldHelperText = /*#__PURE__*/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.oneOf(_Object$values(statuses))
+  status: PropTypes.oneOf(_Object$values(statuses)),
+
+  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+  id: PropTypes.string
 };
 FieldHelperText.defaultProps = {
   status: statuses.DEFAULT

package/lib/components/FileInputField/FileInputField.js

@@ -81,6 +81,8 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
+  var helperTextId = uuidv4();
+
   var _useVisuallyHidden = useVisuallyHidden(),
       visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
 
@@ -159,7 +161,8 @@ var FileInputField = /*#__PURE__*/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]);
@@ -206,7 +209,8 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     "data-testid": "file-input-field__loader"
   })), helperText && ___EmotionJSX(FieldHelperText, {
-    status: status
+    status: status,
+    id: helperTextId
   }, helperText));
 });
 FileInputField.displayName = 'FileInputField';

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

@@ -178,6 +178,19 @@ test('should display loader if appropriate prop is passed', function () {
   });
   expect(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.ERROR,
+    defaultFileList: [testFileObject]
+  });
+  var helper = screen.getByText(testHelperText);
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(statuses.ERROR));
+  var helperTextID = helper.getAttribute('id');
+  expect(screen.getAllByRole('button')[0]).toHaveAttribute('aria-describedby', helperTextID);
+});
 test('should display helper text if passed', function () {
   var testHelperText = 'testHelperText';
   getComponent({

package/lib/components/FileInputField/FileItem.js

@@ -17,7 +17,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 = useCallback(function (e) {
     return handleFileDelete(e, id);
   }, [id, handleFileDelete]);
@@ -63,7 +64,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
   }, ___EmotionJSX(Text, _extends({
     color: "active"
   }, textProps), name)), ___EmotionJSX(IconButton, {
@@ -96,6 +98,7 @@ FileItem.propTypes = {
   id: PropTypes.string,
   isDisabled: PropTypes.bool,
   name: PropTypes.string,
+  helperTextId: PropTypes.string,
   status: PropTypes.oneOf(_Object$values(statuses)),
   textProps: PropTypes.shape({})
 };

package/lib/components/ImageUploadField/ImageUploadField.js

@@ -16,6 +16,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { v4 as uuid } from 'uuid';
 import { Item, Menu } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import ImagePreviewButton from './ImagePreviewButton';
@@ -40,6 +42,7 @@ var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
+  var statusId = uuid();
   var onAction = useCallback(function (action) {
     // eslint-disable-next-line default-case
     switch (action) {
@@ -61,7 +64,7 @@ var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
         }
     }
   }, [state.showFileDialog, props === null || props === void 0 ? void 0 : props.onRemove, state.removePreview]);
-  return ___EmotionJSX(ImageUploadFieldBase, _extends({
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ImageUploadFieldBase, _extends({
     fileName: state.fileName,
     handleInputChange: state.handleInputChange,
     handleLabelClick: state.handleLabelClick,
@@ -80,14 +83,22 @@ var ImageUploadField = /*#__PURE__*/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
   }), ___EmotionJSX(Menu, {
-    onAction: onAction
+    onAction: onAction,
+    "aria-labelledby": statusId
   }, ___EmotionJSX(Item, {
-    key: "upload"
+    key: "upload",
+    role: "button"
   }, uploadItemText), ___EmotionJSX(Item, {
-    key: "remove"
-  }, removeItemText)));
+    key: "remove",
+    role: "button"
+  }, removeItemText))), ___EmotionJSX(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/components/ImageUploadField/ImageUploadFieldBase.js

@@ -16,8 +16,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useVisuallyHidden } from '@react-aria/visually-hidden';
 import omit from 'lodash/omit';
+import { useVisuallyHidden } from '@react-aria/visually-hidden';
 import { PopoverMenu } from '../../index';
 import useField from '../../hooks/useField';
 import FieldHelperText from '../FieldHelperText';
@@ -55,7 +55,8 @@ var ImageUploadFieldBase = /*#__PURE__*/forwardRef(function (props, inputRef) {
     variant: "forms.input.wrapper"
   }, fieldContainerProps), ___EmotionJSX(Label, _extends({}, fieldLabelProps, {
     onClick: handleLabelClick,
-    ref: labelRef
+    ref: labelRef,
+    tabIndex: "-1"
   })), ___EmotionJSX(PopoverMenu, {
     isOpen: isMenuOpen,
     onOpenChange: handleOpenMenuChange

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -17,6 +17,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import MenuDown from 'mdi-react/MenuDownIcon';
+import { v4 as uuid } from 'uuid';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { Box, Button, Loader, Icon, Text } from '../../';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import { usePropWarning, useSelectField } from '../../hooks';
@@ -34,11 +36,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var placeholder = props.placeholder,
       isDisabled = props.isDisabled,
-      status = props.status;
+      status = props.status,
+      helperText = props.helperText;
 
   var _getAriaAttributeProp = getAriaAttributeProps(props),
       ariaProps = _getAriaAttributeProp.ariaProps;
 
+  var helperTextId = uuid();
   usePropWarning(props, 'disabled', 'isDisabled');
 
   var _useSelectField = useSelectField(_objectSpread(_objectSpread({
@@ -61,7 +65,8 @@ var LinkSelectField = /*#__PURE__*/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), ___EmotionJSX(Text, {
     variant: "label",
     color: "active"
@@ -78,7 +83,10 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: state.isOpen ? {
       transform: 'rotate(180deg)'
     } : null
-  }))));
+  }))), ___EmotionJSX(VisuallyHidden, {
+    "aria-live": "polite",
+    id: helperTextId
+  }, helperText));
 
   return ___EmotionJSX(SelectFieldBase, _extends({}, props, selectFieldProps, {
     trigger: trigger

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

@@ -145,9 +145,9 @@ test('select field with helper text', function () {
     helperText: helperText,
     status: statuses.ERROR
   });
-  var fieldHelperText = screen.getByText(helperText);
-  expect(fieldHelperText).toBeInTheDocument();
-  expect(fieldHelperText).toHaveClass("is-".concat(statuses.ERROR));
+  var fieldHelperText = screen.getAllByText(helperText);
+  expect(fieldHelperText[1]).toBeInTheDocument();
+  expect(fieldHelperText[1]).toHaveClass("is-".concat(statuses.ERROR));
 });
 test('displays a loader while loading', function () {
   var _getComponent = getComponent({
@@ -167,6 +167,17 @@ 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.ERROR
+  });
+  var helper = screen.getAllByText(testHelperText)[0];
+  expect(helper).toBeInTheDocument();
+  var helperTextID = helper.getAttribute('id');
+  expect(screen.getByRole('button')).toHaveAttribute('aria-describedby', helperTextID);
+});
 test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
   var _getComponent2, container, results;
 

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -30,7 +30,7 @@ import { useFilter } from '@react-aria/i18n';
 import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { useListState } from '@react-stately/list';
-import { Box, FieldHelperText, Chip, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../../';
+import { Box, Chip, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../../';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import { usePropWarning } from '../../hooks';
 import ListBox from '../ListBox';
@@ -429,10 +429,10 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     slots: {
       beforeInput: ___EmotionJSX(React.Fragment, null, readOnlyItems, " ", selectedItems, readOnlyInputEntry)
     },
-    value: filterString
-  }, ariaProps, inputProps)), helperText && ___EmotionJSX(FieldHelperText, {
-    status: status
-  }, helperText), ___EmotionJSX(PopoverContainer, {
+    value: filterString,
+    helperText: helperText,
+    "aria-invalid": status === 'error' && true
+  }, ariaProps, inputProps)), ___EmotionJSX(PopoverContainer, {
     hasNoArrow: true,
     isDismissable: true,
     isNonModal: true,

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

@@ -388,15 +388,19 @@ 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.ERROR
   });
-  var helper = screen.getByText(helperText);
+  var helper = screen.getByText(testHelperText);
   expect(helper).toBeInTheDocument();
   expect(helper).toHaveClass("is-".concat(statuses.ERROR));
+  var input = 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;