@transferwise/components 46.74.1 → 46.76.0

package/src/alert/Alert.tsx

@@ -50,6 +50,11 @@ export interface AlertProps {
   className?: string;
   /** An optional icon. If not provided, we will default the icon to something appropriate for the type */
   icon?: React.ReactNode;
+  /**
+   * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)
+   * announced by the screen readers
+   * */
+  statusIconLabel?: string;
   /** Title for the alert component */
   title?: string;
   /** The main body of the alert. Accepts plain text and bold words specified with **double stars */
@@ -59,8 +64,18 @@ export interface AlertProps {
   /** The type dictates which icon and colour will be used */
   type?: AlertType;
   variant?: `${Variant}`;
-  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */
+  /**
+   * Controls rendering of the Alert component. <br />
+   * Toggle this prop instead using conditional rendering and logical AND (&&)
+   * operator, to make the component work with screen readers.
+   * @deprecated use `dynamicRender`
+   * */
   active?: boolean;
+  /**
+   * Toggle this prop when dealing with multiple, dynamic Alerts, to make them
+   * work with screen readers. This is especially helpful for the BFF use cases.
+   * */
+  dynamicRender?: boolean;
   /** @deprecated Use `InlineAlert` instead. */
   arrow?: `${AlertArrowPosition}`;
   /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */
@@ -91,6 +106,7 @@ export default function Alert({
   className,
   dismissible,
   icon,
+  statusIconLabel,
   onDismiss,
   message,
   size,
@@ -98,6 +114,7 @@ export default function Alert({
   type = 'neutral',
   variant = 'desktop',
   active = true,
+  dynamicRender = false,
 }: AlertProps) {
   useEffect(() => {
     if (arrow !== undefined) {
@@ -142,17 +159,20 @@ export default function Alert({
 
   const [shouldShow, setShouldShow] = useState<boolean>();
   useEffect(() => {
-    if (shouldShow === undefined || !active) {
+    if ((shouldShow === undefined && !dynamicRender) || !active) {
       setShouldShow(active);
     } else {
       setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);
     }
-  }, [active, shouldShow]);
+  }, [active, shouldShow, dynamicRender]);
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);
 
   return (
-    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>
+    <div
+      role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}
+      className="wds-alert__liveRegion"
+    >
       {shouldShow && (
         <div
           className={clsx(
@@ -189,7 +209,7 @@ export default function Alert({
             {icon ? (
               <div className="alert__icon">{icon}</div>
             ) : (
-              <StatusIcon size={Size.LARGE} sentiment={resolvedType} />
+              <StatusIcon size={Size.LARGE} sentiment={resolvedType} iconLabel={statusIconLabel} />
             )}
             <div className="alert__message">
               <div>

package/src/field/Field.spec.tsx

@@ -71,6 +71,25 @@ describe('Field', () => {
     expect(screen.getByLabelText(/Phone number/)).toHaveAttribute('aria-describedby');
   });
 
+  it("should allow for InlineAlert's StatusIcon override via `messageIconLabel` prop", () => {
+    const customIconLabel = 'My custom icon label';
+
+    render(
+      <Field
+        label="Phone number"
+        description="This is help text"
+        sentiment="negative"
+        message="This is error text"
+        messageIconLabel={customIconLabel}
+      >
+        <Input />
+      </Field>,
+    );
+
+    expect(screen.queryByRole('graphics-symbol', { name: 'Error.' })).not.toBeInTheDocument();
+    expect(screen.getByRole('graphics-symbol', { name: customIconLabel })).toBeInTheDocument();
+  });
+
   it('should show or hide (Optional) suffix depending on required prop', () => {
     render(
       <Field label="Phone number" required={false} description="This is help text">

package/src/field/Field.story.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { Input } from '../inputs/Input';
-import { Field } from './Field';
+import { Field, FieldProps } from './Field';
 import { Sentiment } from '../common';
 import DateInput from '../dateInput';
 import { fn } from '@storybook/test';
@@ -14,9 +14,14 @@ export default {
   component: Field,
   title: 'Field',
   tags: ['autodocs'],
+  argTypes: {
+    messageIconLabel: {
+      control: 'text',
+    },
+  },
 };
 
-export const Basic = () => {
+export const Basic = (args: FieldProps) => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
     <div className="row">
@@ -40,6 +45,7 @@ export const Basic = () => {
           description="This a field Description"
           sentiment={Sentiment.NEGATIVE}
           message="Validation error, please take a look"
+          messageIconLabel={args.messageIconLabel}
         >
           <Input value={value} onChange={({ target }) => setValue(target.value)} />
         </Field>
@@ -74,6 +80,7 @@ export const Basic = () => {
           description="This a TextArea Description"
           message={lorem10}
           sentiment="negative"
+          messageIconLabel={args.messageIconLabel}
         >
           <TextArea />
         </Field>
@@ -93,7 +100,7 @@ export const Basic = () => {
   );
 };
 
-export const WithStatusMessages = () => {
+export const WithStatusMessages = (args: FieldProps) => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
     <div>
@@ -101,6 +108,7 @@ export const WithStatusMessages = () => {
         label="Text Input with Positive Message"
         sentiment={Sentiment.POSITIVE}
         message="Positive message"
+        messageIconLabel={args.messageIconLabel}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -109,6 +117,7 @@ export const WithStatusMessages = () => {
         label="Text Input with Warning Message"
         sentiment={Sentiment.WARNING}
         message="Warning message"
+        messageIconLabel={args.messageIconLabel}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -117,6 +126,7 @@ export const WithStatusMessages = () => {
         label="Text Input with Validation Error"
         sentiment={Sentiment.NEGATIVE}
         message="This is a required field"
+        messageIconLabel={args.messageIconLabel}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -127,6 +137,7 @@ export const WithStatusMessages = () => {
         hint="This is a helpful message"
         sentiment={Sentiment.NEGATIVE}
         message="Validation error, please take a look"
+        messageIconLabel={args.messageIconLabel}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -136,12 +147,17 @@ export const WithStatusMessages = () => {
         label="Text Input with deprecated `error` & `hint` props"
         hint="This is a helpful message"
         error="Validation error, please take a look"
+        messageIconLabel={args.messageIconLabel}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
 
       {/* instance of info via `message` property, this is rare case (e.g MoneyInput) */}
-      <Field label="Text Input with Info under the field" message="This is a helpful message">
+      <Field
+        label="Text Input with Info under the field"
+        message="This is a helpful message"
+        messageIconLabel={args.messageIconLabel}
+      >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
     </div>

package/src/field/Field.tsx

@@ -20,6 +20,11 @@ export type FieldProps = {
   /** @deprecated use `description` prop instead */
   hint?: React.ReactNode;
   message?: React.ReactNode;
+  /**
+   * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)
+   * announced by the screen readers
+   * */
+  messageIconLabel?: string;
   description?: React.ReactNode;
   /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
   error?: React.ReactNode;
@@ -33,6 +38,7 @@ export const Field = ({
   label,
   required = true,
   message: propMessage,
+  messageIconLabel,
   hint,
   description = hint,
   sentiment: propType = Sentiment.NEUTRAL,
@@ -97,7 +103,7 @@ export const Field = ({
               )}
 
               {message && (
-                <InlineAlert type={sentiment} id={messageId}>
+                <InlineAlert type={sentiment} id={messageId} iconLabel={messageIconLabel}>
                   {message}
                 </InlineAlert>
               )}

package/src/i18n/en.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "No results found",
   "neptune.SelectOption.action.label": "Choose",
   "neptune.SelectOption.selected.action.label": "Change chosen option",
+  "neptune.StatusIcon.iconLabel.error": "Error:",
+  "neptune.StatusIcon.iconLabel.information": "Information:",
+  "neptune.StatusIcon.iconLabel.pending": "Pending:",
+  "neptune.StatusIcon.iconLabel.success": "Success:",
+  "neptune.StatusIcon.iconLabel.warning": "Warning:",
   "neptune.Summary.statusDone": "Item done",
   "neptune.Summary.statusNotDone": "Item to do",
   "neptune.Summary.statusPending": "Item pending",

package/src/inlineAlert/InlineAlert.spec.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { Sentiment } from '../common';
 import { render, screen, mockMatchMedia } from '../test-utils';
 
@@ -81,4 +80,16 @@ describe('InlineAlert', () => {
       expect(screen.getByTestId('status-icon')).toBeInTheDocument();
     });
   });
+
+  describe('other props', () => {
+    it('should respect `iconLabel` override', () => {
+      const customLabel = 'Custom Label';
+      render(
+        <InlineAlert type={Sentiment.WARNING} iconLabel={customLabel}>
+          {message}
+        </InlineAlert>,
+      );
+      expect(screen.getByLabelText(customLabel)).toBeInTheDocument();
+    });
+  });
 });

package/src/inlineAlert/InlineAlert.tsx

@@ -8,6 +8,7 @@ import Body from '../body';
 export interface InlineAlertProps {
   id?: string;
   type?: `${Sentiment}`;
+  iconLabel?: string;
   className?: string;
   children: ReactNode;
 }
@@ -32,6 +33,7 @@ const iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([
 export default function InlineAlert({
   id,
   type = 'neutral',
+  iconLabel,
   className,
   children,
 }: InlineAlertProps) {
@@ -46,7 +48,9 @@ export default function InlineAlert({
         className,
       )}
     >
-      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}
+      {iconTypes.has(type) && (
+        <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />
+      )}
       <div>{children}</div>
     </Body>
   );

package/src/main.css

@@ -216,6 +216,9 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):focus {
   box-shadow: none;
 }
+.wds-alert__liveRegion {
+  display: contents;
+}
 .tw-avatar {
   position: relative;
   -webkit-user-select: none;

package/src/main.less

@@ -1,6 +1,7 @@
 @import "./criticalBanner/CriticalCommsBanner.less";
 @import "./accordion/Accordion.less";
 @import "./actionButton/ActionButton.less";
+@import "./alert/Alert.less";
 @import "./avatar/Avatar.less";
 @import "./badge/Badge.less";
 @import "./button/Button.less";

package/src/statusIcon/StatusIcon.docs.mdx

@@ -0,0 +1,28 @@
+import { Meta, Source } from '@storybook/blocks';
+
+<Meta title="Other/StatusIcon/Accessibility" />
+
+# Accessibility
+
+By default, the component offers accessible names for all the icons, to ensure their meaning is conveyed to sighted and non-sighted users alike. The built-in labels are derived from the provided `sentiment` prop (as listed below), but can be overridden via `iconLabel` prop:
+
+<Source code={`
+Sentiment.NEGATIVE -> 'Error:'
+Sentiment.POSITIVE -> 'Success:'
+Sentiment.WARNING -> 'Warning:'
+Sentiment.PENDING -> 'Pending:'
+Sentiment.NEUTRAL -> 'Information:'
+
+// deprecated
+Sentiment.ERROR -> 'Error:'
+Sentiment.INFO -> 'Information:'
+Sentiment.SUCCESS -> 'Success:'
+`} dark />
+
+The purpose of the colon (`:`) is to make the screen reader briefly pause and separate the icon label from the rest of the content.
+
+## Presentational icons
+
+In some very rare cases, where the sentiment/status is already clearly communicated for **all** users (e.g. a duplicated icon in the `Upload` component), it might be more user-friendly to treat the `StatusIcon` as purely presentational.
+
+To achieve it, simply set the `iconLabel` to `null` and that will result in `role="none" aria-hidden` applied to the icon.

package/src/statusIcon/StatusIcon.messages.ts

@@ -0,0 +1,34 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  errorLabel: {
+    id: 'neptune.StatusIcon.iconLabel.error',
+    defaultMessage: 'Error:',
+    description:
+      'Visually hidden label read by screen readers, describing the Error icon – normally a prefix to remaining visible content, e.g. validation result.',
+  },
+  successLabel: {
+    id: 'neptune.StatusIcon.iconLabel.success',
+    defaultMessage: 'Success:',
+    description:
+      'Visually hidden label read by screen readers, describing the Success icon – normally a prefix to remaining visible content, e.g. validation result.',
+  },
+  warningLabel: {
+    id: 'neptune.StatusIcon.iconLabel.warning',
+    defaultMessage: 'Warning:',
+    description:
+      'Visually hidden label read by screen readers, describing the Warning icon – normally a prefix to remaining visible content, e.g. validation result.',
+  },
+  pendingLabel: {
+    id: 'neptune.StatusIcon.iconLabel.pending',
+    defaultMessage: 'Pending:',
+    description:
+      'Visually hidden label read by screen readers, describing the Pending icon – normally a prefix to remaining visible content, e.g. validation result.',
+  },
+  informationLabel: {
+    id: 'neptune.StatusIcon.iconLabel.information',
+    defaultMessage: 'Information:',
+    description:
+      'Visually hidden label read by screen readers, describing the Information icon – normally a prefix to remaining visible content, e.g. validation result.',
+  },
+});

package/src/statusIcon/StatusIcon.spec.tsx

@@ -1,19 +1,21 @@
-import { Sentiment, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { Sentiment, Size } from '../common';
 import { render, cleanup, screen, mockMatchMedia } from '../test-utils';
 
-import StatusIcon from '.';
+import StatusIcon, { StatusIconProps } from '.';
 
 mockMatchMedia();
 
 describe('StatusIcon', () => {
   const renderStatusIcon = (props?: {
-    sentiment?: Sentiment;
-    size?: SizeLarge | SizeMedium | SizeSmall;
+    sentiment?: StatusIconProps['sentiment'];
+    size?: StatusIconProps['size'];
+    iconLabel?: StatusIconProps['iconLabel'];
   }) => {
     return render(
       <StatusIcon
         sentiment={props?.sentiment || Sentiment.NEUTRAL}
         size={props?.size || Size.MEDIUM}
+        iconLabel={props?.iconLabel}
       />,
     );
   };
@@ -79,4 +81,37 @@ describe('StatusIcon', () => {
     renderStatusIcon();
     expect(screen.getByTestId('info-icon')).toHaveClass('light');
   });
+
+  describe('accessible name', () => {
+    it.each([
+      ['Error', Sentiment.NEGATIVE],
+      ['Success', Sentiment.POSITIVE],
+      ['Warning', Sentiment.WARNING],
+      ['Pending', Sentiment.PENDING],
+      ['Information', Sentiment.NEUTRAL],
+      ['Error', Sentiment.ERROR],
+      ['Information', Sentiment.INFO],
+      ['Success', Sentiment.SUCCESS],
+    ])("should set '%s' as an accessible name for the '%s' sentiment", (label, sentiment) => {
+      renderStatusIcon({ sentiment });
+
+      expect(screen.getByLabelText(`${label}:`)).toBeInTheDocument();
+    });
+
+    it('should allow for `iconLabel` overrides', () => {
+      const iconLabel = 'Custom label';
+      renderStatusIcon({ sentiment: Sentiment.NEGATIVE, iconLabel });
+
+      expect(screen.getByLabelText(iconLabel)).toBeInTheDocument();
+      expect(screen.queryByLabelText(`Error:`)).not.toBeInTheDocument();
+    });
+
+    it('should allow for `iconLabel` to be `null` to keep the icon presentational', () => {
+      const iconLabel = null;
+      renderStatusIcon({ sentiment: Sentiment.NEGATIVE, iconLabel });
+
+      expect(screen.queryByRole(`graphics-symbol`)).not.toBeInTheDocument();
+      expect(screen.queryByLabelText(`Error:`)).not.toBeInTheDocument();
+    });
+  });
 });

package/src/statusIcon/StatusIcon.story.tsx

@@ -7,16 +7,25 @@ import StatusIcon from './StatusIcon';
 export default {
   component: StatusIcon,
   title: 'Other/StatusIcon',
+  tags: ['autodocs'],
+  argTypes: {
+    iconLabel: {
+      control: 'text',
+    },
+  },
 } satisfies Meta<typeof StatusIcon>;
 
 type Story = StoryObj<typeof StatusIcon>;
 
-export const Basic: Story = {
-  render: (args) => (
-    <span style={{ display: 'flex' }}>
-      <StatusIcon {...args} />
-    </span>
-  ),
+export const Basic: Story = {};
+
+/**
+ * Ignored by the screen readers. Use with care.
+ */
+export const Presentational: Story = {
+  args: {
+    iconLabel: null,
+  },
 };
 
 export const Variants: Story = {

package/src/statusIcon/StatusIcon.tsx

@@ -1,34 +1,80 @@
 import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
 import { clsx } from 'clsx';
+import { useIntl } from 'react-intl';
 
 import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';
 import Circle, { CircleProps } from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';
 
+import messages from './StatusIcon.messages';
+
 export type StatusIconProps = {
   sentiment: `${Sentiment}`;
   size: SizeSmall | SizeMedium | SizeLarge;
+  /**
+   * Override for the sentiment's-derived, default, accessible
+   * name announced by the screen readers. <br />
+   * Using `null` will render the icon purely presentational.
+   * */
+  iconLabel?: string | null;
 };
 
-const iconTypeMap = {
-  positive: Check,
-  neutral: Info,
-  warning: Alert,
-  negative: Cross,
-  pending: ClockBorderless,
-  info: Info,
-  error: Cross,
-  success: Check,
-} satisfies Record<`${Sentiment}`, React.ElementType>;
-
 const mapLegacySize = {
   [String(Size.SMALL)]: 16,
   [String(Size.MEDIUM)]: 40,
   [String(Size.LARGE)]: 48,
 } satisfies Record<string, CircleProps['size']>;
 
-const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIconProps) => {
-  const Icon = iconTypeMap[sentiment];
+const StatusIcon = ({
+  sentiment = 'neutral',
+  size: sizeProp = 'md',
+  iconLabel,
+}: StatusIconProps) => {
+  const intl = useIntl();
+
+  const iconMetaBySentiment: Record<
+    `${Sentiment}`,
+    {
+      Icon: React.ElementType;
+      defaultIconLabel: string;
+    }
+  > = {
+    [Sentiment.NEGATIVE]: {
+      Icon: Cross,
+      defaultIconLabel: intl.formatMessage(messages.errorLabel),
+    },
+    [Sentiment.POSITIVE]: {
+      Icon: Check,
+      defaultIconLabel: intl.formatMessage(messages.successLabel),
+    },
+    [Sentiment.WARNING]: {
+      Icon: Alert,
+      defaultIconLabel: intl.formatMessage(messages.warningLabel),
+    },
+    [Sentiment.PENDING]: {
+      Icon: ClockBorderless,
+      defaultIconLabel: intl.formatMessage(messages.pendingLabel),
+    },
+    [Sentiment.NEUTRAL]: {
+      Icon: Info,
+      defaultIconLabel: intl.formatMessage(messages.informationLabel),
+    },
+    // deprecated
+    [Sentiment.ERROR]: {
+      Icon: Cross,
+      defaultIconLabel: intl.formatMessage(messages.errorLabel),
+    },
+    [Sentiment.INFO]: {
+      Icon: Info,
+      defaultIconLabel: intl.formatMessage(messages.informationLabel),
+    },
+    [Sentiment.SUCCESS]: {
+      Icon: Check,
+      defaultIconLabel: intl.formatMessage(messages.successLabel),
+    },
+  };
+  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];
+
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
@@ -39,7 +85,10 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIcon
       data-testid="status-icon"
       className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}
     >
-      <Icon className={clsx('status-icon', iconColor)} />
+      <Icon
+        className={clsx('status-icon', iconColor)}
+        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}
+      />
     </Circle>
   );
 };

package/src/upload/Upload.spec.js

@@ -7,6 +7,7 @@ import { ANIMATION_DURATION_IN_MS } from '../processIndicator';
 import { CompleteStep, UploadImageStep, ProcessingStep } from './steps';
 
 import Upload from '.';
+import { Cross } from '@transferwise/icons';
 
 mockMatchMedia();
 
@@ -252,6 +253,7 @@ describe('Upload', () => {
         ...UPLOADIMAGE_STEP_PROPS,
         isComplete: false,
         errorMessage: 'csFailureText',
+        errorIconLabel: undefined,
         usButtonText: 'Try again',
         usHelpImage: null,
       });
@@ -282,5 +284,22 @@ describe('Upload', () => {
 
       expect(props.onSuccess).toHaveBeenCalledTimes(1);
     });
+
+    it('should respect `errorIconLabel` override', async () => {
+      const errorIconLabel = 'Custom error icon label';
+      component = mount(<Upload {...props} errorIconLabel={errorIconLabel} />);
+      const upload = component.children();
+      asyncFileRead.mockImplementation(async () => {
+        throw 'An error';
+      });
+
+      await act(async () => {
+        await upload.instance().fileDropped(TEST_FILE);
+      });
+      await waitForUpload();
+      component.update();
+
+      expect(component.find(Cross).at(1).prop('title')).toBe(errorIconLabel);
+    });
   });
 });

package/src/upload/Upload.tsx

@@ -56,6 +56,11 @@ export interface UploadProps extends WrappedComponentProps {
   usHelpImage?: React.ReactNode;
   usLabel?: string;
   usPlaceholder?: string;
+  /**
+   * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)
+   * announced by the screen readers
+   * */
+  errorIconLabel?: string;
   /** @deprecated Only a single variant exists, please remove this prop. */
   uploadStep?: `${UploadStep}`;
   onCancel?: () => void;
@@ -338,6 +343,7 @@ export class Upload extends Component<UploadProps, UploadState> {
       csSuccessText,
       size,
       intl,
+      errorIconLabel,
     } = this.props;
 
     const {
@@ -422,6 +428,7 @@ export class Upload extends Component<UploadProps, UploadState> {
                 ? response.status
                 : undefined,
             )}
+            errorIconLabel={errorIconLabel}
           />
         )}
         {isProcessing && (

package/src/upload/steps/uploadImageStep/uploadImageStep.spec.js

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import StatusIcon from '../../../statusIcon/StatusIcon';
 
 import UploadImageStep from '.';
+import { InlineAlert } from '../../../index';
 
 describe('uploadImageStep', () => {
   const UPLOADIMAGE_STEP_PROPS = {
@@ -66,6 +67,18 @@ describe('uploadImageStep', () => {
     expect(component.find('.test-image')).toHaveLength(1);
   });
 
+  it('should respect `errorIconLabel` override', () => {
+    const errorIconLabel = 'Error icon label';
+    component = shallow(
+      <UploadImageStep
+        {...UPLOADIMAGE_STEP_PROPS}
+        errorMessage="Maximum filesize is 2MB."
+        errorIconLabel={errorIconLabel}
+      />,
+    );
+    expect(component.find(InlineAlert).prop('iconLabel')).toBe(errorIconLabel);
+  });
+
   describe('when errorMessage is not empty', () => {
     it('renders errorMessage and icon when error is true', () => {
       component = shallow(