@transferwise/components 46.52.1 → 46.52.3

package/src/dateInput/DateInput.spec.tsx

@@ -24,7 +24,7 @@ describe('Date Input Component', () => {
 
     it('sets month field to empty', () => {
       render(<DateInput {...props} />);
-      const monthSelect = screen.getByRole('button', { name: /month/i });
+      const monthSelect = screen.getByRole('combobox', { name: /month/i });
       expect(monthSelect).toHaveValue('');
     });
 
@@ -39,42 +39,42 @@ describe('Date Input Component', () => {
     it('sets values correctly with a valid Date instance', () => {
       render(<DateInput {...props} value="1971-08-01" />);
       expect(screen.getByRole('textbox', { name: /day/i })).toHaveValue('1');
-      expect(screen.getByRole('button', { name: /month/i })).toHaveTextContent('August');
+      expect(screen.getByRole('combobox', { name: /month/i })).toHaveTextContent('August');
       expect(screen.getByRole('textbox', { name: /year/i })).toHaveValue('1971');
     });
 
     it('sets values correctly with a valid short ISO8601 string', () => {
       render(<DateInput {...props} value="1990-08-22" />);
       expect(screen.getByRole('textbox', { name: /day/i })).toHaveValue('22');
-      expect(screen.getByRole('button', { name: /month/i })).toHaveTextContent('August');
+      expect(screen.getByRole('combobox', { name: /month/i })).toHaveTextContent('August');
       expect(screen.getByRole('textbox', { name: /year/i })).toHaveValue('1990');
     });
 
     it('sets values correctly with a valid short ISO8601 string with year and month only', () => {
       render(<DateInput {...props} value="1990-08" />);
       expect(screen.getByRole('textbox', { name: /day/i })).toHaveValue('');
-      expect(screen.getByRole('button', { name: /month/i })).toHaveTextContent('August');
+      expect(screen.getByRole('combobox', { name: /month/i })).toHaveTextContent('August');
       expect(screen.getByRole('textbox', { name: /year/i })).toHaveValue('1990');
     });
 
     it('sets values correctly with a valid long ISO8601 string', () => {
       render(<DateInput {...props} value="1990-02-28T00:00:00.000Z" />);
       expect(screen.getByRole('textbox', { name: /day/i })).toHaveValue('28');
-      expect(screen.getByRole('button', { name: /month/i })).toHaveTextContent('February');
+      expect(screen.getByRole('combobox', { name: /month/i })).toHaveTextContent('February');
       expect(screen.getByRole('textbox', { name: /year/i })).toHaveValue('1990');
     });
 
     it('sets values to disabled when disabled is set to true', () => {
       render(<DateInput {...props} disabled />);
       expect(screen.getByRole('textbox', { name: /day/i })).toBeDisabled();
-      expect(screen.getByRole('button', { name: /month/i })).toBeDisabled();
+      expect(screen.getByRole('combobox', { name: /month/i })).toBeDisabled();
       expect(screen.getByRole('textbox', { name: /year/i })).toBeDisabled();
     });
 
     it("doesn't set values to disabled when disabled is set to false", () => {
       render(<DateInput {...props} />);
       expect(screen.getByRole('textbox', { name: /day/i })).toBeEnabled();
-      expect(screen.getByRole('button', { name: /month/i })).toBeEnabled();
+      expect(screen.getByRole('combobox', { name: /month/i })).toBeEnabled();
       expect(screen.getByRole('textbox', { name: /year/i })).toBeEnabled();
     });
   });
@@ -122,7 +122,7 @@ describe('Date Input Component', () => {
 
     it('calls the onChange callback with the correct value when changing the month', async () => {
       render(<DateInput {...props} value="2022-12-1" />);
-      const monthSelect = screen.getByRole('button', { name: /month/i });
+      const monthSelect = screen.getByRole('combobox', { name: /month/i });
       await userEvent.click(monthSelect);
       await userEvent.click(screen.getByRole('option', { name: /January/ }));
       expect(props.onChange).toHaveBeenCalledWith('2022-01-01');
@@ -204,7 +204,7 @@ describe('Date Input Component', () => {
           {...props}
         />,
       );
-      const monthSelect = screen.getByRole('button', { name: /month/i });
+      const monthSelect = screen.getByRole('combobox', { name: /month/i });
       expect(monthSelect).toHaveAttribute('id', 'mock-id');
     });
   });

package/src/dateInput/DateInput.tests.story.tsx

@@ -29,7 +29,7 @@ const Basic = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
+    await userEvent.click(canvas.getByRole('combobox'));
   },
 } satisfies Story;
 

package/src/inputs/InputGroup.css

@@ -1,5 +1,6 @@
 .np-input-group {
   display: inline-grid;
+  width: 100%;
   grid-auto-columns: minmax(0, 1fr);
   /* Prevent unwanted `group-hover/input` triggers */
   border-radius: 9999px;

package/src/inputs/InputGroup.less

@@ -1,5 +1,6 @@
 .np-input-group {
   display: inline-grid;
+  width: 100%;
   grid-auto-columns: minmax(0, 1fr);
 
   > * {

package/src/inputs/SelectInput.spec.tsx

@@ -76,7 +76,7 @@ describe('SelectInput', () => {
 
     expect(screen.queryByText('EUR')).not.toBeInTheDocument();
 
-    const trigger = screen.getAllByRole('button')[0];
+    const trigger = screen.getByRole('combobox');
     await userEvent.click(trigger);
 
     expect(handleClose).not.toHaveBeenCalled();
@@ -110,7 +110,7 @@ describe('SelectInput', () => {
       />,
     );
 
-    const trigger = screen.getAllByRole('button')[0];
+    const trigger = screen.getByRole('combobox');
     await userEvent.tab();
     await userEvent.keyboard(' ');
 
@@ -152,7 +152,7 @@ describe('SelectInput', () => {
       />,
     );
 
-    const trigger = screen.getAllByRole('button')[0];
+    const trigger = screen.getByRole('combobox');
     await userEvent.tab();
     await userEvent.keyboard(' ');
 
@@ -189,7 +189,7 @@ describe('SelectInput', () => {
       />,
     );
 
-    const trigger = screen.getAllByRole('button')[0];
+    const trigger = screen.getByRole('combobox');
     await userEvent.click(trigger);
 
     const listbox = screen.getByRole('listbox');
@@ -204,7 +204,7 @@ describe('SelectInput', () => {
   it('supports custom `id` attribute', () => {
     render(<SelectInput id="custom" items={[]} />);
 
-    const trigger = screen.getAllByRole('button')[0];
+    const trigger = screen.getByRole('combobox');
     expect(trigger).toHaveAttribute('id', 'custom');
   });
 

package/src/inputs/SelectInput.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fn, screen, userEvent, within, type Mock } from '@storybook/test';
+import { expect, fn, type Mock, screen, userEvent, within } from '@storybook/test';
 import { Calendar, ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import { clsx } from 'clsx';
@@ -8,6 +8,7 @@ import { useState } from 'react';
 import Button from '../button/Button';
 import { getMonthNames } from '../common/dateUtils';
 import Drawer from '../drawer';
+import { Field } from '../field/Field';
 import Modal from '../modal';
 import { wait } from '../test-utils/wait';
 import {
@@ -73,12 +74,12 @@ export const Months: Story<Month | null> = {
     const canvas = within(canvasElement);
 
     await step('renders placeholder', async () => {
-      const triggerButton = canvas.getByRole('button');
+      const triggerButton = canvas.getByRole('combobox');
       await expect(triggerButton).toHaveTextContent('Month');
     });
 
     await step('selects option via mouse', async () => {
-      const triggerButton = canvas.getByRole('button');
+      const triggerButton = canvas.getByRole('combobox');
 
       await userEvent.click(triggerButton);
       await userEvent.unhover(triggerButton);
@@ -195,7 +196,7 @@ export const Currencies: Story<Currency> = {
       await expect(within(screen.getByRole('listbox')).queryAllByRole('option')).toHaveLength(8);
       await expect(screen.getByText(/^Can’t find it?/u)).toBeInTheDocument();
 
-      const input = screen.getByRole('searchbox');
+      const input = screen.getByRole('combobox');
 
       await wait(0); // TODO: Remove
       await userEvent.type(input, 'huf');
@@ -234,7 +235,7 @@ export const MultipleCurrencies: Story<Currency, true> = {
     const canvas = within(canvasElement);
 
     await step('selects multiple options via mouse', async () => {
-      const triggerButton = canvas.getByRole('button');
+      const triggerButton = canvas.getByRole('combobox');
 
       await userEvent.click(triggerButton);
       await userEvent.unhover(triggerButton);
@@ -272,7 +273,7 @@ export const CustomTrigger: Story<Month> = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const triggerButton = canvas.getByRole('button');
+    const triggerButton = canvas.getByRole('combobox');
     await userEvent.click(triggerButton);
   },
 };
@@ -317,7 +318,7 @@ export const Advanced: Story<Month> = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const triggerButton = canvas.getByRole('button');
+    const triggerButton = canvas.getByRole('combobox');
     await userEvent.click(triggerButton);
   },
 };
@@ -342,6 +343,17 @@ export const ManyItems: Story<string, true> = {
   },
 };
 
+export const WithinField = {
+  args: Months.args,
+  decorators: [
+    (Story) => (
+      <Field message="Something went wrong" sentiment="negative">
+        <Story />
+      </Field>
+    ),
+  ],
+} satisfies Story<Month | null>;
+
 export const WithinDrawer: Story<Currency> = {
   args: CurrenciesArgs,
   decorators: [

package/src/inputs/SelectInput.tsx

@@ -430,6 +430,7 @@ export function SelectInputTriggerButton<T extends SelectInputTriggerButtonEleme
     <ListboxBase.Button
       ref={ref}
       as={PolymorphicWithOverrides}
+      role="combobox"
       __overrides={{ as, ...interactionProps }}
       {...mergeProps({ onClick, onKeyDown }, restProps)}
     />
@@ -608,9 +609,12 @@ function SelectInputOptions<T = string>({
         <div className="np-select-input-query-container">
           <SearchInput
             ref={searchInputRef}
+            role="combobox"
             shape="rectangle"
             placeholder={filterPlaceholder}
             defaultValue={filterQuery}
+            aria-autocomplete="list"
+            aria-expanded
             aria-controls={listboxId}
             aria-describedby={showStatus ? statusId : undefined}
             onKeyDown={(event) => {

package/src/main.css

@@ -2387,6 +2387,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .np-input-group {
   display: inline-grid;
+  width: 100%;
   grid-auto-columns: minmax(0, 1fr);
   /* Prevent unwanted `group-hover/input` triggers */
   border-radius: 9999px;

package/src/moneyInput/MoneyInput.story.tsx

@@ -153,7 +153,7 @@ export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
+    await userEvent.click(canvas.getByRole('combobox'));
   },
 };