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

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.2-alpha.0",
+  "version": "1.36.2-alpha.2",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",