@pingux/astro 1.36.1 → 1.36.2-alpha.1

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;

package/lib/components/NumberField/NumberField.js

@@ -24,6 +24,7 @@ import { useNumberFieldState } from '@react-stately/numberfield';
 import { useLocale } from '@react-aria/i18n';
 import { mergeProps } from '@react-aria/utils';
 import omit from 'lodash/omit';
+import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useField, usePropWarning } from '../../hooks';
@@ -135,6 +136,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   inputProps['aria-roledescription'] = null;
+  var helperTextId = uuid();
   return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, mergeProps(fieldLabelProps, labelProps)), ___EmotionJSX(Box, _extends({
     variant: "numberField.noDefaultArrows"
   }, groupProps), ___EmotionJSX(Box, {
@@ -146,9 +148,12 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     // overwrite them like defaultValue, value, ect.
 
   }, updatedFieldControlProps, omit(inputProps, ['name', 'onFocus', 'onBlur']), {
-    onChange: onInputChange
+    onChange: onInputChange,
+    "aria-describedby": helperText && helperTextId,
+    role: "textbox"
   })), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
-    status: status
+    status: status,
+    id: helperTextId
   }, helperText)));
 });
 export default NumberField;

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

@@ -140,4 +140,16 @@ test('number field can be focused', function () {
   getComponent();
   userEvent.tab();
   expect(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.ERROR
+  });
+  var helper = screen.getByText(testHelperText);
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(statuses.ERROR));
+  var helperTextID = helper.getAttribute('id');
+  expect(screen.getByRole('textbox')).toHaveAttribute('aria-describedby', helperTextID);
 });

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -18,6 +18,7 @@ import React, { forwardRef } from 'react';
 import { useRadioGroup } from '@react-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
 import PropTypes from 'prop-types';
+import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Label } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useStatusClasses, usePropWarning } from '../../hooks';
@@ -59,6 +60,7 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
   var unhandledAriaProps = {
     'aria-controls': props['aria-controls']
   };
+  var helperTextId = uuid();
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     className: classNames
@@ -69,7 +71,9 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.label.radioGroup"
   }, labelProps), label), ___EmotionJSX(Box, {
     variant: "forms.radioGroupWrapper",
-    isRow: orientation === ORIENTATION.HORIZONTAL
+    isRow: orientation === ORIENTATION.HORIZONTAL,
+    "aria-labelledby": helperText && helperTextId,
+    "data-testid": "radioGroupWrapper"
   }, ___EmotionJSX(RadioContext.Provider, {
     value: _objectSpread({
       isDisabled: isDisabled
@@ -78,7 +82,8 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
     status: status,
     sx: {
       pt: 'xs'
-    }
+    },
+    id: helperTextId
   }, helperText));
 });
 RadioGroupField.propTypes = _objectSpread({

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

@@ -156,4 +156,16 @@ test('radio group with horizontal orientation', function () {
   });
   var group = screen.getByRole('radiogroup');
   expect(group).toHaveAttribute('aria-orientation', ORIENTATION.HORIZONTAL);
+});
+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.getByTestId('radioGroupWrapper')).toHaveAttribute('aria-labelledby', helperTextID);
 });

package/lib/components/SelectField/SelectField.js

@@ -30,12 +30,15 @@ import statuses from '../../utils/devUtils/constants/statuses';
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var SelectField = /*#__PURE__*/forwardRef(function (props, ref) {
+  var status = props.status;
   usePropWarning(props, 'disabled', 'isDisabled');
 
   var _useSelectField = useSelectField(props, ref),
       selectFieldProps = _extends({}, _useSelectField);
 
-  return ___EmotionJSX(SelectFieldBase, _extends({}, props, selectFieldProps));
+  return ___EmotionJSX(SelectFieldBase, _extends({}, props, selectFieldProps, {
+    "aria-invalid": status === 'error' && true
+  }));
 });
 SelectField.propTypes = _objectSpread({
   /** Alignment of the popover menu relative to the trigger. */

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

@@ -3,6 +3,7 @@ import React from 'react';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { SelectField, Item } from '../../index';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
   name: 'a'
@@ -67,4 +68,18 @@ 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.ERROR
+  });
+  var helper = screen.getByText(testHelperText);
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(statuses.ERROR));
+  var visibleInput = screen.getAllByLabelText(defaultProps.label)[1];
+  expect(visibleInput).toHaveAttribute('aria-invalid', 'true');
+  var helperTextID = helper.getAttribute('id');
+  expect(screen.getByRole('button')).toHaveAttribute('aria-describedby', helperTextID);
 });

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -20,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 { v4 as uuid } from 'uuid';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import Box from '../Box';
@@ -64,13 +65,16 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _getAriaAttributeProp = getAriaAttributeProps(others),
       ariaProps = _getAriaAttributeProp.ariaProps;
 
+  var helperTextId = uuid();
+
   var defaultTrigger = ___EmotionJSX(Box, {
     className: fieldControlProps.className,
     variant: "forms.input.container"
   }, ___EmotionJSX(Button, _extends({
     className: fieldControlProps.className,
     ref: triggerRef,
-    variant: "forms.select"
+    variant: "forms.select",
+    "aria-describedby": helperText && helperTextId
   }, triggerProps, ariaProps), ___EmotionJSX(Box, _extends({
     as: "span",
     variant: "forms.select.currentValue"
@@ -101,7 +105,8 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
     name: name,
     isDisabled: true
   }), trigger || defaultTrigger, overlay, helperText && ___EmotionJSX(FieldHelperText, {
-    status: status
+    status: status,
+    id: helperTextId
   }, helperText));
 });
 SelectFieldBase.propTypes = _objectSpread({

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

@@ -369,6 +369,19 @@ test('form wrapper will have a max label column width when custom width set', fu
   var textAreaContainer = screen.getByTestId(testId);
   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.ERROR
+  });
+  var helper = screen.getByText(testHelperText);
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(statuses.ERROR));
+  var visibleInput = screen.getAllByLabelText(defaultProps.label)[1];
+  var helperTextID = helper.getAttribute('id');
+  expect(visibleInput).toHaveAttribute('aria-describedby', helperTextID);
+});
 test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
   var _getComponent3, container, results;
 

package/lib/components/TextAreaField/TextAreaField.js

@@ -17,6 +17,7 @@ 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 { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Label, TextArea } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useColumnStyles, useField, useLabelHeight, usePropWarning } from '../../hooks';
@@ -49,6 +50,7 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   var labelWrapperRef = useRef();
   var slotContainer = useRef();
   var textAreaRef = useRef();
+  var helperTextId = uuid();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
@@ -136,12 +138,15 @@ var TextAreaField = /*#__PURE__*/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) && ___EmotionJSX(Box, {
     variant: "boxes.textFieldInContainerSlot",
     ref: slotContainer
   }, slots === null || slots === void 0 ? void 0 : slots.inContainer)), helperText && ___EmotionJSX(FieldHelperText, {
-    status: status
+    status: status,
+    id: helperTextId
   }, helperText));
 });
 TextAreaField.propTypes = _objectSpread({

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

@@ -7,6 +7,7 @@ import userEvent from '@testing-library/user-event';
 import { fireEvent } from '@testing-library/react';
 import axeTest from '../../utils/testUtils/testAxe';
 import { screen, render } from '../../utils/testUtils/testWrapper';
+import statuses from '../../utils/devUtils/constants/statuses';
 import TextAreaField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-textAreaField';
@@ -133,4 +134,18 @@ test('providing slot props causes slot to render', function () {
     slots: slots
   });
   expect(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.ERROR
+  });
+  var helper = screen.getByText(testHelperText);
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(statuses.ERROR));
+  var input = screen.getByRole('textbox');
+  expect(input).toHaveAttribute('aria-invalid', 'true');
+  var helperTextID = helper.getAttribute('id');
+  expect(input).toHaveAttribute('aria-describedby', helperTextID);
 });

package/lib/components/TextField/TextField.js

@@ -16,6 +16,7 @@ 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 { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Input, Label } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useField, useLabelHeight, usePropWarning } from '../../hooks';
@@ -55,6 +56,7 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
   var columnStyleProps = useColumnStyles({
     labelMode: props.labelMode
   });
+  var helperTextId = uuid();
   return ___EmotionJSX(Box, _extends({
     variant: "forms.input.wrapper"
   }, fieldContainerProps, {
@@ -69,8 +71,12 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
     className: fieldControlProps.className
   }, wrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, ___EmotionJSX(Input, _extends({
     ref: inputRef
-  }, fieldControlProps)), slots === null || slots === void 0 ? void 0 : slots.inContainer), helperText && ___EmotionJSX(FieldHelperText, {
-    status: status
+  }, fieldControlProps, {
+    "aria-invalid": status === 'error' && true,
+    "aria-describedby": helperText && helperTextId
+  })), slots === null || slots === void 0 ? void 0 : slots.inContainer), helperText && ___EmotionJSX(FieldHelperText, {
+    status: status,
+    id: helperTextId
   }, helperText));
 });
 TextField.propTypes = _objectSpread({

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

@@ -7,6 +7,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import TextField from '.';
 import axeTest from '../../utils/testUtils/testAxe';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-text-field';
 var testLabel = 'Test Label';
@@ -134,4 +135,18 @@ test('text field container and input have is-read-only class name when isReadOnl
   });
   var control = 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.ERROR
+  });
+  var helper = screen.getByText(testHelperText);
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(statuses.ERROR));
+  var input = screen.getByRole('textbox');
+  expect(input).toHaveAttribute('aria-invalid', 'true');
+  var helperTextID = helper.getAttribute('id');
+  expect(input).toHaveAttribute('aria-describedby', helperTextID);
 });

package/lib/recipes/AttributeMappingReadOnlyField.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import CreateIcon from 'mdi-react/CreateIcon';
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
+import { v4 as uuid } from 'uuid';
 import { Box, Chip, IconButton, Text, Icon, Separator, TextField, HelpHint } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -69,6 +70,7 @@ var sx = {
     width: 'md'
   }
 };
+var helperTextId = uuid();
 
 var Row = function Row(props) {
   var withChip = props.withChip,
@@ -92,6 +94,7 @@ var Row = function Row(props) {
         width: '165px'
       }
     },
+    "aria-labelledby": withError && helperTextId,
     slots: withError && {
       inContainer: ___EmotionJSX(Icon, {
         icon: AlertCircleIcon,
@@ -200,7 +203,9 @@ export var WithError = function WithError() {
     icon: AlertCircleIcon,
     color: "#A31300"
   }), ___EmotionJSX(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.")), ___EmotionJSX(Box, {
     sx: sx.defaultFieldsWrapperBox
   }, ___EmotionJSX(Box, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.36.1",
+  "version": "1.36.2-alpha.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",