@transferwise/components 46.71.1 → 46.71.3

package/src/circularButton/__snapshots__/CircularButton.spec.tsx.snap

@@ -11,15 +11,15 @@ exports[`CircularButton defaults renders a button of type accent and priority pr
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -48,15 +48,15 @@ exports[`CircularButton priorities renders primary buttons 1`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -85,15 +85,15 @@ exports[`CircularButton priorities renders primary buttons 2`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -122,15 +122,15 @@ exports[`CircularButton priorities renders primary buttons 3`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -159,15 +159,15 @@ exports[`CircularButton priorities renders secondary buttons 1`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -196,15 +196,15 @@ exports[`CircularButton priorities renders secondary buttons 2`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -233,15 +233,15 @@ exports[`CircularButton priorities renders secondary buttons 3`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -270,15 +270,15 @@ exports[`CircularButton types renders accent buttons 1`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -307,15 +307,15 @@ exports[`CircularButton types renders negative buttons 1`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -344,15 +344,15 @@ exports[`CircularButton types renders positive buttons 1`] = `
       type="button"
     />
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-plus "
       data-testid="plus-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >

package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap

@@ -39,15 +39,15 @@ exports[`BottomSheet renders content when open 1`] = `
                   type="button"
                 >
                   <span
-                    aria-hidden="true"
                     class="tw-icon tw-icon-cross "
                     data-testid="cross-icon"
-                    role="presentation"
                   >
                     <svg
+                      aria-hidden="true"
                       fill="currentColor"
                       focusable="false"
                       height="16"
+                      role="none"
                       viewBox="0 0 24 24"
                       width="16"
                     >

package/src/common/closeButton/__snapshots__/CloseButton.spec.tsx.snap

@@ -8,15 +8,15 @@ exports[`CloseButton renders as expected 1`] = `
     type="button"
   >
     <span
-      aria-hidden="true"
       class="tw-icon tw-icon-cross "
       data-testid="cross-icon"
-      role="presentation"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         focusable="false"
         height="24"
+        role="none"
         viewBox="0 0 24 24"
         width="24"
       >

package/src/drawer/__snapshots__/Drawer.rtl.spec.tsx.snap

@@ -24,15 +24,15 @@ exports[`Drawer renders content when open 1`] = `
             type="button"
           >
             <span
-              aria-hidden="true"
               class="tw-icon tw-icon-cross "
               data-testid="cross-icon"
-              role="presentation"
             >
               <svg
+                aria-hidden="true"
                 fill="currentColor"
                 focusable="false"
                 height="24"
+                role="none"
                 viewBox="0 0 24 24"
                 width="24"
               >

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

@@ -38,15 +38,15 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
           type="button"
         >
           <span
-            aria-hidden="true"
             class="tw-icon tw-icon-cross "
             data-testid="cross-icon"
-            role="presentation"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               focusable="false"
               height="24"
+              role="none"
               viewBox="0 0 24 24"
               width="24"
             >
@@ -153,15 +153,15 @@ exports[`FlowNavigation renders as expected 1`] = `
           type="button"
         >
           <span
-            aria-hidden="true"
             class="tw-icon tw-icon-cross "
             data-testid="cross-icon"
-            role="presentation"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               focusable="false"
               height="24"
+              role="none"
               viewBox="0 0 24 24"
               width="24"
             >

package/src/inputs/SelectInput.docs.mdx

@@ -0,0 +1,21 @@
+import { Meta } from '@storybook/blocks';
+import { MoneyInput } from '..';
+
+<Meta title="Forms/SelectInput/Accessibility" />
+
+# Accessibility
+
+## Labelling
+
+In order for the `<SelectInput />` to be considered accessible, it must be provided with a matching label, preferably via the <a href="/?path=/docs/field--docs">Field</a> component.
+
+Additionally, the `listbox` container that holds all the options is also expected to have its own label, which the component will attempt to resolve by looking in the following places:
+
+1. `UNSAFE_triggerButtonProps['aria-label']` prop, which reuses the custom label provided for the trigger button.
+   <br /> A good example of this strategy is the `<MoneyInput />` component, internally setting
+   `"Select currency"` as a trigger button label, which then gets automatically applied to the
+   `listbox`.
+2. `UNSAFE_triggerButtonProps['aria-labelledby']` prop, which holds the id of the element labelling the trigger button.
+3. Correctly paired input `<label />` text, ideally via the `Field` component.
+
+> Using option group heading is possible but complicated as we can have multiple groups, and those are not necessarily rendered consistently if search or virtualisation are enabled.

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,97 @@ 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 requiredTriggerButtonProps = {
+      id: undefined,
+      'aria-labelledby': undefined,
+      'aria-describedby': undefined,
+      'aria-invalid': undefined,
+      'aria-label': undefined,
+    };
+
+    const renderSelectInput = (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 () => {
+      renderSelectInput({
+        UNSAFE_triggerButtonProps: {
+          ...requiredTriggerButtonProps,
+          '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 () => {
+      renderSelectInput({
+        UNSAFE_triggerButtonProps: {
+          ...requiredTriggerButtonProps,
+          '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';
+      renderSelectInput({
+        UNSAFE_triggerButtonProps: {
+          ...requiredTriggerButtonProps,
+          'aria-labelledby': customLabelId,
+        },
+      });
+      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 () => {
+      renderSelectInput();
+      const trigger = screen.getByRole('combobox');
+      await userEvent.click(trigger);
+      expect(screen.getByRole('listbox', { name: fieldLabel })).toBeInTheDocument();
+    });
+
+    it('should prefer explicit label over label ids', async () => {
+      const customLabelId = 'customLabelId';
+      renderSelectInput({
+        UNSAFE_triggerButtonProps: {
+          ...requiredTriggerButtonProps,
+          'aria-labelledby': customLabelId,
+          'aria-label': triggerLabel,
+        },
+      });
+      const trigger = screen.getByRole('combobox');
+      await userEvent.click(trigger);
+      expect(screen.getByRole('listbox', { name: triggerLabel })).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).not.toHaveAttribute('aria-labelledby');
+    });
+
+    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,35 @@ export function SelectInput<T = string, M extends boolean = false>({
   const listboxRef = useRef<HTMLDivElement>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
 
+  /**
+   * Attempts to resolve the `listbox` label
+   * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling
+   */
+  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 +418,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 +428,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               listboxRef={listboxRef}
               filterQuery={deferredFilterQuery}
               onFilterChange={setFilterQuery}
+              {...getListBoxLabelProps()}
             />
           </OptionsOverlay>
         );
@@ -496,6 +527,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 +542,8 @@ function SelectInputOptions<T = string>({
   listboxRef,
   filterQuery,
   onFilterChange,
+  listBoxLabel,
+  listBoxLabelledBy,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
 
@@ -662,6 +697,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/instructionsList/InstructionsList.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '../test-utils';
+import { render, screen, within } from '../test-utils';
 
 import InstructionsList from '.';
 
@@ -34,8 +34,16 @@ describe('InstructionsList', () => {
 
     const instructions = container.querySelectorAll('.instruction');
     expect(instructions).toHaveLength(2);
-    expect(instructions[0]).toHaveAttribute('aria-label', dos[0]['aria-label']);
-    expect(instructions[1]).toHaveAttribute('aria-label', donts[0]['aria-label']);
+    expect(
+      within(instructions[0] as HTMLElement).getByRole('graphics-symbol', {
+        name: dos[0]['aria-label'],
+      }),
+    ).toBeInTheDocument();
+    expect(
+      within(instructions[1] as HTMLElement).getByRole('graphics-symbol', {
+        name: donts[0]['aria-label'],
+      }),
+    ).toBeInTheDocument();
   });
 
   it('should render donts first when sort is set to `dontsFirst`', () => {
@@ -48,7 +56,15 @@ describe('InstructionsList', () => {
 
     const instructions = container.querySelectorAll('.instruction');
     expect(instructions).toHaveLength(2);
-    expect(instructions[0]).toHaveAttribute('aria-label', donts[0]['aria-label']);
-    expect(instructions[1]).toHaveAttribute('aria-label', dos[0]['aria-label']);
+    expect(
+      within(instructions[0] as HTMLElement).getByRole('graphics-symbol', {
+        name: donts[0]['aria-label'],
+      }),
+    ).toBeInTheDocument();
+    expect(
+      within(instructions[1] as HTMLElement).getByRole('graphics-symbol', {
+        name: dos[0]['aria-label'],
+      }),
+    ).toBeInTheDocument();
   });
 });

package/src/instructionsList/InstructionsList.tsx

@@ -57,11 +57,19 @@ function Instruction({ item, type }: { item: ReactNode | InstructionNode; type:
   const isInstructionNode =
     typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
   return (
-    <li className="instruction" aria-label={isInstructionNode ? item['aria-label'] : undefined}>
+    <li className="instruction">
       {type === 'do' ? (
-        <DoIcon size={24} className={type} />
+        <DoIcon
+          size={24}
+          className={type}
+          title={isInstructionNode ? item['aria-label'] : undefined}
+        />
       ) : (
-        <DontIcon size={24} className={type} />
+        <DontIcon
+          size={24}
+          className={type}
+          title={isInstructionNode ? item['aria-label'] : undefined}
+        />
       )}
       <Body className="text-primary" type={Typography.BODY_LARGE}>
         {isInstructionNode ? item.content : item}

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/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap

@@ -35,15 +35,15 @@ exports[`OverlayHeader renders as expected 1`] = `
           type="button"
         >
           <span
-            aria-hidden="true"
             class="tw-icon tw-icon-cross "
             data-testid="cross-icon"
-            role="presentation"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               focusable="false"
               height="24"
+              role="none"
               viewBox="0 0 24 24"
               width="24"
             >