@transferwise/components 46.65.0 → 46.67.0

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -68,7 +68,6 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
           >
             <div
               class="progress-bar"
-              style="width: 50%;"
             />
           </div>
           <ol
@@ -184,7 +183,7 @@ exports[`FlowNavigation renders as expected 1`] = `
           >
             <div
               class="progress-bar"
-              style="width: 0%;"
+              style="width: 0px;"
             />
           </div>
           <ol

package/src/i18n/en.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "Select currency",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",

package/src/inputs/SelectInput.tsx

@@ -165,7 +165,9 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   disabled?: boolean;
   size?: 'sm' | 'md' | 'lg';
   className?: string;
-  UNSAFE_triggerButtonProps?: WithInputAttributesProps['inputAttributes'];
+  UNSAFE_triggerButtonProps?: WithInputAttributesProps['inputAttributes'] & {
+    'aria-label'?: string;
+  };
   onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
   onChange?: (value: M extends true ? T[] : T) => void;
   onClose?: () => void;
@@ -258,7 +260,6 @@ export function SelectInput<T = string, M extends boolean = false>({
 }: SelectInputProps<T, M>) {
   const inputAttributes = useInputAttributes();
   const id = idProp ?? inputAttributes.id;
-
   const [open, setOpen] = useState(false);
 
   const initialized = useRef(false);
@@ -387,6 +388,7 @@ export function SelectInput<T = string, M extends boolean = false>({
             }}
           >
             <SelectInputOptions
+              id={`${id}Search`}
               items={items}
               renderValue={renderValue}
               renderFooter={renderFooter}
@@ -488,7 +490,7 @@ const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContai
 interface SelectInputOptionsProps<T = string>
   extends Pick<
     SelectInputProps<T>,
-    'items' | 'renderValue' | 'renderFooter' | 'filterable' | 'filterPlaceholder'
+    'items' | 'renderValue' | 'renderFooter' | 'filterable' | 'filterPlaceholder' | 'id'
   > {
   searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
   listboxRef: React.MutableRefObject<HTMLDivElement | null>;
@@ -497,6 +499,7 @@ interface SelectInputOptionsProps<T = string>
 }
 
 function SelectInputOptions<T = string>({
+  id,
   items,
   renderValue = String,
   renderFooter,
@@ -609,9 +612,11 @@ function SelectInputOptions<T = string>({
         <div className="np-select-input-query-container">
           <SearchInput
             ref={searchInputRef}
+            id={id}
             role="combobox"
             shape="rectangle"
             placeholder={filterPlaceholder}
+            aria-label={filterPlaceholder}
             defaultValue={filterQuery}
             aria-autocomplete="list"
             aria-expanded

package/src/main.css

@@ -4368,35 +4368,11 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: 0   ;
 }
 .progress-bar {
-  float: left;
   -webkit-backface-visibility: hidden;
-  height: 100%;
   background-color: var(--color-interactive-primary);
-  border-top-left-radius: 1px;
-  border-bottom-left-radius: 1px;
   transition: width 0.6s ease-in-out;
   will-change: width;
 }
-[dir="rtl"] .progress-bar {
-  float: right;
-}
-.progress-bar::after {
-  float: right;
-  width: 8px;
-  height: 8px;
-  margin-top: -3px;
-  margin-right: -4px;
-  content: "";
-  border-radius: 4px;
-}
-[dir="rtl"] .progress-bar::after {
-  float: left;
-}
-[dir="rtl"] .progress-bar::after {
-  margin-left: -4px;
-  margin-right: 0;
-  margin-right: initial;
-}
 .btn-unstyled {
   background: none;
   border: none;

package/src/moneyInput/MoneyInput.docs.mdx

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Forms/MoneyInput/Known issues" />
+
+# Known accessibility issues
+
+There are few issues reported by Axe that are not fixable or safe to ignore at this point in time.
+
+## Form elements should have a visible label / Form elements must have labels
+
+While this requirement is normally considered as very serious, it's missing the fact that the input is wrapped by a labelled element with `role="group"`. We’ve tested it in NVDA on Windows and VoiceOver on MacOS, and discovered that if we were to satisfy Axe’s requirements, the screen reader would read out the label twice, something similar to `{Label Text} group, {Label Text} editable` (depending on the SR and the browser) which would result in an unnecessary noise. While the rule is valid, in this particular case the group label seems sufficient.
+
+#### Further resources
+
+- [Deque reference 1](https://dequeuniversity.com/rules/axe/4.9/label?application=axeAPI)
+- [Deque reference 2](https://dequeuniversity.com/rules/axe/4.9/label-title-only?application=axeAPI)
+- ['Group Labels Do Not Guarantee… Uniquity?' by Adrian Roselli](https://adrianroselli.com/2019/06/group-labels-do-not-guarantee-uniquity.html)
+
+## Buttons must have discernible text
+
+This affects HTML buttons with `role="combobox"` and deeply nested label text, not being discoverable by Axe. It is a known false-positive.
+
+#### Further resources
+
+- [Deque reference](https://dequeuniversity.com/rules/axe/4.9/button-name?application=axeAPI)
+- [axe-core github issue](https://github.com/dequelabs/axe-core/issues/4472)
+
+## ARIA hidden element must not be focusable or contain focusable elements
+
+This is a genuine problem – according to the accessibility guidelines, no element with `aria-hidden="true"` should have any focusable children. This issue is caused by the `SelectInput`'s third party dependency (`Headless UI`) and, by extension, is visible in few other places. Work is planned to address it.
+
+#### Further resources
+
+- [Deque reference](https://dequeuniversity.com/rules/axe/4.9/aria-hidden-focus?application=axeAPI)

package/src/moneyInput/MoneyInput.messages.ts

@@ -5,4 +5,9 @@ export default defineMessages({
     id: 'neptune.MoneyInput.Select.placeholder',
     defaultMessage: 'Select an option...',
   },
+  selectCurrencyLabel: {
+    id: 'neptune.MoneyInput.Select.selectCurrencyLabel',
+    defaultMessage: 'Select currency',
+    description: 'Visually hidden label for the currency selector input.',
+  },
 });

package/src/moneyInput/MoneyInput.rtl.spec.tsx

@@ -2,6 +2,7 @@ import { Field } from '../field/Field';
 import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../test-utils';
 
 import MoneyInput from './MoneyInput';
+import messages from './MoneyInput.messages';
 
 mockMatchMedia();
 mockResizeObserver();
@@ -51,6 +52,7 @@ describe('MoneyInput', () => {
   const props = {
     currencies,
     selectedCurrency: currencies[1],
+    searchPlaceholder: 'Type a currency / country',
     amount: 1000,
     onAmountChange: jest.fn(),
     onCurrencyChange: jest.fn(),
@@ -90,4 +92,49 @@ describe('MoneyInput', () => {
     );
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
   });
+
+  describe('ids', () => {
+    it('should guarantee id and connect the input with the selected currency via withId HoC', () => {
+      render(<MoneyInput {...props} />);
+      const input = screen.getByRole('textbox');
+      const button = screen.getByRole('combobox');
+      expect(input.getAttribute('id')).toBeTruthy();
+      expect(input).toHaveAttribute('aria-describedby', button.getAttribute('id'));
+    });
+
+    it('should have unique id for the select filter with predefined id', async () => {
+      const fieldId = 'myFieldId';
+      render(
+        <Field label="Multiple currencies" id={fieldId}>
+          <MoneyInput {...props} />
+        </Field>,
+      );
+      await userEvent.click(screen.getByRole('combobox'));
+      expect(screen.getByLabelText(props.searchPlaceholder)).toHaveAttribute(
+        'id',
+        `${fieldId}SelectedCurrencySearch`,
+      );
+    });
+
+    it('should have unique id for the select filter without predefined id', async () => {
+      render(
+        <Field label="Multiple currencies">
+          <MoneyInput {...props} />
+        </Field>,
+      );
+      await userEvent.click(screen.getByRole('combobox'));
+      expect(screen.getByLabelText(props.searchPlaceholder)).toHaveAttribute(
+        'id',
+        expect.stringMatching(/^:.*?:SelectedCurrencySearch$/),
+      );
+    });
+  });
+
+  it('should have AT label for the currency dropdown', () => {
+    render(<MoneyInput {...props} />);
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-label',
+      messages.selectCurrencyLabel.defaultMessage,
+    );
+  });
 });

package/src/moneyInput/MoneyInput.spec.js

@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme';
-import { render, screen } from '@testing-library/react';
 
 import { MoneyInput, Title, Input, SelectInput } from '..';
 import { mockMatchMedia, mockResizeObserver } from '../test-utils';
@@ -818,14 +817,4 @@ describe('Money Input', () => {
       });
     });
   });
-
-  describe('withId', () => {
-    it('should guarantee id and connect the input with the selected currency', () => {
-      render(<MoneyInput {...props} />);
-      const input = screen.getByRole('textbox');
-      const button = screen.getByRole('combobox');
-      expect(input.getAttribute('id')).toBeTruthy();
-      expect(input).toHaveAttribute('aria-describedby', button.getAttribute('id'));
-    });
-  });
 });

package/src/moneyInput/MoneyInput.story.tsx

@@ -9,13 +9,13 @@ import { Field } from '../field/Field';
 export default {
   component: MoneyInput,
   title: 'Forms/MoneyInput',
-  render: function Render(args) {
+  render: function Render({ id, ...args }) {
     const [selectedCurrency, setSelectedCurrency] = useState(args.selectedCurrency);
 
     const handleOnCurrencyChange = (value: CurrencyOptionItem) => setSelectedCurrency(value);
 
     return (
-      <Field label="Editable money input label" required>
+      <Field label="Editable money input label" required id={id}>
         <MoneyInput
           {...args}
           selectedCurrency={selectedCurrency}
@@ -129,6 +129,7 @@ export const MultipleCurrencies: Story = {
     },
     selectedCurrency: exampleCurrency.usd,
     searchPlaceholder: 'Type a currency / country',
+    id: 'moneyInput',
   },
 };
 
@@ -155,20 +156,22 @@ export const OpenedInput: Story = {
 };
 
 export const SmallInput: Story = {
-  render: (args) => {
+  render: ({ id, ...args }) => {
     return (
       <>
-        <Field id={args.id} label="Money inputs" required>
+        <Field label="Money inputs" required>
           <MoneyInput {...args} {...SingleCurrency.args} />
         </Field>
         <br />
-        <MoneyInput {...args} {...MultipleCurrencies.args} />
+        <Field label="Multiple currencies">
+          <MoneyInput {...args} {...MultipleCurrencies.args} />
+        </Field>
         <hr />
-        <Field id={args.id} label="Error states" sentiment="negative" required>
+        <Field label="Error state" sentiment="negative" required>
           <MoneyInput {...args} {...SingleCurrency.args} />
         </Field>
         <br />
-        <Field sentiment="negative">
+        <Field label="Multiple currencies: error state" sentiment="negative">
           <MoneyInput {...args} {...MultipleCurrencies.args} />
         </Field>
       </>

package/src/moneyInput/MoneyInput.tsx

@@ -314,7 +314,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
 
     const isFixedCurrency = (!this.state.searchQuery && hasSingleCurrency()) || !onCurrencyChange;
     const disabled = !this.props.onAmountChange;
-    const selectedCurrencyElementId = `${amountInputId}SelectedCurrency`;
+    const selectedCurrencyElementId = `${inputAttributes?.id ?? amountInputId}SelectedCurrency`;
 
     return (
       <div
@@ -387,6 +387,13 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
             )}
           >
             <SelectInput
+              UNSAFE_triggerButtonProps={{
+                id: undefined,
+                'aria-labelledby': undefined,
+                'aria-describedby': undefined,
+                'aria-invalid': undefined,
+                'aria-label': this.props.intl.formatMessage(messages.selectCurrencyLabel),
+              }}
               id={selectedCurrencyElementId}
               items={selectOptions}
               value={selectedCurrency}

package/src/stepper/Stepper.css

@@ -70,35 +70,11 @@
   padding: 0   ;
 }
 .progress-bar {
-  float: left;
   -webkit-backface-visibility: hidden;
-  height: 100%;
   background-color: var(--color-interactive-primary);
-  border-top-left-radius: 1px;
-  border-bottom-left-radius: 1px;
   transition: width 0.6s ease-in-out;
   will-change: width;
 }
-[dir="rtl"] .progress-bar {
-  float: right;
-}
-.progress-bar::after {
-  float: right;
-  width: 8px;
-  height: 8px;
-  margin-top: -3px;
-  margin-right: -4px;
-  content: "";
-  border-radius: 4px;
-}
-[dir="rtl"] .progress-bar::after {
-  float: left;
-}
-[dir="rtl"] .progress-bar::after {
-  margin-left: -4px;
-  margin-right: 0;
-  margin-right: initial;
-}
 .btn-unstyled {
   background: none;
   border: none;

package/src/stepper/Stepper.less

@@ -78,27 +78,10 @@
 }
 
 .progress-bar {
-  .float(left);
-
   -webkit-backface-visibility: hidden;
-  height: 100%;
   background-color: var(--color-interactive-primary);
-  border-top-left-radius: 1px;
-  border-bottom-left-radius: 1px;
   transition: width 0.6s ease-in-out;
   will-change: width;
-
-  &::after {
-    .float(right);
-
-    width: 8px;
-    height: 8px;
-    margin-top: -3px;
-    .margin(right, -4px);
-
-    content: "";
-    border-radius: 4px;
-  }
 }
 
 .btn-unstyled {

package/src/stepper/Stepper.spec.js

@@ -40,15 +40,21 @@ describe('Stepper', () => {
     });
 
     it('sets the widths of the progress bar to match where you are in the flow', () => {
-      expect(totalWidth()).toBe('0%');
+      expect(totalWidth()).toBe('0px');
       activeStep(2);
-      expect(totalWidth()).toBe('100%');
+      expect(totalWidth()).toBe(
+        'calc(100% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))',
+      );
       steps(5);
-      expect(totalWidth()).toBe('50%');
+      expect(totalWidth()).toBe(
+        'calc(50% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))',
+      );
       activeStep(10000);
-      expect(totalWidth()).toBe('100%');
+      expect(totalWidth()).toBe(
+        'calc(100% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))',
+      );
       activeStep(-10);
-      expect(totalWidth()).toBe('0%');
+      expect(totalWidth()).toBe('0px');
     });
   });
 

package/src/stepper/Stepper.tsx

@@ -38,6 +38,18 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
   const stepPercentage = 1 / (steps.length - 1);
   const percentageCompleted = activeStepIndex / (steps.length - 1);
 
+  const getProgressWidth = (): string => {
+    if (percentageCompleted === 0) {
+      return '0px';
+    }
+    /**
+     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders
+     * which are used for progress vertical delimiter.
+     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.
+     */
+    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;
+  };
+
   const renderStep = (step: Step, index: number) => {
     const active = index === activeStepIndex;
     const clickable = step.onClick && !active;
@@ -85,9 +97,8 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
   return (
     <div className={clsx('tw-stepper', className)}>
       <div className="progress">
-        <div className="progress-bar" style={{ width: `${percentageCompleted * 100}%` }} />
+        <div className="progress-bar" style={{ width: getProgressWidth() }} />
       </div>
-
       <ol className="tw-stepper-steps p-t-1 m-b-0">{steps.map(renderStep)}</ol>
     </div>
   );

package/src/tile/Tile.tsx

@@ -6,6 +6,8 @@ import Title from '../title';
 
 export interface TileProps {
   /** Classes to apply to the Tile container */
+  /** A label for the accordion item, used for accessibility purposes. */
+  'aria-label'?: string;
   className?: string;
   description?: React.ReactNode;
   disabled?: boolean;
@@ -21,6 +23,7 @@ export interface TileProps {
 }
 
 export default function Tile({
+  'aria-label': ariaLabel,
   className,
   description,
   disabled,
@@ -51,6 +54,7 @@ export default function Tile({
       )}
       href={href}
       target={target}
+      aria-label={ariaLabel}
       onClick={disabled ? undefined : onClick}
       onKeyDown={
         disabled

package/src/withId/withId.story.tsx

@@ -24,6 +24,7 @@ DescribedButton.displayName = 'DescribedButton';
 
 export default {
   component: DescribedButton,
+  tags: ['docs-only'],
 } satisfies Meta<typeof withId>;
 
 export const WithoutId: Story = {};

package/src/decision/Decision.spec.js

@@ -1,127 +0,0 @@
-import Avatar from '../avatar';
-import { Breakpoint, Size } from '../common';
-import { mockMatchMedia } from '../mocks';
-import { render, fireEvent, screen } from '../test-utils';
-
-import Decision, { DecisionPresentation, DecisionType } from '.';
-
-mockMatchMedia(jest);
-
-describe('Decision', () => {
-  const commonProps = {
-    options: [
-      {
-        media: {
-          list: <Avatar type="initials">HM</Avatar>,
-          block: <img src="img.jpg" alt="alt" />,
-        },
-        href: '#href',
-        title: 'title',
-        description: 'description',
-        onClick: jest.fn(),
-      },
-    ],
-    presentation: DecisionPresentation.LIST_BLOCK,
-    type: DecisionType.NAVIGATION,
-  };
-
-  const initialInnerWidth = window.innerWidth;
-  const resetClientWidth = (width) => {
-    window.innerWidth = width;
-  };
-
-  afterAll(() => {
-    window.innerWidth = initialInnerWidth;
-  });
-
-  beforeEach(() => {
-    resetClientWidth(Breakpoint.EXTRA_SMALL - 1);
-  });
-
-  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK}`, () => {
-    const props = { ...commonProps };
-
-    it('renders only Navigation Option before first breakpoint', () => {
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toBeInTheDocument();
-    });
-
-    it('renders only Tile after first breakpoint', () => {
-      resetClientWidth(Breakpoint.SMALL);
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).not.toBeInTheDocument();
-      expect(getTile(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toHaveClass('np-tile--small');
-    });
-  });
-
-  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK_GRID}`, () => {
-    const props = { ...commonProps, presentation: DecisionPresentation.LIST_BLOCK_GRID };
-
-    it('renders only Navigation Option before first breakpoint', () => {
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toBeInTheDocument();
-    });
-
-    it('renders only Tile after first breakpoint', () => {
-      resetClientWidth(Breakpoint.SMALL);
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).not.toBeInTheDocument();
-      expect(getTile(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toHaveClass('np-tile--small');
-    });
-
-    it('renders container as a grid', () => {
-      resetClientWidth(Breakpoint.SMALL);
-      const { container } = render(<Decision {...props} />);
-
-      const decisionElement = container.querySelector('.np-decision');
-      expect(decisionElement).toHaveClass('np-decision--grid');
-      expect(decisionElement).toHaveClass('flex-wrap');
-    });
-  });
-
-  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK} and size is Small`, () => {
-    const props = {
-      ...commonProps,
-      presentation: DecisionPresentation.LIST_BLOCK,
-      size: Size.SMALL,
-    };
-
-    it('renders only Navigation Option before breakpoint', () => {
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toBeInTheDocument();
-    });
-
-    it('renders Small Tile after breakpoint', () => {
-      resetClientWidth(Breakpoint.EXTRA_SMALL);
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).not.toBeInTheDocument();
-      expect(getTile(container)).toBeInTheDocument();
-      expect(getTile(container)).toHaveClass('np-tile--small');
-    });
-  });
-
-  describe(`when presentation is ${DecisionPresentation.LIST}`, () => {
-    const props = { ...commonProps, presentation: DecisionPresentation.LIST };
-
-    it('renders Navigation Option before breakpoint', () => {
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toBeInTheDocument();
-    });
-  });
-
-  const getNavigationOption = (container) => container.querySelector('.np-navigation-option');
-  const getTile = (container) => container.querySelector('.np-tile');
-});