@transferwise/components 46.71.0 → 46.71.2

package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap

@@ -23,15 +23,15 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
     class="tw-avatar__content"
   >
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-briefcase "
       data-testid="briefcase-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -52,15 +52,15 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
     class="tw-avatar__content"
   >
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-person "
       data-testid="person-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -87,15 +87,15 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
         class="tw-avatar__content"
       >
         <span
-          aria-hidden="true"
           class="tw-icon tw-icon-person "
           data-testid="person-icon"
-          role="presentation"
         >
           <svg
+            aria-hidden="true"
             fill="currentColor"
             focusable="false"
             height="24"
+            role="none"
             viewBox="0 0 24 24"
             width="24"
           >
@@ -126,15 +126,15 @@ exports[`FlowNavigationAvatar with a name AND profileType with nothing passed re
     class="tw-avatar__content"
   >
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-person "
       data-testid="person-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >

package/src/button/Button.tsx

@@ -45,7 +45,7 @@ type ButtonProps = CommonProps &
   };
 
 type AnchorProps = CommonProps &
-  React.ComponentPropsWithRef<'a'> & {
+  Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
     as?: 'a';
   };
 

package/src/chips/__snapshots__/Chips.spec.tsx.snap

@@ -127,15 +127,15 @@ exports[`Chips Filter Chips renders as expected 1`] = `
         type="button"
       >
         <span
-          aria-hidden="true"
           class="tw-icon tw-icon-cross "
           data-testid="cross-icon"
-          role="presentation"
         >
           <svg
+            aria-hidden="true"
             fill="currentColor"
             focusable="false"
             height="16"
+            role="none"
             viewBox="0 0 24 24"
             width="16"
           >

package/src/circularButton/__snapshots__/CircularButton.spec.tsx.snap

@@ -11,15 +11,15 @@ exports[`CircularButton defaults renders a button of type accent and priority pr
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -48,15 +48,15 @@ exports[`CircularButton priorities renders primary buttons 1`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -85,15 +85,15 @@ exports[`CircularButton priorities renders primary buttons 2`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -122,15 +122,15 @@ exports[`CircularButton priorities renders primary buttons 3`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -159,15 +159,15 @@ exports[`CircularButton priorities renders secondary buttons 1`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -196,15 +196,15 @@ exports[`CircularButton priorities renders secondary buttons 2`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -233,15 +233,15 @@ exports[`CircularButton priorities renders secondary buttons 3`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -270,15 +270,15 @@ exports[`CircularButton types renders accent buttons 1`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -307,15 +307,15 @@ exports[`CircularButton types renders negative buttons 1`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -344,15 +344,15 @@ exports[`CircularButton types renders positive buttons 1`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >

package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap

@@ -39,15 +39,15 @@ exports[`BottomSheet renders content when open 1`] = `
                   type="button"
                 >
                   <span
-                    aria-hidden="true"
                     class="tw-icon tw-icon-cross "
                     data-testid="cross-icon"
-                    role="presentation"
                   >
                     <svg
+                      aria-hidden="true"
                       fill="currentColor"
                       focusable="false"
                       height="16"
+                      role="none"
                       viewBox="0 0 24 24"
                       width="16"
                     >

package/src/common/closeButton/__snapshots__/CloseButton.spec.tsx.snap

@@ -8,15 +8,15 @@ exports[`CloseButton renders as expected 1`] = `
     type="button"
   >
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-cross "
       data-testid="cross-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >

package/src/drawer/__snapshots__/Drawer.rtl.spec.tsx.snap

@@ -24,15 +24,15 @@ exports[`Drawer renders content when open 1`] = `
             type="button"
           >
             <span
-              aria-hidden="true"
               class="tw-icon tw-icon-cross "
               data-testid="cross-icon"
-              role="presentation"
             >
               <svg
+                aria-hidden="true"
                 fill="currentColor"
                 focusable="false"
                 height="24"
+                role="none"
                 viewBox="0 0 24 24"
                 width="24"
               >

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -38,15 +38,15 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
           type="button"
         >
           <span
-            aria-hidden="true"
             class="tw-icon tw-icon-cross "
             data-testid="cross-icon"
-            role="presentation"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               focusable="false"
               height="24"
+              role="none"
               viewBox="0 0 24 24"
               width="24"
             >
@@ -153,15 +153,15 @@ exports[`FlowNavigation renders as expected 1`] = `
           type="button"
         >
           <span
-            aria-hidden="true"
             class="tw-icon tw-icon-cross "
             data-testid="cross-icon"
-            role="presentation"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               focusable="false"
               height="24"
+              role="none"
               viewBox="0 0 24 24"
               width="24"
             >

package/src/instructionsList/InstructionsList.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '../test-utils';
+import { render, screen, within } from '../test-utils';
 
 import InstructionsList from '.';
 
@@ -34,8 +34,16 @@ describe('InstructionsList', () => {
 
     const instructions = container.querySelectorAll('.instruction');
     expect(instructions).toHaveLength(2);
-    expect(instructions[0]).toHaveAttribute('aria-label', dos[0]['aria-label']);
-    expect(instructions[1]).toHaveAttribute('aria-label', donts[0]['aria-label']);
+    expect(
+      within(instructions[0] as HTMLElement).getByRole('graphics-symbol', {
+        name: dos[0]['aria-label'],
+      }),
+    ).toBeInTheDocument();
+    expect(
+      within(instructions[1] as HTMLElement).getByRole('graphics-symbol', {
+        name: donts[0]['aria-label'],
+      }),
+    ).toBeInTheDocument();
   });
 
   it('should render donts first when sort is set to `dontsFirst`', () => {
@@ -48,7 +56,15 @@ describe('InstructionsList', () => {
 
     const instructions = container.querySelectorAll('.instruction');
     expect(instructions).toHaveLength(2);
-    expect(instructions[0]).toHaveAttribute('aria-label', donts[0]['aria-label']);
-    expect(instructions[1]).toHaveAttribute('aria-label', dos[0]['aria-label']);
+    expect(
+      within(instructions[0] as HTMLElement).getByRole('graphics-symbol', {
+        name: donts[0]['aria-label'],
+      }),
+    ).toBeInTheDocument();
+    expect(
+      within(instructions[1] as HTMLElement).getByRole('graphics-symbol', {
+        name: dos[0]['aria-label'],
+      }),
+    ).toBeInTheDocument();
   });
 });

package/src/instructionsList/InstructionsList.tsx

@@ -57,11 +57,19 @@ function Instruction({ item, type }: { item: ReactNode | InstructionNode; type:
   const isInstructionNode =
     typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
   return (
-    <li className="instruction" aria-label={isInstructionNode ? item['aria-label'] : undefined}>
+    <li className="instruction">
       {type === 'do' ? (
-        <DoIcon size={24} className={type} />
+        <DoIcon
+          size={24}
+          className={type}
+          title={isInstructionNode ? item['aria-label'] : undefined}
+        />
       ) : (
-        <DontIcon size={24} className={type} />
+        <DontIcon
+          size={24}
+          className={type}
+          title={isInstructionNode ? item['aria-label'] : undefined}
+        />
       )}
       <Body className="text-primary" type={Typography.BODY_LARGE}>
         {isInstructionNode ? item.content : item}

package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap

@@ -35,15 +35,15 @@ exports[`OverlayHeader renders as expected 1`] = `
           type="button"
         >
           <span
-            aria-hidden="true"
             class="tw-icon tw-icon-cross "
             data-testid="cross-icon"
-            role="presentation"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               focusable="false"
               height="24"
+              role="none"
               viewBox="0 0 24 24"
               width="24"
             >

package/src/snackbar/Snackbar.story.tsx

@@ -16,10 +16,8 @@ export default {
 };
 
 export const Basic = () => {
-  const timeout = number('timeout (ms)', 10000000);
-
   return (
-    <SnackbarProvider timeout={timeout}>
+    <SnackbarProvider>
       <SnackbarConsumer>
         {({ createSnackbar }) => (
           <Button

package/src/snackbar/Snackbar.tsx

@@ -95,7 +95,7 @@ export class Snackbar extends Component<SnackbarProps, SnackbarState> {
     const { timeout } = this.props;
 
     return (
-      <div className="snackbar">
+      <div className="snackbar" aria-live="assertive" role="alert">
         <CSSTransition
           nodeRef={this.bodyRef}
           in={visible}
@@ -107,13 +107,7 @@ export class Snackbar extends Component<SnackbarProps, SnackbarState> {
           }}
           unmountOnExit
         >
-          <Body
-            ref={this.bodyRef}
-            as="span"
-            className="snackbar__text"
-            role="status"
-            aria-live="assertive"
-          >
+          <Body ref={this.bodyRef} as="span" className="snackbar__text">
             {text}
             {action ? (
               <ActionButton className="snackbar__text__action" onClick={action.onClick}>

package/src/typeahead/Typeahead.tsx

@@ -36,7 +36,7 @@ export type TypeaheadOption<T = string> = {
   keepFocusOnSelect?: boolean;
 };
 
-export interface TypeaheadProps<T> extends WrappedComponentProps {
+export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
   id: string;
   name: string;
   addon?: ReactNode;
@@ -70,7 +70,9 @@ export interface TypeaheadProps<T> extends WrappedComponentProps {
   validateChip?: (chip: TypeaheadOption<T>) => boolean;
 }
 
-type TypeaheadPropsWithInputAttributes<T> = TypeaheadProps<T> & Partial<WithInputAttributesProps>;
+type TypeaheadPropsWithInputAttributes<T> = TypeaheadProps<T> &
+  Partial<WithInputAttributesProps> &
+  WrappedComponentProps;
 
 type TypeaheadState<T> = {
   selected: readonly TypeaheadOption<T>[];
@@ -536,7 +538,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
                 <button
                   type="button"
                   className="btn-unstyled"
-                  aria-label={this.props.intl.formatMessage(messages.clearLabel)}
+                  aria-label={this.props?.intl?.formatMessage(messages.clearLabel)}
                   onClick={this.clear}
                 >
                   <CrossIcon />

package/src/uploadInput/UploadInput.tsx

@@ -97,9 +97,7 @@ export type UploadInputProps = {
 } & Pick<
   UploadButtonProps,
   'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'
-> &
-  Pick<UploadItemProps, 'onDownload'> &
-  CommonProps;
+> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;
 
 interface UploadItemRef {
   focus: () => void;
@@ -386,7 +384,6 @@ const UploadInput = ({
               maxFiles={maxFiles}
               withEntries={Boolean(uploadedFiles.length)}
               onChange={addFiles}
-
             />
           </div>
         )}