@pingux/astro 2.44.0 → 2.45.0-alpha.0

package/lib/cjs/hooks/useRockerButton/useRockerButton.d.ts

@@ -20,50 +20,50 @@ declare const useRockerButton: (props: RockerButtonProps, state: {
         style?: React.CSSProperties | undefined;
         className?: string | undefined;
         'aria-activedescendant'?: string | undefined;
-        'aria-atomic'?: (boolean | "true" | "false") | undefined;
-        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+        'aria-atomic'?: (boolean | "false" | "true") | undefined;
+        'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
         'aria-braillelabel'?: string | undefined;
         'aria-brailleroledescription'?: string | undefined;
-        'aria-busy'?: (boolean | "true" | "false") | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-busy'?: (boolean | "false" | "true") | undefined;
+        'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
         'aria-colcount'?: number | undefined;
         'aria-colindex'?: number | undefined;
         'aria-colindextext'?: string | undefined;
         'aria-colspan'?: number | undefined;
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+        'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
         'aria-describedby'?: string | undefined;
         'aria-description'?: string | undefined;
         'aria-details'?: string | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
-        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-expanded'?: (boolean | "false" | "true") | undefined;
         'aria-flowto'?: string | undefined;
-        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-        'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree" | undefined;
-        'aria-hidden'?: (boolean | "true" | "false") | undefined;
-        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        'aria-grabbed'?: (boolean | "false" | "true") | undefined;
+        'aria-haspopup'?: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "false" | "true" | undefined;
+        'aria-hidden'?: (boolean | "false" | "true") | undefined;
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         'aria-keyshortcuts'?: string | undefined;
         'aria-label'?: string | undefined;
         'aria-labelledby'?: string | undefined;
         'aria-level'?: number | undefined;
         'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        'aria-modal'?: (boolean | "true" | "false") | undefined;
-        'aria-multiline'?: (boolean | "true" | "false") | undefined;
-        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
-        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-modal'?: (boolean | "false" | "true") | undefined;
+        'aria-multiline'?: (boolean | "false" | "true") | undefined;
+        'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
+        'aria-orientation'?: "vertical" | "horizontal" | undefined;
         'aria-owns'?: string | undefined;
         'aria-placeholder'?: string | undefined;
         'aria-posinset'?: number | undefined;
-        'aria-readonly'?: (boolean | "true" | "false") | undefined;
-        'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-readonly'?: (boolean | "false" | "true") | undefined;
+        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "false" | "true") | undefined;
         'aria-roledescription'?: string | undefined;
         'aria-rowcount'?: number | undefined;
         'aria-rowindex'?: number | undefined;
         'aria-rowindextext'?: string | undefined;
         'aria-rowspan'?: number | undefined;
-        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-selected'?: (boolean | "false" | "true") | undefined;
         'aria-setsize'?: number | undefined;
         'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
         'aria-valuemax'?: number | undefined;

package/lib/cjs/types/item.d.ts

@@ -1,4 +1,4 @@
-import { ElementType } from 'react';
+import { ElementType, Key } from 'react';
 import type { ItemProps } from '@react-types/shared';
 import { DOMAttributes, StyleProps } from './shared';
 export interface Status {
@@ -7,11 +7,13 @@ export interface Status {
 declare module '@react-types/shared' {
     interface ItemProps<T> extends StyleProps, DOMAttributes {
         /** The rendered label for the item. */
-        label?: string;
+        label?: string | React.ReactNode;
         /** Props for the accordion item content element. */
         regionProps?: StyleProps;
         /** Props for the accordion item content element. */
         containerProps?: StyleProps;
+        /** Props for the accordion item button element. */
+        buttonProps?: StyleProps;
         /** Whether the item has a separator */
         isSeparator?: boolean;
         /** Whether the item is pressed */
@@ -24,6 +26,8 @@ declare module '@react-types/shared' {
         href?: string;
         /** Inline styling prop for item */
         sx?: StyleProps;
+        /** Key for the item. */
+        key?: Key;
     }
 }
 export default ItemProps;

package/lib/components/AccordionGroup/AccordionGroup.js

@@ -9,20 +9,21 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 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 = ["defaultExpandedKeys", "expandedKeys", "labelHeadingTag", "onExpandedChange"],
+var _excluded = ["labelHeadingTag", "onExpandedChange"],
   _excluded2 = ["onFocus"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { mergeProps } from 'react-aria';
 import { useTreeState } from 'react-stately';
 import { useAccordion } from '@react-aria/accordion';
-import { mergeProps } from '@react-aria/utils';
-import PropTypes from 'prop-types';
+
+// eslint-disable-next-line import/no-unresolved
+
 import { AccordionContext } from '../../context/AccordionContext';
 import { Box } from '../../index';
-import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import AccordionItem from '../AccordionItem';
 
 /**
@@ -33,18 +34,15 @@ import AccordionItem from '../AccordionItem';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
-  var defaultExpandedKeys = props.defaultExpandedKeys,
-    expandedKeys = props.expandedKeys,
-    labelHeadingTag = props.labelHeadingTag,
+  var _props$labelHeadingTa = props.labelHeadingTag,
+    labelHeadingTag = _props$labelHeadingTa === void 0 ? 'span' : _props$labelHeadingTa,
     onExpandedChange = props.onExpandedChange,
     others = _objectWithoutProperties(props, _excluded);
   var state = useTreeState(props);
-  var accordionRef = useRef();
+  var accordionRef = useRef(null);
 
   /* `autoFocus: true` is what makes the initial focus only take one click vs two. */
-  var _useAccordion = useAccordion(_objectSpread({
-      autoFocus: true
-    }, props), state, accordionRef),
+  var _useAccordion = useAccordion(_objectSpread({}, props), state, accordionRef),
     accordionProps = _useAccordion.accordionProps;
   delete accordionProps.onMouseDown;
 
@@ -56,11 +54,19 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return accordionRef.current;
   });
+  var mergedProps = mergeProps(theseProps, others);
+  var onFocusGroup = function onFocusGroup() {
+    if (state.selectionManager.isFocused === false) {
+      state.selectionManager.setFocused(true);
+    }
+  };
   return ___EmotionJSX(AccordionContext.Provider, {
     value: state
   }, ___EmotionJSX(Box, _extends({
     ref: accordionRef
-  }, mergeProps(theseProps, others)), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
+  }, mergedProps, {
+    onFocus: onFocusGroup
+  }), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(AccordionItem, {
       "data-id": item['data-id'],
       item: item,
@@ -69,24 +75,5 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
     }, item.props.children);
   })));
 });
-AccordionGroup.propTypes = {
-  /** Handler that is called when items are expanded or collapsed. */
-  onExpandedChange: PropTypes.func,
-  /** Item objects in the collection. */
-  items: isIterableProp,
-  /**
-   * The item keys that are disabled. These items cannot be selected, focused, or otherwise
-   * interacted with.
-   */
-  disabledKeys: isIterableProp,
-  /** The currently expanded keys in the collection (controlled). */
-  expandedKeys: isIterableProp,
-  /** The initial expanded keys in the collection (uncontrolled). */
-  defaultExpandedKeys: isIterableProp,
-  /** Id of the selected element */
-  id: PropTypes.string,
-  /** HTML header element wrapping the label */
-  labelHeadingTag: AccordionItem.propTypes.labelHeadingTag
-};
 AccordionGroup.displayName = 'AccordionGroup';
 export default AccordionGroup;

package/lib/components/AccordionGroup/AccordionGroup.stories.js

@@ -5,9 +5,9 @@ import { Item } from 'react-stately';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { AccordionGroup, Badge, Box, Button, Text, TextField } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { validHeadingTags } from '../AccordionItem/AccordionItem';
-import AccordionReadme from './AccordionGroup.mdx';
+import AccordionReadme from './AccordionGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var itemArray = [{
   key: 't1',
@@ -138,9 +138,10 @@ export var Multiple = function Multiple() {
       items: itemArray,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label;
       return ___EmotionJSX(Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label = item.label) === null || _label === void 0 ? void 0 : _label.toString(),
         label: item.label
       }, item.children);
     })
@@ -175,9 +176,10 @@ export var ControlledExpanded = function ControlledExpanded() {
       items: itemArray,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label2;
       return ___EmotionJSX(Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label2 = item.label) === null || _label2 === void 0 ? void 0 : _label2.toString(),
         label: item.label
       }, item.children);
     })
@@ -197,9 +199,10 @@ export var UncontrolledExpanded = function UncontrolledExpanded() {
       items: itemArray,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label3;
       return ___EmotionJSX(Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label3 = item.label) === null || _label3 === void 0 ? void 0 : _label3.toString(),
         label: item.label
       }, item.children);
     })
@@ -219,9 +222,10 @@ export var DisabledState = function DisabledState() {
       items: itemArrayDisabled,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label4;
       return ___EmotionJSX(Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label4 = item.label) === null || _label4 === void 0 ? void 0 : _label4.toString(),
         label: item.label
       }, item.children);
     })
@@ -246,9 +250,10 @@ export var CustomPresentation = function CustomPresentation() {
       items: itemArrayDisabled,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label5;
       return ___EmotionJSX(Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label5 = item.label) === null || _label5 === void 0 ? void 0 : _label5.toString(),
         label: item.label,
         buttonProps: {
           bg: item.key === 't2' ? 'darkseagreen' : 'skyblue'

package/lib/components/AccordionGroup/AccordionGroup.test.js

@@ -98,7 +98,9 @@ var getComponentWithPopover = function getComponentWithPopover() {
   }, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, {
     "data-testid": "popoverbutton"
   }, "Click me"), ___EmotionJSX(Menu, {
-    onAction: function onAction() {}
+    onAction: function onAction() {
+      return false;
+    }
   }, ___EmotionJSX(Item, {
     key: "edit"
   }, "Edit"), ___EmotionJSX(Item, {
@@ -111,13 +113,15 @@ var getComponentWithPopover = function getComponentWithPopover() {
   }, "Delete")))), ___EmotionJSX(AccordionGroup, {
     items: items,
     defaultExpandedKeys: selectedAccordionKeys
-  }, function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.key,
-      textValue: item.label,
-      label: item.label
-    }, item.text);
-  })));
+  }, ___EmotionJSX(Item, {
+    key: items[0].key,
+    textValue: items[0].label,
+    label: items[0].label
+  }, items[0].text), ___EmotionJSX(Item, {
+    key: items[1].key,
+    textValue: items[1].label,
+    label: items[1].label
+  }, items[1].text))));
 };
 var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordion() {
   return render(___EmotionJSX(Box, {
@@ -242,9 +246,7 @@ test('allows users to navigate accordion headers through the tab key', function
     firstItem = _buttons2[0],
     secondItem = _buttons2[1],
     thirdItem = _buttons2[2];
-  act(function () {
-    firstItem.focus();
-  });
+  userEvent.tab();
   expect(firstItem).toHaveFocus();
   userEvent.tab();
   expect(secondItem).toHaveFocus();

package/lib/components/AccordionItem/AccordionItem.js

@@ -1,18 +1,17 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _context;
-var _excluded = ["label", "children", "textValue", "containerProps", "buttonProps", "regionProps"];
+var _excluded = ["containerProps", "buttonProps", "regionProps"];
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+import React, { useContext, useRef } from 'react';
 import { mergeProps, useButton } from 'react-aria';
 import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import { useAccordionItem } from '@react-aria/accordion';
 import { useFocusRing } from '@react-aria/focus';
 import { useHover } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
+
+// eslint-disable-next-line import/no-unresolved
+
 import { Button as ThemeUIButton } from 'theme-ui';
 import { AccordionContext } from '../../context/AccordionContext';
 import { useStatusClasses } from '../../hooks';
@@ -20,14 +19,11 @@ import { Box, Icon, Text } from '../../index';
 import { hoveredState } from '../AccordionGroup/Accordion.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
-var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
+var AccordionItem = function AccordionItem(props) {
   var className = props.className,
     item = props.item,
     labelHeadingTag = props.labelHeadingTag;
   var _item$props = item.props,
-    label = _item$props.label,
-    children = _item$props.children,
-    textValue = _item$props.textValue,
     _item$props$container = _item$props.containerProps,
     containerProps = _item$props$container === void 0 ? {} : _item$props$container,
     _item$props$buttonPro = _item$props.buttonProps,
@@ -36,23 +32,23 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     regionProps = _item$props$regionPro === void 0 ? {} : _item$props$regionPro,
     others = _objectWithoutProperties(_item$props, _excluded);
   var state = useContext(AccordionContext);
-  var buttonRef = useRef();
+  var buttonRef = useRef(null);
   var _useAccordionItem = useAccordionItem(props, state, buttonRef),
     accordionButtonProps = _useAccordionItem.buttonProps,
     accordionRegionProps = _useAccordionItem.regionProps;
-  var _useHover = useHover(props),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
   var _useFocusRing = useFocusRing(),
     focusProps = _useFocusRing.focusProps,
     isFocusVisible = _useFocusRing.isFocusVisible;
   var isOpen = state.expandedKeys.has(item.key);
   var isDisabled = state.disabledKeys.has(item.key);
+  var _useHover = useHover({
+      isDisabled: isDisabled
+    }),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
 
   /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return buttonRef.current;
-  });
+
   var _useButton = useButton(props, buttonRef),
     isPressed = _useButton.isPressed,
     raButtonProps = _useButton.buttonProps;
@@ -102,24 +98,6 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
   }, accordionRegionProps, regionProps, {
     className: itemClasses
   }), item.rendered));
-});
-AccordionItem.propTypes = {
-  'aria-label': PropTypes.string,
-  labelHeadingTag: PropTypes.oneOf(_concatInstanceProperty(_context = []).call(_context, validHeadingTags, _mapInstanceProperty(validHeadingTags).call(validHeadingTags, function (heading) {
-    return heading.toUpperCase();
-  }))),
-  item: PropTypes.shape({
-    key: PropTypes.string,
-    rendered: PropTypes.node,
-    props: PropTypes.shape({
-      label: PropTypes.node,
-      children: PropTypes.node,
-      textValue: PropTypes.string,
-      containerProps: PropTypes.shape({}),
-      buttonProps: PropTypes.shape({}),
-      regionProps: PropTypes.shape({})
-    })
-  })
 };
 AccordionItem.displayName = 'AccordionItem';
 export default AccordionItem;

package/lib/components/FileInputField/FileInputField.js

@@ -10,17 +10,18 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["defaultButtonText", "defaultFileList", "fileList", "helperText", "isDisabled", "isLoading", "isMultiple", "onFileSelect", "onRemove", "status", "textProps"];
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _URL from "@babel/runtime-corejs3/core-js-stable/url";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 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; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { mergeProps, useVisuallyHidden } from 'react-aria';
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { mergeProps, useVisuallyHidden, VisuallyHidden } from 'react-aria';
 import { useDropzone } from 'react-dropzone';
+import pluralize from 'pluralize';
 import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
 import { Box, FieldHelperText, Input, Label, Loader } from '../..';
@@ -33,6 +34,10 @@ import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusP
 import FileItem from './FileItem';
 import FileSelect from './FileSelect';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var FILE_CHANGE_STATUS = {
+  ADDED: 'added',
+  DELETED: 'deleted'
+};
 var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var defaultButtonText = _ref.defaultButtonText,
     defaultFileList = _ref.defaultFileList,
@@ -50,6 +55,14 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     uploadedFiles = _useState2[0],
     setUploadedFiles = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fileChangeStatus = _useState4[0],
+    setFileChangeStatus = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    fileChangeMessage = _useState6[0],
+    setFileChangeMessage = _useState6[1];
   var inputRef = useRef();
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
@@ -73,7 +86,22 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     inputRef.current.value = null;
     inputRef.current.click();
   }, [inputRef]);
-  var handleFileUpload = useCallback(function (event, newFiles) {
+  useEffect(function () {
+    // TODO: The function works fine in Google Chrome, but sometimes voiceover skips the
+    // update/delete file status update on Safari
+
+    if (status === statuses.ERROR) {
+      setFileChangeMessage(helperText);
+    } else if (fileChangeStatus) {
+      var _context;
+      setFileChangeMessage(_concatInstanceProperty(_context = "".concat(pluralize('file', fileChangeStatus.fileCount, true), " ")).call(_context, fileChangeStatus.status, " successfully"));
+    }
+    setFileChangeStatus(null);
+  }, [fileChangeStatus, helperText, status]);
+  var handleFileUpload = function handleFileUpload(event, newFiles) {
+    if (status === statuses.ERROR) {
+      setFileChangeMessage('');
+    }
     if (onFileSelect) {
       onFileSelect(event, newFiles);
     }
@@ -81,7 +109,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (!isMultiple) {
       arrayWithNewFiles = _sliceInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, 0, 1);
     }
-    var newFilesWithIdAndLink = _mapInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
+    var filesWithIdAndLink = _mapInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
       return {
         fileObj: newFile,
         name: newFile.name,
@@ -92,16 +120,20 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     });
     if (isMultiple) {
       setUploadedFiles(function (prevFiles) {
-        var _context;
-        return _concatInstanceProperty(_context = []).call(_context, prevFiles, newFilesWithIdAndLink);
+        var _context2;
+        return _concatInstanceProperty(_context2 = []).call(_context2, prevFiles, filesWithIdAndLink);
       });
     } else {
-      setUploadedFiles(newFilesWithIdAndLink);
+      setUploadedFiles(filesWithIdAndLink);
     }
-  }, [isMultiple, onFileSelect]);
-  var onDrop = useCallback(function (acceptedFiles, fileRejections, event) {
+    setFileChangeStatus({
+      fileCount: filesWithIdAndLink.length,
+      status: FILE_CHANGE_STATUS.ADDED
+    });
+  };
+  var onDrop = function onDrop(acceptedFiles, fileRejections, event) {
     handleFileUpload(event, acceptedFiles);
-  }, [handleFileUpload]);
+  };
   var _useDropzone = useDropzone({
       onDrop: onDrop,
       noKeyboard: true,
@@ -110,26 +142,31 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     getRootProps = _useDropzone.getRootProps,
     getInputProps = _useDropzone.getInputProps,
     isDragActive = _useDropzone.isDragActive;
-  var handleOnChange = useCallback(function (event) {
+  var handleOnChange = function handleOnChange(event) {
     handleFileUpload(event, event.target.files);
-  }, [handleFileUpload]);
-  var handleFileDelete = useCallback(function (e, fileId) {
-    if (onRemove) {
-      onRemove(e, fileId);
-    }
-    setUploadedFiles(function (prevFiles) {
-      return _filterInstanceProperty(prevFiles).call(prevFiles, function (_ref2) {
-        var id = _ref2.id;
-        return id !== fileId;
-      });
-    });
-  }, [onRemove]);
+  };
   var filesListNode = useMemo(function () {
+    var handleFileDelete = function handleFileDelete(e, fileId) {
+      setFileChangeMessage('');
+      if (onRemove) {
+        onRemove(e, fileId);
+      }
+      setUploadedFiles(function (prevFiles) {
+        return _filterInstanceProperty(prevFiles).call(prevFiles, function (_ref2) {
+          var id = _ref2.id;
+          return id !== fileId;
+        });
+      });
+      setFileChangeStatus({
+        fileCount: 1,
+        status: FILE_CHANGE_STATUS.DELETED
+      });
+    };
     var filesToRender = uploadedFilesImperative || uploadedFiles;
     if (!(filesToRender !== null && filesToRender !== void 0 && filesToRender.length)) {
       return null;
     }
-    return _mapInstanceProperty(filesToRender).call(filesToRender, function (fileProps) {
+    return ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(filesToRender).call(filesToRender, function (fileProps) {
       return ___EmotionJSX(FileItem, _extends({
         handleFileDelete: handleFileDelete,
         isDisabled: isDisabled || isLoading,
@@ -137,8 +174,8 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
         textProps: textProps,
         helperTextId: helperTextId
       }, fileProps));
-    });
-  }, [uploadedFilesImperative, uploadedFiles, handleFileDelete, isDisabled, isLoading, textProps]);
+    }));
+  }, [helperTextId, isDisabled, isLoading, onRemove, textProps, uploadedFiles, uploadedFilesImperative]);
   var _useStatusClasses = useStatusClasses('fileInputFieldWrapper', _defineProperty({
       isDragActive: isDragActive,
       isLoading: isLoading
@@ -179,10 +216,16 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
       position: 'absolute'
     },
     "data-testid": "file-input-field__loader"
-  })), helperText && ___EmotionJSX(FieldHelperText, {
+  })), helperText && ___EmotionJSX(Box, {
+    "aria-label": helperText
+  }, ___EmotionJSX(FieldHelperText, {
     status: status,
     id: helperTextId
-  }, helperText));
+  }, helperText)), fileChangeMessage && ___EmotionJSX(Box, {
+    "aria-relevant": "all",
+    "aria-live": "assertive",
+    role: "status"
+  }, ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX("h1", null, fileChangeMessage))));
 });
 FileInputField.displayName = 'FileInputField';
 FileInputField.propTypes = _objectSpread(_objectSpread(_objectSpread({

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

@@ -187,7 +187,8 @@ test('passing helper text should display it and correct aria attributes on input
     status: statuses.ERROR,
     defaultFileList: [testFileObject]
   });
-  var helper = screen.getByText(testHelperText);
+  var helper = screen.getByRole('alert');
+  expect(helper).toHaveTextContent(testHelperText);
   expect(helper).toBeInTheDocument();
   expect(helper).toHaveClass("is-".concat(statuses.ERROR));
   var helperTextID = helper.getAttribute('id');

package/lib/components/FileInputField/FileItem.js

@@ -23,12 +23,12 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var FileItem = function FileItem(props) {
   var downloadLink = props.downloadLink,
     handleFileDelete = props.handleFileDelete,
+    helperTextId = props.helperTextId,
     id = props.id,
     isDisabled = props.isDisabled,
     name = props.name,
     status = props.status,
-    textProps = props.textProps,
-    helperTextId = props.helperTextId;
+    textProps = props.textProps;
   var handleDeleteButtonPress = useCallback(function (e) {
     return handleFileDelete(e, id);
   }, [id, handleFileDelete]);
@@ -76,11 +76,12 @@ var FileItem = function FileItem(props) {
     "aria-label": name,
     "data-testid": "file-uploaded__download-file-button",
     onPress: handleDownloadPress,
-    "aria-describedby": helperTextId
+    "aria-describedby": helperTextId,
+    "aria-live": "polite"
   }, ___EmotionJSX(Text, _extends({
     color: "active"
   }, textProps), name)), ___EmotionJSX(IconButton, {
-    "aria-label": "Delete ".concat(name, " file icon"),
+    "aria-label": "Delete ".concat(name),
     "data-testid": "file-uploaded__delete-file-button",
     isDisabled: isDisabled,
     onPress: handleDeleteButtonPress,
@@ -99,7 +100,7 @@ var FileItem = function FileItem(props) {
   }, visuallyHiddenProps, {
     download: true,
     ref: downloadRef,
-    "aria-label": "download",
+    "aria-label": "download ".concat(name),
     "data-testid": "file-uploaded__download-link",
     tabIndex: -1
   })));
@@ -111,6 +112,5 @@ FileItem.propTypes = _objectSpread({
   id: PropTypes.string,
   isDisabled: PropTypes.bool,
   name: PropTypes.string,
-  helperTextId: PropTypes.string,
   textProps: PropTypes.shape({})
 }, statusPropTypes);