@pingux/astro 1.36.1 → 1.36.2-alpha.1

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({

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/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -12,7 +12,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem", "popoverProps"];
+var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "name", "onNamePress", "onOpenChange", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "popoverProps", "searchProps", "selectedItem"];
 
 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; }
 
@@ -33,9 +33,14 @@ import { useListState } from '@react-stately/list';
 import ListBox from '../ListBox';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { Breadcrumbs, Button, Icon, Item, PopoverContainer, ScrollBox, SearchField, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var breadCrumbDataIds = {
+  dropdownList: 'breadcrumb--dropdown-list',
+  environmentButton: 'breadcrumb--environment-button',
+  orgButton: 'breadcrumb--org-button'
+};
 /** The Environment Picker with Search and Sections support */
 
-import { jsx as ___EmotionJSX } from "@emotion/react";
 var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       imperativeDisabledKeys = props.disabledKeys,
@@ -44,15 +49,15 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
       isOpen = props.isOpen,
       items = props.items,
       imperativeItemsFilter = props.itemsFilter,
-      onOpenChange = props.onOpenChange,
+      name = props.name,
       onNamePress = props.onNamePress,
+      onOpenChange = props.onOpenChange,
       imperativeOnPopoverClose = props.onPopoverClose,
       imperativeOnPopoverOpen = props.onPopoverOpen,
       onSelectionChange = props.onSelectionChange,
-      name = props.name,
+      popoverProps = props.popoverProps,
       searchProps = props.searchProps,
       selectedItem = props.selectedItem,
-      popoverProps = props.popoverProps,
       others = _objectWithoutProperties(props, _excluded);
 
   var _useState = useState(''),
@@ -219,7 +224,8 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     onPress: handlePopoverOpen,
     ref: triggerRef,
     variant: "environmentBreadcrumb.current",
-    "aria-label": setAriaLabel(selectedItem)
+    "aria-label": setAriaLabel(selectedItem),
+    "data-id": breadCrumbDataIds.environmentButton
   }), selectedItem, ___EmotionJSX(Icon, {
     icon: popoverState.isOpen ? ArrowDropUpIcon : ArrowDropDownIcon
   })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, mergeProps(overlayProps, positionProps, popoverProps), {
@@ -248,8 +254,9 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     onChange: setSearchValue
   }, searchProps)), checkIfListEmpty() ? EmptyListState : ___EmotionJSX(ListBox, {
-    state: listBoxState,
-    "aria-label": "Items List"
+    "aria-label": "Items List",
+    "data-id": breadCrumbDataIds.dropdownList,
+    state: listBoxState
   })))));
 
   var handleOnAction = useCallback(function (actionKey) {
@@ -271,6 +278,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "environmentBreadcrumb.current",
     "data-testid": "name",
     "aria-label": name,
+    "data-id": breadCrumbDataIds.orgButton,
     elementType: "Button"
   }, ___EmotionJSX(Icon, {
     icon: HomeIcon,

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -21,6 +21,7 @@ import { Section } from '@react-stately/collections';
 import { axe } from 'jest-axe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { EnvironmentBreadcrumb, Item, OverlayProvider } from '../../index';
+import { breadCrumbDataIds } from './EnvironmentBreadcrumb';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testEnvBreadcrumb = 'test-env-breadcrumb';
 var testName = 'test-name';
@@ -296,4 +297,16 @@ test('should respond to onOpenChange', function () {
   expect(onOpenChange).toHaveBeenNthCalledWith(1, true);
   userEvent.click(screen.getByText(testSelectedItem));
   expect(onOpenChange).toHaveBeenNthCalledWith(2, false);
+});
+test('should add data-ids to environment button and org button', function () {
+  getComponent();
+  expect(screen.getByText(testSelectedItem)).toHaveAttribute('data-id', breadCrumbDataIds.environmentButton);
+  expect(screen.getByText(testName)).toHaveAttribute('data-id', breadCrumbDataIds.orgButton);
+});
+test('should add data-id to dropdown list', function () {
+  getComponent();
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.getByRole('listbox', {
+    name: 'Items List'
+  })).toHaveAttribute('data-id', breadCrumbDataIds.dropdownList);
 });

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({})
 };