@transferwise/components 46.66.0 → 46.67.1

package/src/i18n/ro.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(Opțional)",
   "neptune.Link.opensInNewTab": "(se deschide într-o filă nouă)",
   "neptune.MoneyInput.Select.placeholder": "Selectează o opţiune...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "Selectează moneda",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selectează o opțiune...",
   "neptune.Select.searchPlaceholder": "Caută...",
   "neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",

package/src/i18n/ru.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(необязательно)",
   "neptune.Link.opensInNewTab": "(откроется в новой вкладке)",
   "neptune.MoneyInput.Select.placeholder": "Выберите вариант...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "Выберите валюту",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
   "neptune.Select.searchPlaceholder": "Поиск...",
   "neptune.SelectInput.noResultsFound": "Ничего не найдено",

package/src/i18n/th.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(ไม่บังคับ)",
   "neptune.Link.opensInNewTab": "(เปิดในแท็บใหม่)",
   "neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "เลือกสกุลเงิน",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",

package/src/i18n/tr.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "(İsteğe bağlı)",
   "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
   "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "Para birimi seçin",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
   "neptune.Select.searchPlaceholder": "Ara...",
   "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",

package/src/i18n/zh-CN.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "（可选）",
   "neptune.Link.opensInNewTab": "（在新标签页中打开）",
   "neptune.MoneyInput.Select.placeholder": "请选择...",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "选择货币",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "选择其中一项...",
   "neptune.Select.searchPlaceholder": "搜索",
   "neptune.SelectInput.noResultsFound": "找不到结果",

package/src/i18n/zh-HK.json

@@ -21,6 +21,7 @@
   "neptune.Label.optional": "（可選）",
   "neptune.Link.opensInNewTab": "（在新分頁中開啟）",
   "neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
+  "neptune.MoneyInput.Select.selectCurrencyLabel": "選擇貨幣",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選擇其中一項…",
   "neptune.Select.searchPlaceholder": "搜尋…",
   "neptune.SelectInput.noResultsFound": "找不到任何結果",

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

@@ -2185,6 +2185,10 @@ html:not([dir="rtl"]) .np-flow-navigation__stepper {
 .np-flow-navigation--xs-max .np-animated-label {
   height: auto;
 }
+.np-flow-navigation--xs-max .np-animated-label .tw-icon-chevron-down {
+  margin-left: 4px;
+  margin-left: var(--size-4);
+}
 .np-flow-navigation--sm .np-flow-navigation__stepper {
   min-height: 56px;
 }
@@ -4368,35 +4372,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
@@ -381,12 +381,20 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           </div>
         ) : (
           <div
+            translate="no"
             className={clsx(
               this.style('input-group-btn'),
               this.style('amount-currency-select-btn'),
             )}
           >
             <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/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 = {};