@transferwise/components 46.74.1 → 46.75.0

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(

package/src/upload/steps/uploadImageStep/uploadImageStep.tsx

@@ -14,6 +14,7 @@ export interface UploadImageStepProps {
   usLabel: string;
   usPlaceholder: string;
   errorMessage?: string | string[];
+  errorIconLabel?: string;
 }
 
 export default class UploadImageStep extends PureComponent<UploadImageStepProps> {
@@ -34,7 +35,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
     if (errorMessage) {
       return (
         <div className="d-flex flex-column align-items-center">
-          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />
+          <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} iconLabel={null} />
         </div>
       );
     }
@@ -55,8 +56,16 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
   };
 
   render() {
-    const { isComplete, usAccept, usButtonText, usDisabled, usLabel, usPlaceholder, errorMessage } =
-      this.props;
+    const {
+      errorMessage,
+      isComplete,
+      errorIconLabel,
+      usAccept,
+      usButtonText,
+      usDisabled,
+      usLabel,
+      usPlaceholder,
+    } = this.props;
 
     return (
       <div className="droppable-default-card" aria-hidden={isComplete}>
@@ -88,7 +97,9 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
           {errorMessage && (
             <div className="upload-error-message">
               <div className="m-t-3 has-error">
-                <InlineAlert type={Sentiment.NEGATIVE}>{errorMessage}</InlineAlert>
+                <InlineAlert type={Sentiment.NEGATIVE} iconLabel={errorIconLabel}>
+                  {errorMessage}
+                </InlineAlert>
               </div>
             </div>
           )}