npm - @transferwise/components - Versions diffs - 45.15.0 → 45.15.1 - Mend

@transferwise/components 45.15.0 → 45.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/src/phoneNumberInput/PhoneNumberInput.js CHANGED Viewed

@@ -157,6 +157,7 @@ const PhoneNumberInput = (props) => {
         <div className={`input-group input-group-${size}`}>
           <input
             id={id}
+            autoComplete="tel-national"
             name="phoneNumber"
             inputMode="numeric"
             value={internalValue.suffix}

package/src/snackbar/Snackbar.js CHANGED Viewed

@@ -91,7 +91,12 @@ export class Snackbar extends Component {
           }}
           unmountOnExit
         >
-          <Body ref={this.bodyRef} as="span" className={`snackbar__text snackbar__text--${theme}`}>
+          <Body
+            ref={this.bodyRef}
+            as="span"
+            className={`snackbar__text snackbar__text--${theme}`}
+            aria-live="polite"
+          >
             {text}
             {action ? (
               <ActionButton className="snackbar__text__action" onClick={action.onClick}>

package/src/snackbar/Snackbar.spec.js CHANGED Viewed

@@ -71,8 +71,6 @@ describe('Snackbar', () => {
     const snackbarWithNode = () => componentWithNode.find(Snackbar);
     componentWithNode.find('.button-trigger').simulate('click');
     expect(snackbarWithNode().text()).toContain('test');
-    expect(snackbarWithNode().html()).toMatchSnapshot();
   });
   it('displays a single snack for the given duration with the given text', async () => {
@@ -107,6 +105,6 @@ describe('Snackbar', () => {
     );
     const snackbarWithNode = () => componentWithNode.find(Snackbar);
     componentWithNode.find('.button-trigger').simulate('click');
-    expect(snackbarWithNode().html()).toMatchSnapshot();
+    expect(snackbarWithNode().prop('theme')).toBe('dark');
   });
 });

package/src/tabs/Tabs.js CHANGED Viewed

@@ -488,7 +488,8 @@ class Tabs extends Component {
                 })}
                 {translateLineX ? (
                   <li
-                    className={classNames('tabs__line')}
+                    role="none"
+                    className="tabs__line"
                     style={{
                       width: this.getTabLineWidth(),
                       transform: isRTL

package/src/upload/Upload.js CHANGED Viewed

@@ -344,7 +344,7 @@ class Upload extends Component {
           />
         )}
         {!isProcessing && (
-          <div className="droppable-dropping-card droppable-card">
+          <div className="droppable-dropping-card droppable-card" aria-live="polite">
             <div className="droppable-card-content">
               <div className="circle circle-sm text-primary">
                 <PlusIcon size="16" />

package/src/upload/steps/completeStep/completeStep.js CHANGED Viewed

@@ -26,7 +26,10 @@ const CompleteStep = (props) => {
   return (
     <div className="droppable-complete-card droppable-card" aria-hidden={!isComplete}>
       <div className="droppable-card-content">
-        <div className="droppable-card-content d-flex flex-column align-items-center">
+        <div
+          className="droppable-card-content d-flex flex-column align-items-center"
+          aria-live="polite"
+        >
           {isError ? (
             <>
               {isModern ? (

package/src/upload/steps/processingStep/processingStep.js CHANGED Viewed

@@ -45,6 +45,7 @@ const ProcessingStep = (props) => {
             'm-b-2': isModern,
           })}
           type={Typography.TITLE_BODY}
+          aria-live="polite"
         >
           {psProcessingText}
         </Title>

package/src/uploadInput/uploadItem/UploadItem.tsx CHANGED Viewed

@@ -134,7 +134,7 @@ const UploadItem = ({
           singleFileUpload={singleFileUpload}
           onDownload={onDownloadFile}
         >
-          <div className="np-upload-button">
+          <div className="np-upload-button" aria-live="polite">
             <div className="media">
               <div className="np-upload-icon media-left">{getIcon()}</div>
               <div className="media-body text-xs-left" data-testid={TEST_IDS.mediaBody}>

package/build/types/common/focusBoundary/utils/getFocusableElements.d.ts DELETED Viewed

	@@ -1,2 +0,0 @@
1	- export function getFocusableElements(focusBoundaryContainer: Node): object;
2	- //# sourceMappingURL=getFocusableElements.d.ts.map

package/build/types/common/focusBoundary/utils/getFocusableElements.d.ts.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"getFocusableElements.d.ts","sourceRoot":"","sources":["../../../../../src/common/focusBoundary/utils/getFocusableElements.js"],"names":[],"mappings":"AAOO,6DAJI,IAAI,GACF,MAAM,CAoBlB"}

package/build/types/common/focusBoundary/utils/index.d.ts DELETED Viewed

@@ -1,3 +0,0 @@
-export { getFocusableElements } from "./getFocusableElements";
-export { resetFocus } from "./resetFocus";
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/focusBoundary/utils/index.d.ts.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/focusBoundary/utils/index.js"],"names":[],"mappings":""}

package/build/types/common/focusBoundary/utils/resetFocus.d.ts DELETED Viewed

	@@ -1,2 +0,0 @@
1	- export function resetFocus({ focusableEls: { first, last }, event }: object): void;
2	- //# sourceMappingURL=resetFocus.d.ts.map

package/build/types/common/focusBoundary/utils/resetFocus.d.ts.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"resetFocus.d.ts","sourceRoot":"","sources":["../../../../../src/common/focusBoundary/utils/resetFocus.js"],"names":[],"mappings":"AAOO,qEAJI,MAAM,QAmBhB"}

package/src/common/focusBoundary/FocusBoundary.spec.tsx DELETED Viewed

@@ -1,66 +0,0 @@
-import { render, screen, userEvent } from '../../test-utils';
-import FocusBoundary from './FocusBoundary';
-const props = {
-  onClose: jest.fn(),
-};
-describe('FocusBoundary', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  it('renders component', () => {
-    const { container } = render(
-      <FocusBoundary {...props}>
-        <a href="test">Test</a>
-      </FocusBoundary>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-  it('focus on container by default', () => {
-    render(
-      <>
-        <a href="test">not focusable</a>
-        <FocusBoundary {...props}>
-          <a href="test">Test</a>
-        </FocusBoundary>
-      </>,
-    );
-    expect(focusBoundary()).toHaveFocus();
-  });
-  it('traps the focus when user presses tab', () => {
-    render(
-      <>
-        <a href="test">not focusable</a>
-        <FocusBoundary {...props}>
-          <a href="test">firstFocusable</a>
-          <a href="test">lastFocusable</a>
-        </FocusBoundary>
-      </>,
-    );
-    userEvent.tab();
-    expect(firstFocusableElement()).toHaveFocus();
-    userEvent.tab();
-    expect(lastFocusableElement()).toHaveFocus();
-    userEvent.tab();
-    expect(firstFocusableElement()).toHaveFocus();
-    userEvent.tab({ shift: true });
-    expect(lastFocusableElement()).toHaveFocus();
-    userEvent.tab({ shift: true });
-    expect(firstFocusableElement()).toHaveFocus();
-  });
-  const firstFocusableElement = () => screen.getByText('firstFocusable');
-  const lastFocusableElement = () => screen.getByText('lastFocusable');
-  const focusBoundary = () => document.querySelector('.np-focus-boundary');
-});

package/src/common/focusBoundary/__snapshots__/FocusBoundary.spec.tsx.snap DELETED Viewed

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`FocusBoundary renders component 1`] = `
-<div>
-  <div
-    class="np-focus-boundary outline-none"
-    tabindex="-1"
-  >
-    <a
-      href="test"
-    >
-      Test
-    </a>
-  </div>
-</div>
-`;

package/src/common/focusBoundary/utils/getFocusableElements.js DELETED Viewed

@@ -1,25 +0,0 @@
-/**
- * This function returns the first and the last focusable elements within a node.
- *
- * @param {Node} focusBoundaryContainer - the area that contains focused elements.
- * @returns {object} focusableEls - which contains the first focusable element and the last focusable element. First and last can be the same element if area contains one or none focusable element.
- */
-export const getFocusableElements = (focusBoundaryContainer) => {
-  const focusableEls = { first: focusBoundaryContainer, last: focusBoundaryContainer };
-  if (focusBoundaryContainer?.querySelectorAll) {
-    const allEls = [
-      ...focusBoundaryContainer.querySelectorAll(
-        'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
-      ),
-    ].filter((element) => !element.hasAttribute('disabled'));
-    if (allEls.length > 0) {
-      [focusableEls.first] = allEls;
-      focusableEls.last = allEls[allEls.length - 1];
-    }
-  }
-  return focusableEls;
-};

package/src/common/focusBoundary/utils/getFocusableElements.spec.js DELETED Viewed

@@ -1,51 +0,0 @@
-import { cleanup, render, screen } from '../../../test-utils';
-import { getFocusableElements } from './getFocusableElements';
-describe('getFocusableElements', () => {
-  afterEach(() => {
-    cleanup();
-  });
-  it('returns first and last focusable element', () => {
-    const { container } = render(
-      <>
-        <div>another element</div>
-        <a href="test">first</a>
-        <div>another element</div>
-        <a href="test">middle</a>
-        <div>another element</div>
-        <a href="test">last</a>
-        <div>another element</div>
-      </>,
-    );
-    getFocusableElements(container);
-    expect(getFocusableElements(container)).toStrictEqual({
-      first: first(),
-      last: last(),
-    });
-  });
-  it('returns container if there are no focusable elements', () => {
-    const { container } = render(
-      <>
-        <div>another element</div>
-      </>,
-    );
-    getFocusableElements(container);
-    expect(getFocusableElements(container)).toStrictEqual({
-      first: container,
-      last: container,
-    });
-  });
-  it('returns undefined if container is not provided', () => {
-    getFocusableElements();
-    expect(getFocusableElements()).toStrictEqual({
-      first: undefined,
-      last: undefined,
-    });
-  });
-  const first = () => screen.getByText('first');
-  const last = () => screen.getByText('last');
-});

package/src/common/focusBoundary/utils/index.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- export { getFocusableElements } from './getFocusableElements';
2	- export { resetFocus } from './resetFocus';

package/src/common/focusBoundary/utils/resetFocus.js DELETED Viewed

@@ -1,23 +0,0 @@
-/**
- * This function resets the focus to either last of first focusable elements within a node.
- *
- * @param {object} focusableEls - contains the first last of first focusable elements within a node.
- * @param {object} event - the triggered event
- */
-export const resetFocus = ({ focusableEls: { first, last }, event }) => {
-  const { activeElement } = document;
-  if (event.shiftKey && activeElement === first) {
-    if (last) {
-      last.focus();
-    }
-    event.preventDefault();
-  }
-  if (!event.shiftKey && activeElement === last) {
-    if (first) {
-      first.focus();
-    }
-    event.preventDefault();
-  }
-};

package/src/common/focusBoundary/utils/resetFocus.spec.js DELETED Viewed

@@ -1,103 +0,0 @@
-import { cleanup, render, screen, userEvent } from '../../../test-utils';
-import { fakeKeyDownEvent } from '../../fakeEvents';
-import { resetFocus } from './resetFocus';
-describe('resetFocus', () => {
-  beforeEach(() => {
-    render(
-      <>
-        <a href="test">first</a>
-        <a href="test">middle</a>
-        <a href="test">last</a>
-      </>,
-    );
-  });
-  afterEach(() => {
-    cleanup();
-  });
-  it('set focus to first element when last element is focused and event is tab', () => {
-    focusOnLast();
-    resetFocus({
-      focusableEls: { first: first(), last: last() },
-      event: fakeKeyDownEvent({ shiftKey: false }),
-    });
-    expect(first()).toHaveFocus();
-  });
-  it('set focus to last element when first element is focused and event is shift + tab', () => {
-    focusOnFirst();
-    resetFocus({
-      focusableEls: { first: first(), last: last() },
-      event: fakeKeyDownEvent({ shiftKey: true }),
-    });
-    expect(last()).toHaveFocus();
-  });
-  it(`doesn't change focus when first element is focused and event is tab`, () => {
-    focusOnFirst();
-    resetFocus({
-      focusableEls: { first: first(), last: last() },
-      event: fakeKeyDownEvent(),
-    });
-    expect(first()).toHaveFocus();
-  });
-  it(`doesn't change focus when last element is focused and event is shift+tab`, () => {
-    focusOnLast();
-    resetFocus({
-      focusableEls: { first: first(), last: last() },
-      event: fakeKeyDownEvent({ shiftKey: true }),
-    });
-    expect(last()).toHaveFocus();
-  });
-  it(`doesn't change focus when middle element is focused and event is shift+tab or tab`, () => {
-    focusOnMiddle();
-    resetFocus({
-      focusableEls: { first: first(), last: last() },
-      event: fakeKeyDownEvent({ shiftKey: true }),
-    });
-    expect(middle()).toHaveFocus();
-    resetFocus({
-      focusableEls: { first: first(), last: last() },
-      event: fakeKeyDownEvent(),
-    });
-    expect(middle()).toHaveFocus();
-  });
-  it(`doesn't change focus when first is the only element provided`, () => {
-    focusOnFirst();
-    resetFocus({
-      focusableEls: { first: first(), last: undefined },
-      event: fakeKeyDownEvent({ shiftKey: true }),
-    });
-    expect(first()).toHaveFocus();
-  });
-  it(`doesn't change focus when last is the only element provided`, () => {
-    focusOnLast();
-    resetFocus({
-      focusableEls: { first: undefined, last: last() },
-      event: fakeKeyDownEvent(),
-    });
-    expect(last()).toHaveFocus();
-  });
-  const first = () => screen.getByText('first');
-  const last = () => screen.getByText('last');
-  const middle = () => screen.getByText('middle');
-  const focusOnFirst = () => userEvent.tab();
-  const focusOnLast = () => userEvent.tab({ shift: true });
-  const focusOnMiddle = () => {
-    userEvent.tab();
-    userEvent.tab();
-  };
-});

package/src/snackbar/__snapshots__/Snackbar.spec.js.snap DELETED Viewed

@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Snackbar accepts element as text 1`] = `"<div class=\\"snackbar\\"><span class=\\"np-text-body-default snackbar__text snackbar__text--light snackbar__text-container-enter snackbar__text-container-enter-active\\"><span>test</span></span></div>"`;
-exports[`Snackbar adjusts the theme if passed 1`] = `"<div class=\\"snackbar\\"><span class=\\"np-text-body-default snackbar__text snackbar__text--dark snackbar__text-container-enter snackbar__text-container-enter-active\\"><span>test</span></span></div>"`;