@transferwise/components 0.0.0-experimental-a9f68ee → 0.0.0-experimental-fe362df

package/build/types/info/Info.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Position, SizeSmall, SizeLarge } from '../common';
 export interface Props {
-    'aria-label': string;
+    'aria-label'?: string;
     /**
      * Extra classes applied to Info
      */

package/build/types/info/Info.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Info.d.ts","sourceRoot":"","sources":["../../../src/info/Info.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAQ,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAMjE,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,QAAQ,CAAC;CAC/B;AAED,QAAA,MAAM,IAAI,6GASP,KAAK,gCAgDP,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Info.d.ts","sourceRoot":"","sources":["../../../src/info/Info.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAQ,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAOjE,MAAM,WAAW,KAAK;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,QAAQ,CAAC;CAC/B;AAED,QAAA,MAAM,IAAI,6GASP,KAAK,gCAiDP,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build/types/info/Info.messages.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    ariaLabel: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=Info.messages.d.ts.map

package/build/types/info/Info.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Info.messages.d.ts","sourceRoot":"","sources":["../../../src/info/Info.messages.ts"],"names":[],"mappings":";;;;;;AAEA,wBAKG"}

package/build/types/summary/Summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../src/summary/Summary.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAEL,UAAU,EACV,aAAa,EACb,aAAa,EAId,MAAM,WAAW,CAAC;AACnB,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAqB1C,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;QACvE,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,OAAO,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,SAAS,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;IACxF;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;IACpD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,QAAA,MAAM,OAAO,6GAaV,KAAK,gCAoFP,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../src/summary/Summary.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAEL,UAAU,EACV,aAAa,EACb,aAAa,EAId,MAAM,WAAW,CAAC;AACnB,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAqB1C,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;QACvE,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,OAAO,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,SAAS,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;IACxF;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;IACpD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,QAAA,MAAM,OAAO,6GAYV,KAAK,gCAoFP,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-a9f68ee",
+  "version": "0.0.0-experimental-fe362df",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/i18n/en.json

@@ -15,6 +15,7 @@
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
   "neptune.FlowNavigation.back": "back to previous step",
+  "neptune.Info.ariaLabel": "More information",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.Select.searchPlaceholder": "Search...",

package/src/info/Info.messages.ts

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  ariaLabel: {
+    id: 'neptune.Info.ariaLabel',
+    defaultMessage: 'More information',
+  },
+});

package/src/info/Info.spec.js

@@ -3,11 +3,11 @@ import { act, render, fireEvent, waitFor, screen } from '../test-utils';
 import Info, { InfoPresentation } from '.';
 
 describe('Info', () => {
+  const defaultScreenReaderLabel = 'More information';
   const props = {
     content: 'content',
     className: 'className',
     title: 'title',
-    'aria-label': 'aria-label',
   };
 
   it('calls onClick on click event', async () => {
@@ -57,9 +57,15 @@ describe('Info', () => {
     });
   });
 
-  const getTriggerButton = () => screen.queryByLabelText('aria-label');
-  const getSvgIcon = () => document.querySelector('.tw-icon-help-circle > svg');
-  const getPopover = () => screen.queryByRole('tooltip');
+  it('accepts custom label for screen readers', () => {
+    const customScreenReaderLabel = 'Custom message';
+    render(<Info {...props} aria-label={customScreenReaderLabel} />);
+
+    expect(screen.getByLabelText(customScreenReaderLabel)).toBeInTheDocument();
+  });
+
+  const getTriggerButton = () => screen.queryByLabelText(defaultScreenReaderLabel);
+  const getPopover = () => screen.queryByRole('dialog');
   const getModal = () => screen.queryByRole('dialog');
 
   const openPopover = async () => {

package/src/info/Info.tsx

@@ -1,15 +1,17 @@
 import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';
 import classNames from 'classnames';
 import { useState } from 'react';
+import { useIntl } from 'react-intl';
 
 import { Size, Position, SizeSmall, SizeLarge } from '../common';
 import Modal from '../modal';
 import Popover from '../popover';
 
+import messages from './Info.messages';
 import { InfoPresentation } from './infoPresentations';
 
 export interface Props {
-  'aria-label': string;
+  'aria-label'?: string;
   /**
    * Extra classes applied to Info
    */
@@ -47,8 +49,9 @@ const Info = ({
   'aria-label': ariaLabel,
   preferredPlacement = Position.BOTTOM,
 }: Props) => {
+  const intl = useIntl();
   const [open, setOpen] = useState(false);
-
+  ariaLabel ??= intl.formatMessage(messages.ariaLabel);
   const isModal = presentation === InfoPresentation.MODAL;
   const isSmall = size === Size.SMALL;
 

package/src/popover/Popover.js

@@ -39,7 +39,7 @@ const Popover = ({ children, className, content, preferredPlacement, title }) =>
         <div
           className={isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content'}
           aria-hidden={!open}
-          role="tooltip"
+          role="dialog"
         >
           {title && (
             <Title type={Typography.TITLE_BODY} className="m-b-1">

package/src/popover/__snapshots__/Popover.spec.js.snap

@@ -14,7 +14,7 @@ exports[`Popover on desktop renders when is open 1`] = `
     <div
       aria-hidden="false"
       class="np-popover__content"
-      role="tooltip"
+      role="dialog"
     >
       <h4
         class="np-text-title-body m-b-1"
@@ -89,7 +89,7 @@ exports[`Popover on mobile renders when is open 1`] = `
           <div
             aria-hidden="false"
             class="np-popover__content"
-            role="tooltip"
+            role="dialog"
           >
             <h4
               class="np-text-title-body m-b-1"

package/src/summary/Summary.tsx

@@ -100,7 +100,6 @@ const Summary = ({
   help,
   icon,
   illustration = null,
-  // @ts-expect-error help is old and deprecated prop
   info = help,
   status,
   title,

package/src/typeahead/Typeahead.story.js

@@ -114,3 +114,9 @@ export const Basic = () => {
     />
   );
 };
+
+Basic.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  userEvent.type(canvas.getByRole('combobox'), 'abc');
+  userEvent.type(canvas.getByRole('combobox'), '{arrowDown}');
+};

package/src/typeahead/typeaheadOption/TypeaheadOption.js

@@ -16,7 +16,7 @@ const Option = (props) => {
         'tw-dropdown-item--focused': selected,
       })}
     >
-      <a className="dropdown-item" href="#" onClick={onClick}>
+      <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
         <span>{hightlight(label, query)}</span>
         {note && <span className="np-text-body-default m-l-1">{note}</span>}
         {secondary && <span className="np-text-body-default text-ellipsis">{secondary}</span>}