@transferwise/components 45.26.0 → 45.26.2

package/src/dateLookup/monthCalendar/table/MonthCalendarTable.spec.js

@@ -82,6 +82,39 @@ describe('MonthCalendarTable', () => {
     expect(component.find('.sr-only').text()).toBe('Enter date..');
   });
 
+  it('sets autofocus to true when June is the selected month', () => {
+    component.setProps({ selectedDate: new Date(2018, 5, 1) });
+    expect(getTableLinkAt(5).prop('autofocus')).toBe(true);
+  });
+
+  it('does not set autofocus to true when June is the selected month but not the right year', () => {
+    component.setProps({ selectedDate: new Date(2017, 5, 1) });
+    expect(getTableLinkAt(5).prop('autofocus')).toBe(false);
+  });
+
+  it('sets autofocus to true when selected date is null and current month is visible', () => {
+    const today = new Date();
+    component.setProps({
+      selectedDate: null,
+      viewYear: today.getFullYear(),
+      viewMonth: today.getMonth(),
+    });
+    expect(getTableLink().find({ today: true }).prop('autofocus')).toBe(true);
+  });
+
+  it('sets autofocus to true on the second month when the first month is disabled', () => {
+    component.setProps({
+      selectedDate: null,
+      viewYear: 2022,
+      min: new Date(2022, 1, 28),
+      viewMonth: 0,
+      isDisabled: (month) => month === 0,
+    });
+
+    expect(getTableLinkAt(0).prop('autofocus')).toBe(false);
+    expect(getTableLinkAt(1).prop('autofocus')).toBe(true);
+  });
+
   const getTableLinkAt = (i) => component.find('[title="MonthName"]').at(i);
   const getTableLink = () => component.find('[title="MonthName"]');
 });

package/src/dateLookup/tableLink/TableLink.spec.js

@@ -1,15 +1,9 @@
 import { shallow } from 'enzyme';
+import { useIntl } from 'react-intl';
 
 import TableLink from '.';
 
-const formatMessage = (id) => id.defaultMessage;
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function (props) {
-      return <Component {...props} intl={{ formatMessage }} />;
-    },
-  defineMessages: (translations) => translations,
-}));
+jest.mock('react-intl');
 
 jest.mock('../DateLookup.messages', () => ({
   selected: {
@@ -29,18 +23,15 @@ jest.mock('../DateLookup.messages', () => ({
     defaultMessage: 'year',
   },
 }));
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function (props) {
-      return <Component {...props} intl={{ formatMessage }} />;
-    },
-}));
 
 describe('TableLink', () => {
   let component;
   let props;
 
   beforeEach(() => {
+    useIntl.mockReturnValue({
+      formatMessage: (message) => message.defaultMessage,
+    });
     props = {
       item: 12,
       type: 'day',
@@ -51,7 +42,7 @@ describe('TableLink', () => {
       title: '12',
       longTitle: '12/12/1212',
     };
-    component = shallow(<TableLink {...props} />).dive();
+    component = shallow(<TableLink {...props} />);
   });
 
   it('shows item value', () => {

package/src/dateLookup/tableLink/TableLink.tsx

@@ -0,0 +1,79 @@
+import classNames from 'classnames';
+import { useEffect, useRef } from 'react';
+import { useIntl } from 'react-intl';
+
+import messages from '../DateLookup.messages';
+
+interface TableLinkProps {
+  item: number;
+  type: 'day' | 'month' | 'year';
+  title?: string;
+  longTitle?: string;
+  active: boolean;
+  disabled: boolean;
+  today: boolean;
+  autofocus?: boolean;
+  onClick: (item: number) => void;
+}
+
+const TableLink = ({
+  item,
+  type,
+  title,
+  longTitle,
+  active,
+  disabled,
+  today,
+  autofocus,
+  onClick,
+}: TableLinkProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const intl = useIntl();
+
+  useEffect(() => {
+    if (autofocus) {
+      setTimeout(() => {
+        buttonRef.current?.focus();
+      }, 0);
+    }
+  }, [autofocus]);
+
+  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    if (!disabled) {
+      onClick(item);
+    }
+  };
+
+  const calculateAriaLabel = () => {
+    if (active) {
+      return `${longTitle || title || ''}, ${intl.formatMessage(
+        messages.selected,
+      )} ${intl.formatMessage(messages[type])}`;
+    }
+    return longTitle || title;
+  };
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        type="button"
+        className={classNames(
+          `tw-date-lookup-${type}-option np-text-body-default-bold`,
+          { active: !!active },
+          { today: !!today },
+        )}
+        disabled={disabled}
+        tabIndex={autofocus ? 0 : -1}
+        aria-label={calculateAriaLabel()}
+        aria-pressed={active}
+        onClick={onCalendarClick}
+      >
+        {title || item}
+      </button>
+    </>
+  );
+};
+
+export default TableLink;

package/src/dateLookup/yearCalendar/table/YearCalendarTable.js

@@ -2,6 +2,7 @@ import { formatDate } from '@transferwise/formatting';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
+import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import TableLink from '../../tableLink';
 
 const ROWS = 5;
@@ -11,17 +12,38 @@ const YEAR_ONLY_FORMAT = { year: 'numeric' };
 const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSelect }) => {
   const { locale } = useIntl();
   const startYear = viewYear - (viewYear % 20);
-  const getLink = (year) => (
-    <TableLink
-      item={year}
-      type="year"
-      title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}
-      active={!!(selectedDate && year === selectedDate.getFullYear())}
-      disabled={!!((min && year < min.getFullYear()) || (max && year > max.getFullYear()))}
-      today={year === new Date().getFullYear()}
-      onClick={onSelect}
-    />
-  );
+  const getLink = (year) => {
+    return (
+      <TableLink
+        item={year}
+        type="year"
+        title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}
+        active={isActive(year)}
+        disabled={isDisabled(year)}
+        today={isThisYear(year)}
+        autofocus={autofocusYear === year}
+        onClick={onSelect}
+      />
+    );
+  };
+
+  const isActive = (year) => {
+    return !!(selectedDate && year === selectedDate.getFullYear());
+  };
+
+  const isThisYear = (year) => {
+    return year === new Date().getFullYear();
+  };
+
+  const isDisabled = (year) => {
+    return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));
+  };
+
+  const autofocusYear = (() => {
+    const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
+    return getFocusableTime({ isActive, isNow: isThisYear, isDisabled, timeSpan: years });
+  })();
+
   return (
     <table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
       <thead className="sr-only">

package/src/dateLookup/yearCalendar/table/YearCalendarTable.spec.js

@@ -90,6 +90,32 @@ describe('YearCalendarTable', () => {
     expect(component.find('.sr-only').text()).toBe('Enter date..');
   });
 
+  it('sets autofocus to true when 2002 is the selected year', () => {
+    component.setProps({ selectedDate: new Date(2002, 5, 1) });
+    expect(getTableLinkAt(2).prop('autofocus')).toBe(true);
+  });
+
+  it('sets autofocus to true when selected year is null and current year is visible', () => {
+    const today = new Date();
+    component.setProps({
+      selectedDate: null,
+      viewYear: today.getFullYear(),
+    });
+    expect(getTableLink().find({ today: true }).prop('autofocus')).toBe(true);
+  });
+
+  it('sets autofocus to true on the second year when the first year is disabled', () => {
+    component.setProps({
+      selectedDate: null,
+      viewYear: 2000,
+      min: new Date(2001, 1, 1),
+      isDisabled: (month) => month === 0,
+    });
+
+    expect(getTableLinkAt(0).prop('autofocus')).toBe(false);
+    expect(getTableLinkAt(1).prop('autofocus')).toBe(true);
+  });
+
   const getTableLinkAt = (i) => component.find('[type="year"]').at(i);
   const getTableLink = () => component.find('[type="year"]');
 });

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;