@transferwise/components 0.0.0-experimental-ad2ab5f → 0.0.0-experimental-9c03743

package/src/inputs/SelectInput.spec.tsx

@@ -3,7 +3,7 @@ import { userEvent } from '@testing-library/user-event';
 
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
-import { SelectInput } from './SelectInput';
+import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
 import { Field } from '../field/Field';
 
 mockMatchMedia();
@@ -216,4 +216,83 @@ describe('SelectInput', () => {
     );
     expect(screen.getByLabelText(/Currency/)).toHaveAttribute('aria-haspopup');
   });
+
+  describe('listbox label', () => {
+    const fieldLabel = 'Fruits';
+    const triggerLabel = 'Select fruit';
+    const options: SelectInputOptionItem[] = [
+      { type: 'option', value: 'Banana' },
+      { type: 'option', value: 'Orange' },
+      { type: 'option', value: 'Olive' },
+    ];
+    const setup = (props: Omit<SelectInputProps<string | null>, 'items'> = {}) =>
+      render(
+        <Field label={fieldLabel} id="selectId">
+          <SelectInput {...props} items={options} />
+        </Field>,
+      );
+
+    it("should propagate trigger's label if nothing is selected", async () => {
+      setup({
+        UNSAFE_triggerButtonProps: {
+          id: undefined,
+          'aria-labelledby': undefined,
+          'aria-describedby': undefined,
+          'aria-invalid': undefined,
+          'aria-label': triggerLabel,
+        },
+      });
+      const trigger = screen.getByRole('combobox');
+      await userEvent.click(trigger);
+      expect(screen.getByRole('listbox', { name: triggerLabel })).toBeInTheDocument();
+    });
+
+    it("should propagate trigger's label if an option is selected", async () => {
+      setup({
+        UNSAFE_triggerButtonProps: {
+          id: undefined,
+          'aria-labelledby': undefined,
+          'aria-describedby': undefined,
+          'aria-invalid': undefined,
+          'aria-label': triggerLabel,
+        },
+        value: options[1].value,
+      });
+      const trigger = screen.getByRole('combobox');
+      await userEvent.click(trigger);
+      expect(screen.getByRole('listbox', { name: triggerLabel })).toBeInTheDocument();
+    });
+
+    it("should propagate trigger's label by id", async () => {
+      const customLabelId = 'customLabelId';
+      setup({
+        UNSAFE_triggerButtonProps: {
+          id: undefined,
+          'aria-labelledby': customLabelId,
+          'aria-describedby': undefined,
+          'aria-invalid': undefined,
+          'aria-label': undefined,
+        },
+      });
+      const trigger = screen.getByRole('combobox');
+      await userEvent.click(trigger);
+      expect(screen.getByRole('listbox')).toHaveAttribute('aria-labelledby', customLabelId);
+    });
+
+    it("should propagate input's label by id", async () => {
+      setup();
+      const trigger = screen.getByRole('combobox');
+      await userEvent.click(trigger);
+      expect(screen.getByRole('listbox', { name: fieldLabel })).toBeInTheDocument();
+    });
+
+    it('should have no label if none of the above are provided', async () => {
+      render(<SelectInput items={options} />);
+      const trigger = screen.getByRole('combobox');
+      await userEvent.click(trigger);
+      const listBox = screen.getByRole('listbox');
+      expect(listBox).not.toHaveAttribute('aria-label');
+      expect(listBox).not.toHaveAttribute('aria-labelledby');
+    });
+  });
 });

package/src/inputs/SelectInput.story.tsx

@@ -20,7 +20,7 @@ import {
 } from './SelectInput';
 
 const meta = {
-  title: 'components/SelectInput',
+  title: 'Forms/SelectInput',
   component: SelectInput,
   tags: ['autodocs'],
   parameters: { actions: { argTypesRegex: '' } },
@@ -347,7 +347,7 @@ export const WithinField = {
   args: Months.args,
   decorators: [
     (Story) => (
-      <Field message="Something went wrong" sentiment="negative">
+      <Field message="Something went wrong" sentiment="negative" label="Month">
         <Story />
       </Field>
     ),

package/src/inputs/SelectInput.tsx

@@ -258,8 +258,9 @@ export function SelectInput<T = string, M extends boolean = false>({
   onClose,
   onClear,
 }: SelectInputProps<T, M>) {
-  const inputAttributes = useInputAttributes();
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
   const id = idProp ?? inputAttributes.id;
+
   const [open, setOpen] = useState(false);
 
   const initialized = useRef(false);
@@ -295,6 +296,40 @@ export function SelectInput<T = string, M extends boolean = false>({
   const listboxRef = useRef<HTMLDivElement>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
 
+  /**
+   * There are few ways to assign a label to a listbox:
+   * 1. (preferred) if the trigger button has a meaningful label
+   *    already, we can use the same thing. Example: MoneyInput
+   * 2. (fallback) We can use the input's main label
+   * 3. (ignored) we could follow Deque's suggestion and use the
+   *    option header, but this becomes highly complicated as we can
+   *    have multiple groups, or search or virtualisation enabled.
+   */
+  const getListBoxLabelProps = (): {
+    listBoxLabel?: string;
+    listBoxLabelledBy?: string;
+  } => {
+    if (UNSAFE_triggerButtonProps?.['aria-label']) {
+      return {
+        listBoxLabel: UNSAFE_triggerButtonProps['aria-label'],
+      };
+    }
+
+    if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {
+      return {
+        listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby'],
+      };
+    }
+
+    if (inputAttributes['aria-labelledby']) {
+      return {
+        listBoxLabelledBy: inputAttributes['aria-labelledby'],
+      };
+    }
+
+    return {};
+  };
+
   return (
     <ListboxBase
       name={name}
@@ -388,7 +423,7 @@ export function SelectInput<T = string, M extends boolean = false>({
             }}
           >
             <SelectInputOptions
-              id={`${id}Search`}
+              id={id ? `${id}Search` : undefined}
               items={items}
               renderValue={renderValue}
               renderFooter={renderFooter}
@@ -398,6 +433,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               listboxRef={listboxRef}
               filterQuery={deferredFilterQuery}
               onFilterChange={setFilterQuery}
+              {...getListBoxLabelProps()}
             />
           </OptionsOverlay>
         );
@@ -496,6 +532,8 @@ interface SelectInputOptionsProps<T = string>
   listboxRef: React.MutableRefObject<HTMLDivElement | null>;
   filterQuery: string;
   onFilterChange: (query: string) => void;
+  listBoxLabel?: string;
+  listBoxLabelledBy?: string;
 }
 
 function SelectInputOptions<T = string>({
@@ -509,6 +547,8 @@ function SelectInputOptions<T = string>({
   listboxRef,
   filterQuery,
   onFilterChange,
+  listBoxLabel,
+  listBoxLabelledBy,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
 
@@ -662,6 +702,8 @@ function SelectInputOptions<T = string>({
           id={listboxId}
           role="listbox"
           aria-orientation="vertical"
+          aria-label={listBoxLabel}
+          aria-labelledby={listBoxLabelledBy}
           tabIndex={0}
           className="np-select-input-listbox"
         >

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

@@ -137,4 +137,13 @@ describe('MoneyInput', () => {
       messages.selectCurrencyLabel.defaultMessage,
     );
   });
+
+  it('should have a listbox label', async () => {
+    render(<MoneyInput {...props} />);
+    const trigger = screen.getByRole('combobox');
+    await userEvent.click(trigger);
+    const triggerLabel = trigger.getAttribute('aria-label');
+    expect(triggerLabel).toBeTruthy();
+    expect(screen.getByRole('listbox', { name: triggerLabel ?? '' })).toBeInTheDocument();
+  });
 });

package/src/utilities/deprecatedProperty/{deprecatedProperty.ts → deprecatedProperty.js}

@@ -1,22 +1,6 @@
 import { logActionRequired } from '../logActionRequired';
 
-type DeprecatedMessageType = {
-  component: string;
-  propName: string;
-  message: string;
-  expiryDate?: Date;
-};
-
-type ValidatorType = (props: Record<string, any>, propName: string, ...rest: any[]) => Error | null;
-
-type DeprecatedOptionsType = {
-  component: string;
-  message?: string;
-  newProp?: string;
-  expiryDate?: Date;
-};
-
-const deprecatedMessage = ({ component, propName, message, expiryDate }: DeprecatedMessageType) => {
+const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
   const messages = [`${component} has deprecated the use of ${propName}.`];
 
   if (message) {
@@ -37,14 +21,11 @@ const deprecatedMessage = ({ component, propName, message, expiryDate }: Depreca
 };
 
 const deprecated =
-  (
-    validator: ValidatorType,
-    { component, message = '', newProp: newProperty, expiryDate }: DeprecatedOptionsType,
-  ) =>
-  (props: Record<string, any>, propertyName: string, ...rest: any[]) => {
+  (validator, { component, message = '', newProp: newProperty = null, expiryDate = null }) =>
+  (props, propertyName, ...rest) => {
     const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
 
-    if (props[propertyName] !== null && props[propertyName] !== undefined) {
+    if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
       logActionRequired(
         deprecatedMessage({
           component,

package/src/utilities/{logActionRequired.ts → logActionRequired.js}

@@ -1,11 +1,11 @@
-export function logActionRequired(message: string) {
+export function logActionRequired(message) {
   if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
     console.warn(message);
   }
 }
 
-export function logActionRequiredIf(message: string, conditional: boolean) {
+export function logActionRequiredIf(message, conditional) {
   if (conditional) {
     logActionRequired(message);
   }

package/build/types/test-utils/style-mock.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=style-mock.d.ts.map

package/build/types/test-utils/style-mock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/style-mock.ts"],"names":[],"mappings":""}

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -1,78 +0,0 @@
-import { userEvent, within, fn } from '@storybook/test';
-
-import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
-import { Field, FieldProps } from '../field/Field';
-import { Meta, type StoryObj } from '@storybook/react';
-
-type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
-
-const meta = {
-  title: 'Forms/InputWithDisplayFormat',
-  component: InputWithDisplayFormat,
-  render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {
-    return (
-      <Field label={label} id={args.id}>
-        <InputWithDisplayFormat id={args.id} {...args} />
-      </Field>
-    );
-  },
-  args: {
-    onFocus: fn(),
-    onBlur: fn(),
-    onChange: fn(),
-  },
-} satisfies Meta<typeof InputWithDisplayFormat>;
-export default meta;
-
-export const Basic: Story = {
-  args: {
-    label: 'Sort Code',
-    placeholder: '**-**-**',
-    displayPattern: '**-**-**',
-  },
-};
-
-export const CardNumber: Story = {
-  args: {
-    label: 'Card Number',
-    placeholder: '**** **** **** **** ***',
-    displayPattern: '**** **** **** **** ***',
-  },
-};
-
-export const CVC: Story = {
-  args: {
-    label: 'CVC',
-    placeholder: '***',
-    displayPattern: '***',
-    value: '',
-  },
-};
-
-export const ExpiryDate: Story = {
-  args: {
-    label: 'Expiry Date',
-    placeholder: '** / **',
-    displayPattern: '** / **',
-  },
-};
-
-export const SecurityPin: Story = {
-  args: {
-    label: 'Security Pin',
-    placeholder: '*-*-*-*-*-*',
-    displayPattern: '*-*-*-*-*-*',
-  },
-};
-
-export const SecurityPinPlay: Story = {
-  args: {
-    label: 'Security Pin Play',
-    placeholder: '*-*-*-*-*-*',
-    displayPattern: '*-*-*-*-*-*',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
-  },
-};