@transferwise/components 0.0.0-experimental-2b74aa5 → 0.0.0-experimental-81a961c

package/src/inputs/SelectInput.tsx

@@ -258,7 +258,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 +386,7 @@ export function SelectInput<T = string, M extends boolean = false>({
             }}
           >
             <SelectInputOptions
+              id={`${id}Search`}
               items={items}
               renderValue={renderValue}
               renderFooter={renderFooter}
@@ -488,7 +488,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 +497,7 @@ interface SelectInputOptionsProps<T = string>
 }
 
 function SelectInputOptions<T = string>({
+  id,
   items,
   renderValue = String,
   renderFooter,
@@ -609,9 +610,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/moneyInput/MoneyInput.docs.mdx

@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Forms/MoneyInput/Dev notes" />
+
+# Dev notes
+
+## 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.rtl.spec.tsx

@@ -51,6 +51,7 @@ describe('MoneyInput', () => {
   const props = {
     currencies,
     selectedCurrency: currencies[1],
+    searchPlaceholder: 'Type a currency / country',
     amount: 1000,
     onAmountChange: jest.fn(),
     onCurrencyChange: jest.fn(),
@@ -90,4 +91,41 @@ 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$/),
+      );
+    });
+  });
 });

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

package/src/typeahead/Typeahead.tsx

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import { DebouncedFunc } from 'lodash';
 import clamp from 'lodash.clamp';
 import debounce from 'lodash.debounce';
-import React, { Component, ReactNode } from 'react';
+import { Component, ReactNode } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import Chip from '../chips/Chip';
@@ -101,7 +101,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     size: Size.MEDIUM,
     validateChip: () => true,
   } satisfies Partial<TypeaheadProps<unknown>>;
-  optionRefs: (React.RefObject<HTMLLIElement> | null)[];
 
   constructor(props: TypeaheadPropsWithInputAttributes<T>) {
     super(props);
@@ -116,7 +115,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       optionsShown: false,
       isFocused: false,
     };
-    this.optionRefs = [] as (React.RefObject<HTMLLIElement> | null)[];
   }
 
   handleSearchDebounced: DebouncedFunc<Typeahead<T>['handleSearch']>;
@@ -199,9 +197,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     const { keyboardFocusedOptionIndex, query, selected } = this.state;
     const chipsMode = !showSuggestions && allowNew && multiple;
 
-    const { key } = event;
-    console.log(`Key pressed: ${key}`);
-
     if (chipsMode && ['Enter', 'Tab', ...chipSeparators].includes(event.key) && query.trim()) {
       event.preventDefault();
       this.selectItem({ label: query });
@@ -209,14 +204,10 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       switch (event.key) {
         case 'ArrowDown':
           event.preventDefault();
-          console.log('Down');
-          console.log(keyboardFocusedOptionIndex);
           this.moveFocusedOption(1);
           break;
         case 'ArrowUp':
           event.preventDefault();
-          console.log('Up');
-          console.log(keyboardFocusedOptionIndex);
           this.moveFocusedOption(-1);
           break;
         case 'Enter':
@@ -237,29 +228,17 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       }
     }
   };
+
   moveFocusedOption(offset: number) {
     this.setState((previousState) => {
-      let { keyboardFocusedOptionIndex } = previousState;
+      const { keyboardFocusedOptionIndex } = previousState;
       const { options } = this.props;
-
-      // Set keyboardFocusedOptionIndex to 0 if it's null
-      if (keyboardFocusedOptionIndex === null) {
-        keyboardFocusedOptionIndex = 0;
-      } else {
-        keyboardFocusedOptionIndex = clamp(
-          keyboardFocusedOptionIndex + offset,
-          0,
-          options.length - 1,
-        );
-      }
-
-      const optionRef = this.optionRefs[keyboardFocusedOptionIndex];
-      if (optionRef?.current) {
-        optionRef.current.focus(); // Set focus on the option element
+      let index = 0;
+      if (keyboardFocusedOptionIndex !== null) {
+        index = clamp(keyboardFocusedOptionIndex + offset, 0, options.length - 1);
       }
-
       return {
-        keyboardFocusedOptionIndex,
+        keyboardFocusedOptionIndex: index,
       };
     });
   }
@@ -423,22 +402,17 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
         id={`menu-${id}`}
       >
         <ul className="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
-          {optionsToRender.map((option, idx) => {
-            const ref = React.createRef<HTMLLIElement>();
-            this.optionRefs[idx] = ref;
-            return (
-              <TypeaheadOption
-                key={`${option.label}${idx.toString()}`}
-                ref={ref}
-                query={query}
-                option={option}
-                selected={keyboardFocusedOptionIndex === idx}
-                onClick={(event) => {
-                  this.onOptionSelected(event, option);
-                }}
-              />
-            );
-          })}
+          {optionsToRender.map((option, idx) => (
+            <TypeaheadOption
+              key={`${option.label}${idx.toString()}`}
+              query={query}
+              option={option}
+              selected={keyboardFocusedOptionIndex === idx}
+              onClick={(event) => {
+                this.onOptionSelected(event, option);
+              }}
+            />
+          ))}
           {footer}
         </ul>
       </div>

package/src/typeahead/typeaheadInput/TypeaheadInput.tsx

@@ -24,7 +24,6 @@ export type TypeaheadInputProps<T> = {
 
 type TypeaheadInputState = {
   inputWidth: number;
-  keyboardFocusedOptionIndex: number | null;
 };
 
 export default class TypeaheadInput<T> extends Component<
@@ -38,7 +37,6 @@ export default class TypeaheadInput<T> extends Component<
     super(props);
     this.state = {
       inputWidth: DEFAULT_INPUT_MIN_WIDTH,
-      keyboardFocusedOptionIndex: null,
     };
   }
 
@@ -88,7 +86,6 @@ export default class TypeaheadInput<T> extends Component<
         className={clsx(multiple && 'typeahead__input')}
         name={name}
         id={`input-${typeaheadId}`}
-        aria-activedescendant={`menu-${typeaheadId} ${this.state.keyboardFocusedOptionIndex !== null ? `option-${this.state.keyboardFocusedOptionIndex}` : ''}`}
         autoFocus={autoFocus}
         placeholder={hasPlaceholder ? placeholder : ''}
         aria-autocomplete="list"

package/src/typeahead/typeaheadOption/TypeaheadOption.tsx

@@ -1,5 +1,5 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 
 import { TypeaheadOption } from '../Typeahead';
 import highlight from '../util/highlight';
@@ -11,21 +11,19 @@ export type TypeaheadOptionProps<T> = {
   query?: string;
 };
 
-const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {
+const Option = <T,>(props: TypeaheadOptionProps<T>) => {
   const { option, selected = false, onClick = () => {}, query = '' } = props;
   const { label, note, secondary } = option;
 
   return (
     <li
-      ref={ref}
       role="option"
-      aria-selected={selected ? 'true' : 'false'}
-      id={`option-${props.option.label}`}
+      aria-selected="false"
       className={clsx('typeahead__option tw-dropdown-item clickable', {
         'tw-dropdown-item--focused': selected,
       })}
     >
-      <a className="dropdown-item" href="#" tabIndex={0} onClick={onClick}>
+      <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
         <span>{highlight(label, query)}</span>
         {note && <span className="np-text-body-default m-l-1">{note}</span>}
         {secondary && (
@@ -34,6 +32,6 @@ const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref)
       </a>
     </li>
   );
-});
+};
 
 export default Option;