@transferwise/components 45.15.0 → 45.16.0

package/src/alert/Alert.spec.js

@@ -61,7 +61,7 @@ describe('Alert', () => {
           <Alert message={message} />
         </ThemeProvider>,
       ));
-      component = screen.getByRole('alert');
+      component = screen.getByTestId('alert');
     });
 
     it('the message is rendered', () => {
@@ -85,7 +85,7 @@ describe('Alert', () => {
   describe('deprecated props', () => {
     it('renders arrows but logs a warning', () => {
       render(<Alert arrow={AlertArrowPosition.BOTTOM} message={message} />);
-      component = screen.getByRole('alert');
+      component = screen.getByTestId('alert');
 
       expect(component).toHaveClass('arrow');
       expect(component).toHaveClass('arrow-bottom');
@@ -125,7 +125,7 @@ describe('Alert', () => {
     it('maps type SUCCESS to type POSITIVE and logs a warning', () => {
       render(<Alert type={Sentiment.SUCCESS} message={message} />);
 
-      const success = screen.getByRole('alert');
+      const success = screen.getByTestId('alert');
 
       expect(success).toHaveClass(classForType(Sentiment.POSITIVE));
       expect(screen.getByTestId('check-circle-icon')).toBeInTheDocument();
@@ -137,7 +137,7 @@ describe('Alert', () => {
     it('maps type INFO to type NEUTRAL and logs a warning', () => {
       render(<Alert type={Sentiment.INFO} message={message} />);
 
-      const info = screen.getByRole('alert');
+      const info = screen.getByTestId('alert');
 
       expect(info).toHaveClass(classForType(Sentiment.NEUTRAL));
       expect(screen.getByTestId('info-circle-icon')).toBeInTheDocument();
@@ -150,7 +150,7 @@ describe('Alert', () => {
   it('maps type ERROR to type NEGATIVE and logs a warning', () => {
     render(<Alert type={Sentiment.ERROR} message={message} />);
 
-    const error = screen.getByRole('alert');
+    const error = screen.getByTestId('alert');
 
     expect(error).toHaveClass(classForType(Sentiment.NEGATIVE));
     expect(screen.getByTestId('cross-circle-icon')).toBeInTheDocument();
@@ -197,14 +197,14 @@ describe('Alert', () => {
     it('converts message to markdown', () => {
       render(<Alert message={input} />);
 
-      expect(screen.getByRole('alert')).toContainHTML(output);
+      expect(screen.getByTestId('alert')).toContainHTML(output);
     });
 
     it('does not convert children to markdown', () => {
       render(<Alert>{input}</Alert>);
 
       expect(screen.getByText(input)).toBeInTheDocument();
-      expect(screen.getByRole('alert')).not.toContainHTML(output);
+      expect(screen.getByTestId('alert')).not.toContainHTML(output);
     });
   });
 
@@ -212,7 +212,7 @@ describe('Alert', () => {
     it('applies provided classes', () => {
       render(<Alert className="cats" message={message} />);
 
-      expect(screen.getByRole('alert')).toHaveClass('cats');
+      expect(screen.getByTestId('alert')).toHaveClass('cats');
     });
   });
 
@@ -221,7 +221,7 @@ describe('Alert', () => {
       const icon = <HappyEmoji />;
 
       render(<Alert icon={icon} message={message} />);
-      component = screen.getByRole('alert');
+      component = screen.getByTestId('alert');
       expect(screen.getByTestId('happy-emoji-icon')).toBeInTheDocument();
     });
   });
@@ -247,7 +247,7 @@ describe('Alert', () => {
   describe('types', () => {
     const getComponentWithType = (type) => {
       render(<Alert type={type} message={message} />);
-      return screen.getByRole('alert');
+      return screen.getByTestId('alert');
     };
 
     it('renders neutral', () => {
@@ -277,6 +277,15 @@ describe('Alert', () => {
       expect(component).toHaveClass(classForType(Sentiment.WARNING));
       expect(screen.getByTestId('warning-icon')).toBeInTheDocument();
     });
+
+    it('renders error alerts with aria-role alert', () => {
+      component = getComponentWithType(Sentiment.NEGATIVE);
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+    it('renders neutral alerts with aria-role status', () => {
+      component = getComponentWithType(Sentiment.NEUTRAL);
+      expect(screen.getByRole('status')).toBeInTheDocument();
+    });
   });
 
   describe('on touch devices', () => {
@@ -304,7 +313,7 @@ describe('Alert', () => {
 
         render(<Alert action={action} message={message} onDismiss={jest.fn()} />);
 
-        alert = screen.getByRole('alert');
+        alert = screen.getByTestId('alert');
         closeButton = screen.getByLabelText('Close');
 
         jest.spyOn(React, 'useRef').mockReturnValue({
@@ -344,7 +353,7 @@ describe('Alert', () => {
 
         render(<Alert action={action} message={message} onDismiss={jest.fn()} />);
 
-        alert = screen.getByRole('alert');
+        alert = screen.getByTestId('alert');
         closeButton = screen.getByLabelText('Close');
 
         jest.spyOn(React, 'useRef').mockReturnValue({
@@ -368,7 +377,7 @@ describe('Alert', () => {
       beforeEach(() => {
         render(<Alert message={message} onDismiss={jest.fn()} />);
 
-        alert = screen.getByRole('alert');
+        alert = screen.getByTestId('alert');
         closeButton = screen.getByLabelText('Close');
 
         jest.spyOn(React, 'useRef').mockReturnValue({

package/src/alert/withArrow/withArrow.spec.js

@@ -12,7 +12,7 @@ describe('withArrow', () => {
       const ArrowLessAlert = withArrow(Alert);
 
       render(<ArrowLessAlert message={message} />);
-      const component = screen.getByRole('alert');
+      const component = screen.getByTestId('alert');
 
       expect(component).not.toHaveClass('arrow');
     });
@@ -21,7 +21,7 @@ describe('withArrow', () => {
       const AlertTopArrow = withArrow(Alert, ArrowPosition.TOP_LEFT);
 
       render(<AlertTopArrow message={message} arrow={ArrowPosition.BOTTOM_LEFT} />);
-      const component = screen.getByRole('alert');
+      const component = screen.getByTestId('alert');
       expect(component).toHaveClass('arrow');
       expect(component).not.toHaveClass('arrow-bottom');
     });
@@ -33,7 +33,7 @@ describe('withArrow', () => {
     it(`returns an bottom arrowed alert if you pass a bottom arrow`, () => {
       const BottomArrowAlert = getPointyAlert(ArrowPosition.BOTTOM);
       render(<BottomArrowAlert message={message} />);
-      const component = screen.getByRole('alert');
+      const component = screen.getByTestId('alert');
 
       expect(component).toHaveClass('arrow');
       expect(component).toHaveClass('arrow-bottom');
@@ -42,7 +42,7 @@ describe('withArrow', () => {
     it(`returns an top-right arrowed alert if you pass a top right arrow`, () => {
       const BottomArrowAlert = getPointyAlert(ArrowPosition.TOP_RIGHT);
       render(<BottomArrowAlert message={message} />);
-      const component = screen.getByRole('alert');
+      const component = screen.getByTestId('alert');
 
       expect(component).toHaveClass('arrow');
       expect(component).toHaveClass('arrow-right');

package/src/avatarWrapper/AvatarWrapper.tsx

@@ -6,11 +6,10 @@ import Badge, { BadgeProps } from '../badge';
 import { ProfileType, ProfileTypePersonal, ProfileTypeBusiness, Size, Sentiment } from '../common';
 import StatusIcon from '../statusIcon/StatusIcon';
 
-interface OptionalBadgeProps {
+interface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {
   url?: string;
   altText?: string;
   statusIcon?: Sentiment;
-  children: React.ReactNode;
 }
 
 const OptionalBadge = ({ url, altText, statusIcon, children, ...rest }: OptionalBadgeProps) => {
@@ -31,17 +30,30 @@ const OptionalBadge = ({ url, altText, statusIcon, children, ...rest }: Optional
   return <>{children}</>;
 };
 
-export interface AvatarWrapperProps {
+export type AvatarWrapperProps = {
   url?: string;
   profileType?: ProfileTypeBusiness | ProfileTypePersonal;
   profileId?: string;
-  badgeUrl?: string;
-  badgeAltText?: string;
-  badgeStatusIcon?: Sentiment;
   name?: string;
   avatarProps?: AvatarProps;
   badgeProps?: BadgeProps;
-}
+} & (
+  | {
+      badgeUrl: string;
+      badgeAltText: string;
+      badgeStatusIcon?: never;
+    }
+  | {
+      badgeUrl?: never;
+      badgeAltText?: never;
+      badgeStatusIcon: Sentiment;
+    }
+  | {
+      badgeUrl?: never;
+      badgeAltText?: never;
+      badgeStatusIcon?: never;
+    }
+);
 
 const AvatarWrapper = ({
   url,
@@ -64,7 +76,7 @@ const AvatarWrapper = ({
     if (url && !hasImageLoadError) {
       return {
         type: AvatarType.THUMBNAIL,
-        children: <img src={url} alt="avatar" onError={() => setImageLoadError(true)} />,
+        children: <img src={url} alt="" onError={() => setImageLoadError(true)} />,
         ...avatarProps,
       };
     }

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

@@ -8,7 +8,7 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
     class="tw-avatar__content"
   >
     <img
-      alt="avatar"
+      alt=""
       src="https://wise.com"
     />
   </div>

package/src/card/Card.spec.js

@@ -56,12 +56,12 @@ describe('Card', () => {
   });
 
   describe('when there is no children prop', () => {
-    it('redners Option title as a heading 4', () => {
+    it('renders Option title as a heading 4', () => {
       const onClick = jest.fn();
       renderCard(onClick);
 
       expect(screen.queryByRole('button')).not.toBeInTheDocument();
-      expect(screen.getByText(defaultProps.title).tagName).toBe('SPAN');
+      expect(screen.getByText(defaultProps.title).tagName).toBe('H4');
     });
 
     it('has an inactive class', () => {

package/src/common/Option/Option.tsx

@@ -85,13 +85,7 @@ const Option = forwardRef<ReferenceType, OptionProps>(
             </div>
           )}
           <div className="media-body">
-            <Body
-              as="span"
-              type={Typography.BODY_LARGE_BOLD}
-              className="text-primary np-option__title d-block"
-            >
-              {title}
-            </Body>
+            <h4 className="np-text-body-large-bold text-primary np-option__title">{title}</h4>
             {content && <Body className="d-block np-option__body">{content}</Body>}
           </div>
           <div className="media-right">{button}</div>

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

@@ -7,9 +7,12 @@ exports[`BottomSheet renders content when open 1`] = `
     class="np-theme-light"
   >
     <div
-      class="np-focus-boundary outline-none"
       tabindex="-1"
     >
+      <span
+        data-focus-scope-start="true"
+        hidden=""
+      />
       <div
         class="dimmer"
         role="presentation"
@@ -63,6 +66,10 @@ exports[`BottomSheet renders content when open 1`] = `
           </div>
         </div>
       </div>
+      <span
+        data-focus-scope-end="true"
+        hidden=""
+      />
     </div>
   </div>
 </body>

package/src/common/card/Card.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { MouseEvent, ReactNode, useRef } from 'react';
 
 import { CloseButton } from '../closeButton';
+import { stopPropagation } from '../domHelpers';
 
 export interface CardProps {
   /** Content to display inside Card. */
@@ -49,7 +50,7 @@ export interface CardProps {
  */
 const Card: React.FC<CardProps> = ({
   className,
-  children,
+  children = null,
   id,
   isDisabled = false,
   isSmall = false,
@@ -80,7 +81,10 @@ const Card: React.FC<CardProps> = ({
           size={isSmall ? 'sm' : 'md'}
           isDisabled={isDisabled}
           testId="close-button"
-          onClick={onDismiss}
+          onClick={(e) => {
+            stopPropagation(e);
+            onDismiss();
+          }}
         />
       )}
       {children}

package/src/common/card/index.ts

@@ -1 +1,2 @@
 export { default } from './Card';
+export * from './Card';

package/src/common/focusBoundary/FocusBoundary.tsx

@@ -1,44 +1,21 @@
-import { isKey, isUndefined } from '@transferwise/neptune-validation';
-import { ReactNode, useEffect, useRef, useState } from 'react';
-
-import { useConditionalListener } from '../hooks';
-import { Key } from '../key';
-
-import { getFocusableElements, resetFocus } from './utils';
-
-const { TAB } = Key;
+import { FocusScope } from '@react-aria/focus';
+import { useEffect, useRef } from 'react';
 
 type FocusBoundaryProps = {
-  children: ReactNode;
+  children: React.ReactNode;
 };
 
 const FocusBoundary = ({ children }: FocusBoundaryProps) => {
-  const boundaryReference = useRef<HTMLDivElement | null>(null);
-  const parent = isUndefined(document) ? undefined : document;
-  const [focusableEls, setFocusableEls] = useState({});
-
+  const wrapperReference = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    if (boundaryReference?.current) {
-      boundaryReference.current.focus({ preventScroll: true });
-      setFocusableEls(getFocusableElements(boundaryReference.current));
-    }
+    wrapperReference.current?.focus({ preventScroll: true });
   }, []);
 
-  // If event type is Tab the resetFocus will force the focus to either the first focusable or last in boundaryRef .
-  useConditionalListener({
-    eventType: 'keydown',
-    callback: (event) => {
-      if (isKey({ keyType: TAB, event })) {
-        resetFocus({ event, focusableEls });
-      }
-    },
-    attachListener: true,
-    parent,
-  });
-
   return (
-    <div ref={boundaryReference} tabIndex={-1} className="np-focus-boundary outline-none">
-      {children}
+    <div ref={wrapperReference} tabIndex={-1}>
+      <FocusScope contain restoreFocus>
+        {children}
+      </FocusScope>
     </div>
   );
 };

package/src/dateInput/DateInput.js

@@ -18,8 +18,10 @@ const DateInput = ({
   size,
   value,
   dayLabel,
+  dayAutoComplete,
   monthLabel,
   yearLabel,
+  yearAutoComplete,
   monthFormat,
   mode,
   onChange,
@@ -239,6 +241,7 @@ const DateInput = ({
                 <Input
                   type="number"
                   name="day"
+                  autoComplete={dayAutoComplete}
                   value={day || ''}
                   placeholder={placeholders.day}
                   disabled={disabled}
@@ -259,6 +262,7 @@ const DateInput = ({
               <Input
                 type="number"
                 name="year"
+                autoComplete={yearAutoComplete}
                 placeholder={placeholders.year}
                 value={year || ''}
                 disabled={disabled}
@@ -303,8 +307,10 @@ DateInput.propTypes = {
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   dayLabel: PropTypes.string,
+  dayAutoComplete: PropTypes.string,
   monthLabel: PropTypes.string,
   yearLabel: PropTypes.string,
+  yearAutoComplete: PropTypes.string,
   monthFormat: PropTypes.oneOf(['long', 'short']),
   mode: PropTypes.oneOf(['day-month-year', 'month-year']),
   placeholders: PropTypes.shape({

package/src/dateInput/DateInput.story.tsx

@@ -8,8 +8,10 @@ export default {
   title: 'Forms/DateInput',
   args: {
     dayLabel: 'Day input',
+    dayAutoComplete: 'bday-day',
     monthLabel: 'Month select',
     yearLabel: 'Year input',
+    yearAutoComplete: 'bday-year',
     selectProps: {
       buttonProps: {
         'aria-label': 'Select month',

package/src/dateLookup/DateLookup.css

@@ -1 +1 @@
-.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);color:#fff}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);color:#fff}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{color:var(--color-interactive-control)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+6) button,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.np-theme-personal .tw-date-lookup-calendar{background-color:inherit}.tw-date-lookup-header-current{font-weight:800;font-weight:var(--font-weight-bold)}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option{align-items:center;color:#37517e;color:var(--color-content-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;line-height:32px;line-height:var(--size-32)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option.active,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option.active{background-color:#00a2dd;background-color:var(--color-interactive-accent);color:var(--color-interactive-primary)}
+.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);color:#fff}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);color:#fff}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{color:var(--color-interactive-control)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+6) button,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.tw-date-lookup-calendar abbr{text-decoration:none}.np-theme-personal .tw-date-lookup-calendar{background-color:inherit}.tw-date-lookup-header-current{font-weight:800;font-weight:var(--font-weight-bold)}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option{align-items:center;color:#37517e;color:var(--color-content-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;line-height:32px;line-height:var(--size-32)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option.active,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option.active{background-color:#00a2dd;background-color:var(--color-interactive-accent);color:var(--color-interactive-primary)}

package/src/dateLookup/DateLookup.keyboardEvents.spec.js

@@ -7,13 +7,13 @@ import KEY_CODES from '../common/keyCodes';
 import DateLookup from '.';
 
 const defaultLocale = 'en-GB';
-
+const formatMessage = (id) => `${id}`;
 jest.mock('react-intl', () => ({
   injectIntl: (Component) =>
     function (props) {
-      return <Component {...props} intl={{ locale: defaultLocale }} />;
+      return <Component {...props} intl={{ locale: defaultLocale, formatMessage }} />;
     },
-  useIntl: () => ({ locale: defaultLocale }),
+  useIntl: () => ({ locale: defaultLocale, formatMessage }),
   defineMessages: (translations) => translations,
 }));
 

package/src/dateLookup/DateLookup.less

@@ -54,6 +54,10 @@
     }
   }
 
+  abbr {
+    text-decoration: none;
+  }
+
   .np-theme-personal & {
     background-color: inherit;
   }

package/src/dateLookup/DateLookup.messages.js

@@ -0,0 +1,44 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  next: {
+    id: 'neptune.DateLookup.next',
+    defaultMessage: 'next',
+    description: 'Description of next button',
+  },
+  previous: {
+    id: 'neptune.DateLookup.previous',
+    defaultMessage: 'previous',
+    description: 'Description of previous button',
+  },
+  day: {
+    id: 'neptune.DateLookup.day',
+    defaultMessage: 'day',
+    description: 'Description of next/previous/selected day button',
+  },
+  month: {
+    id: 'neptune.DateLookup.month',
+    defaultMessage: 'month',
+    description: 'Description of next/previous/selected month button',
+  },
+  year: {
+    id: 'neptune.DateLookup.year',
+    defaultMessage: 'year',
+    description: 'Description of next/previous/selected year button',
+  },
+  twentyYears: {
+    id: 'neptune.DateLookup.twentyYears',
+    defaultMessage: '20 years',
+    description: 'Description of next/previous 20 years button',
+  },
+  selected: {
+    id: 'neptune.DateLookup.selected',
+    defaultMessage: 'selected',
+    description: 'Description of the selected day/month/year',
+  },
+  goTo20YearView: {
+    id: 'neptune.DateLookup.goTo20YearView',
+    defaultMessage: 'Go to 20 year view',
+    description: 'Description of the button to go to 20 year view',
+  },
+});

package/src/dateLookup/DateLookup.testingLibrary.spec.js

@@ -54,6 +54,14 @@ describe('DateLookup (events)', () => {
     expect(getActiveYearButton()).toHaveFocus();
   });
 
+  it('has aria-label for 20 years', () => {
+    openDateLookup();
+    clickDateButton();
+
+    expect(getButtonByAriaLabel('next 20 years')).toBeInTheDocument();
+    expect(getButtonByAriaLabel('previous 20 years')).toBeInTheDocument();
+  });
+
   it('switches to months', () => {
     openDateLookup();
     clickDateButton();
@@ -62,6 +70,15 @@ describe('DateLookup (events)', () => {
     expect(getActiveMonthButton()).toHaveFocus();
   });
 
+  it('has aria label for year', () => {
+    openDateLookup();
+    clickDateButton();
+    user.click(getActiveYearButton());
+
+    expect(getButtonByAriaLabel('next year')).toBeInTheDocument();
+    expect(getButtonByAriaLabel('previous year')).toBeInTheDocument();
+  });
+
   it('switches to days', () => {
     openDateLookup();
     clickDateButton();
@@ -71,6 +88,16 @@ describe('DateLookup (events)', () => {
     expect(getActiveDayButton()).toHaveFocus();
   });
 
+  it('has aria label for month', () => {
+    openDateLookup();
+    clickDateButton();
+    user.click(getActiveYearButton());
+    user.click(getActiveMonthButton());
+
+    expect(getButtonByAriaLabel('next month')).toBeInTheDocument();
+    expect(getButtonByAriaLabel('previous month')).toBeInTheDocument();
+  });
+
   it('updates selected date and closes', () => {
     openDateLookup();
     const d = new Date(2018, 11, 28);
@@ -81,6 +108,15 @@ describe('DateLookup (events)', () => {
     expect(getOpenButton()).toHaveFocus();
   });
 
+  it('has aria label on selected date', () => {
+    openDateLookup();
+    const d = new Date(2018, 11, 28);
+    const newDay = screen.getByText(`${d.getDate()}`);
+    user.click(newDay);
+    openDateLookup();
+    expect(screen.getByRole('button', { name: /selected day/i })).toBeInTheDocument();
+  });
+
   describe('at extra small breakpoints', () => {
     it('opens dateLookup using slider on small + 1 width', () => {
       winWidth(Breakpoint.SMALL + 1);
@@ -148,6 +184,9 @@ describe('DateLookup (events)', () => {
     return container.querySelector('button.tw-date-lookup-day-option.active');
   };
 
+  const getButtonByAriaLabel = (ariaLabel) => {
+    return screen.getByRole('button', { name: ariaLabel });
+  };
   const getClearButton = () => container.querySelector('.clear-btn');
   const getOpenButton = () => container.querySelector('button.np-date-trigger');
   const getDateButton = () => container.querySelector('button.tw-date-lookup-header-current');