@transferwise/components 45.14.2 → 45.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "45.14.2",
+  "version": "45.15.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -32,28 +32,28 @@
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-typescript": "^11.1.3",
-    "@storybook/addon-a11y": "^7.0.6",
-    "@storybook/addon-actions": "^7.0.6",
-    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/addon-interactions": "^7.0.6",
-    "@storybook/addon-knobs": "^7.0.0",
-    "@storybook/addon-viewport": "^7.0.6",
-    "@storybook/addons": "^7.0.0",
-    "@storybook/api": "^7.0.0",
-    "@storybook/components": "^7.0.0",
-    "@storybook/core-events": "^7.0.0",
-    "@storybook/react": "^7.0.6",
-    "@storybook/react-webpack5": "^7.0.6",
+    "@storybook/addon-a11y": "^7.4.5",
+    "@storybook/addon-actions": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addon-viewport": "^7.4.5",
+    "@storybook/addons": "^7.4.5",
+    "@storybook/api": "^7.4.5",
+    "@storybook/components": "^7.4.5",
+    "@storybook/core-events": "^7.4.5",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-webpack5": "^7.4.5",
     "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.0",
-    "@storybook/types": "^7.0.6",
+    "@storybook/theming": "^7.4.5",
+    "@storybook/types": "^7.4.5",
     "@testing-library/dom": "^7.21.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-tokens": "^8.5.0",
+    "@transferwise/neptune-tokens": "^8.5.1",
     "@tsconfig/recommended": "^1.0.2",
     "@types/babel__core": "^7.20.1",
     "@types/jest": "^26.0.20",
@@ -62,6 +62,7 @@
     "@types/react-dom": "^17.0.20",
     "@types/react-transition-group": "4.4.5",
     "@types/testing-library__jest-dom": "^5.14.5",
+    "@types/use-sync-external-store": "^0.0.4",
     "@wise/art": "^2.7.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "babel-plugin-formatjs": "^10.5.3",
@@ -75,7 +76,7 @@
     "npm-watch": "^0.11.0",
     "react-intl": "^5.10.0",
     "rollup": "^3.28.1",
-    "storybook": "^7.0.6",
+    "storybook": "^7.4.5",
     "@transferwise/less-config": "3.0.6",
     "@transferwise/neptune-css": "14.6.0",
     "@wise/components-theming": "0.8.4"
@@ -83,7 +84,7 @@
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
     "@transferwise/neptune-css": "^14.5.2",
-    "@wise/art": "^2",
+    "@wise/art": "^2.7.0",
     "@wise/components-theming": "^0.8.4",
     "currency-flags": "^4.0.2",
     "react": ">=16.14",
@@ -97,8 +98,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
+    "@floating-ui/react": "^0.25.4",
     "@formatjs/intl-locale": "^2.4.14",
+    "@headlessui/react": "^1.7.17",
     "@popperjs/core": "^2.6.0",
+    "@radix-ui/react-id": "^1.0.0",
+    "@react-aria/focus": "^3.14.2",
+    "@react-aria/overlays": "^3.17.0",
     "@react-spring/web": "~9.6.1",
     "@transferwise/formatting": "^2.1.0",
     "@transferwise/neptune-validation": "^3.1.0",
@@ -115,7 +121,8 @@
     "react-merge-refs": "^1.1.0",
     "react-popper": "^2.2.4",
     "react-required-if": "^1.0.3",
-    "react-transition-group": "^4.4.2"
+    "react-transition-group": "^4.4.2",
+    "use-sync-external-store": "^1.2.0"
   },
   "watch": {
     "build:crowdin-source-file": "src/**/*.messages.js"
@@ -139,7 +146,7 @@
     "build:clean": "rm -rf lib build",
     "build:crowdin-source-file": "formatjs extract 'src/**/*.messages.+(js|ts|tsx)' --out-file src/i18n/en.json --format simple && prettier --find-config-path --write src/i18n/*.json",
     "build:js": "rollup --config --sourcemap",
-    "build:generate-types": "tsc && node ./scripts/generate-type-declarations.js",
+    "build:generate-types": "node ./scripts/generate-type-declarations.js",
     "build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build",
     "build:copy-css": "cpx 'src/main.css' build/ & cpx 'src/**/*.css' build/styles/",
     "build:copy-lang": "cpx 'src/i18n/*.json' build/i18n && cpx 'src/i18n/index.js' build/i18n",

package/src/accordion/AccordionItem/__snapshots__/AccordionItem.spec.js.snap

@@ -14,11 +14,11 @@ exports[`AccordionItem open / close renders an item closed 1`] = `
         <div
           class="media-body"
         >
-          <span
-            class="np-text-body-large-bold text-primary np-option__title d-block"
+          <h4
+            class="np-text-body-large-bold text-primary np-option__title"
           >
             This is title number one
-          </span>
+          </h4>
         </div>
         <div
           class="media-right"
@@ -62,11 +62,11 @@ exports[`AccordionItem open / close renders an item open 1`] = `
         <div
           class="media-body"
         >
-          <span
-            class="np-text-body-large-bold text-primary np-option__title d-block"
+          <h4
+            class="np-text-body-large-bold text-primary np-option__title"
           >
             This is title number one
-          </span>
+          </h4>
         </div>
         <div
           class="media-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/closeButton/CloseButton.css

@@ -1 +1 @@
-.np-close-button{--ring-outline-offset:0;background:none;border:none;color:#00a2dd;color:var(--color-interactive-accent);height:16px;height:var(--size-16);padding:0;transition:color .15s ease-in-out}.np-close-button--large,.np-close-button--x-large{height:24px;height:var(--size-24)}.np-close-button:hover{color:#008fc9;color:var(--color-interactive-accent-hover)}.np-theme-personal .np-close-button{align-items:center;border-radius:50%;border-radius:var(--radius-full);color:var(--color-interactive-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;transition:background-color .1s ease;width:32px;width:var(--size-32)}.np-theme-personal .np-close-button--large{flex-shrink:0;height:40px;height:var(--size-40);width:40px;width:var(--size-40)}.np-theme-personal .np-close-button--x-large{flex-shrink:0;height:48px;height:var(--size-48);width:48px;width:var(--size-48)}.np-theme-personal .np-close-button:not(.disabled,:disabled):hover{background-color:var(--color-background-neutral-hover);color:var(--color-interactive-primary-hover)}.np-theme-personal .np-close-button:not(.disabled,:disabled):active{background-color:var(--color-background-neutral-active);color:var(--color-interactive-primary-active)}
+.np-close-button{--ring-outline-offset:0;background:none;border:none;color:#00a2dd;color:var(--color-interactive-accent);height:16px;height:var(--size-16);padding:0;transition:color .15s ease-in-out}.np-close-button--large,.np-close-button--x-large{height:24px;height:var(--size-24)}.np-close-button:hover{color:#008fc9;color:var(--color-interactive-accent-hover)}.np-theme-personal .np-close-button{align-items:center;border-radius:9999px;border-radius:var(--radius-full);color:var(--color-interactive-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;transition:background-color .1s ease;width:32px;width:var(--size-32)}.np-theme-personal .np-close-button--large{flex-shrink:0;height:40px;height:var(--size-40);width:40px;width:var(--size-40)}.np-theme-personal .np-close-button--x-large{flex-shrink:0;height:48px;height:var(--size-48);width:48px;width:var(--size-48)}.np-theme-personal .np-close-button:not(.disabled,:disabled):hover{background-color:var(--color-background-neutral-hover);color:var(--color-interactive-primary-hover)}.np-theme-personal .np-close-button:not(.disabled,:disabled):active{background-color:var(--color-background-neutral-active);color:var(--color-interactive-primary-active)}

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/common/hooks/useMedia.spec.ts

@@ -0,0 +1,39 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useMedia } from './useMedia';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query: string) => {
+    const matches = /^\(min-width: ([0-9]+)px\)$/.exec(query);
+    const minWidth = matches != null ? Number(matches[1]) : undefined;
+    return {
+      matches: minWidth != null ? window.innerWidth >= minWidth : false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // deprecated
+      removeListener: jest.fn(), // deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    };
+  }),
+});
+
+describe('useMedia', () => {
+  it('tracks changes of window size', () => {
+    const { result, rerender } = renderHook(() => useMedia('(min-width: 1024px)'));
+
+    window.innerWidth = 1920;
+    rerender();
+    expect(result.current).toBeTruthy();
+
+    window.innerWidth = 1024;
+    rerender();
+    expect(result.current).toBeTruthy();
+
+    window.innerWidth = 800;
+    rerender();
+    expect(result.current).toBeFalsy();
+  });
+});

package/src/common/hooks/useMedia.ts

@@ -0,0 +1,15 @@
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+
+export function useMedia(query: string) {
+  return useSyncExternalStore(
+    (onStoreChange) => {
+      const mediaQueryList = window.matchMedia(query);
+      mediaQueryList.addEventListener('change', onStoreChange);
+      return () => {
+        mediaQueryList.removeEventListener('change', onStoreChange);
+      };
+    },
+    () => (typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined),
+    () => undefined,
+  );
+}

package/src/common/hooks/useScreenSize.ts

@@ -0,0 +1,7 @@
+import { Breakpoint } from '../propsValues/breakpoint';
+
+import { useMedia } from './useMedia';
+
+export function useScreenSize(size: Breakpoint) {
+  return useMedia(`(min-width: ${size}px)`);
+}

package/src/common/preventScroll/PreventScroll.tsx

@@ -0,0 +1,6 @@
+import { usePreventScroll } from '@react-aria/overlays';
+
+export function PreventScroll() {
+  usePreventScroll();
+  return null;
+}

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');