@transferwise/components 0.0.0-experimental-9254674 → 0.0.0-experimental-fbd2ec1

package/src/i18n/it.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(Facoltativo)",
   "neptune.Link.opensInNewTab": "(si apre in una nuova scheda)",
   "neptune.MoneyInput.Select.placeholder": "Seleziona un'opzione...",
-  "neptune.MoneyInput.Select.selectCurrencyLabel": "Scegli la valuta",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Seleziona un'opzione...",
   "neptune.Select.searchPlaceholder": "Cerca...",
   "neptune.SelectInput.noResultsFound": "Nessun risultato trovato",

package/src/i18n/ja.json

@@ -21,7 +21,6 @@
   "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/pl.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(opcjonalne)",
   "neptune.Link.opensInNewTab": "(otworzy się w nowej zakładce)",
   "neptune.MoneyInput.Select.placeholder": "Wybierz opcję...",
-  "neptune.MoneyInput.Select.selectCurrencyLabel": "Wybierz walutę",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wybierz opcję...",
   "neptune.Select.searchPlaceholder": "Wyszukaj...",
   "neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",

package/src/i18n/pt.json

@@ -21,7 +21,6 @@
   "neptune.Label.optional": "(Opcional)",
   "neptune.Link.opensInNewTab": "(abre em uma nova aba)",
   "neptune.MoneyInput.Select.placeholder": "Escolha uma opção...",
-  "neptune.MoneyInput.Select.selectCurrencyLabel": "Selecione a moeda",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Escolha uma opção...",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",

package/src/i18n/ro.json

@@ -21,7 +21,6 @@
   "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,7 +21,6 @@
   "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,7 +21,6 @@
   "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,7 +21,6 @@
   "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,7 +21,6 @@
   "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,7 +21,6 @@
   "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/main.css

@@ -4368,35 +4368,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/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/typeahead/Typeahead.spec.js

@@ -258,6 +258,14 @@ describe('Typeahead', () => {
     expect(event.preventDefault).toHaveBeenCalledTimes(1);
   });
 
+  it('sets aria-activedescendant correctly based on focus', () => {
+    const inputElement = input().getDOMNode();
+
+    doTimes(3, () => input().simulate('keyDown', fakeKeyDownEventForKey('ArrowDown')));
+
+    expect(inputElement).toHaveAttribute('aria-activedescendant', 'menu-test option-Test2');
+  });
+
   it('displays alert when alert is provided and chips are valid or alert type is error', () => {
     const event = {
       key: 'Enter',

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 { Component, ReactNode } from 'react';
+import React, { Component, ReactNode } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import Chip from '../chips/Chip';
@@ -101,6 +101,7 @@ 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);
@@ -115,6 +116,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       optionsShown: false,
       isFocused: false,
     };
+    this.optionRefs = [] as (React.RefObject<HTMLLIElement> | null)[];
   }
 
   handleSearchDebounced: DebouncedFunc<Typeahead<T>['handleSearch']>;
@@ -228,7 +230,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       }
     }
   };
-
   moveFocusedOption(offset: number) {
     this.setState((previousState) => {
       const { keyboardFocusedOptionIndex } = previousState;
@@ -237,6 +238,10 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       if (keyboardFocusedOptionIndex !== null) {
         index = clamp(keyboardFocusedOptionIndex + offset, 0, options.length - 1);
       }
+      const optionRef = this.optionRefs[index];
+      if (optionRef?.current) {
+        optionRef.current.focus(); // Set focus on the option element
+      }
       return {
         keyboardFocusedOptionIndex: index,
       };
@@ -402,17 +407,23 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
         id={`menu-${id}`}
       >
         <ul className="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
-          {optionsToRender.map((option, idx) => (
-            <TypeaheadOption
-              key={`${option.label}${idx.toString()}`}
-              query={query}
-              option={option}
-              selected={keyboardFocusedOptionIndex === idx}
-              onClick={(event) => {
-                this.onOptionSelected(event, option);
-              }}
-            />
-          ))}
+          {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}
+                id={String(option.label.replace(/\s+/g, '-'))}
+                onClick={(event) => {
+                  this.onOptionSelected(event, option);
+                }}
+              />
+            );
+          })}
           {footer}
         </ul>
       </div>
@@ -507,6 +518,11 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
               typeaheadId={id}
               renderChip={this.renderChip}
               autoComplete={inputAutoComplete}
+              ariaActivedescendant={
+                keyboardFocusedOptionIndex !== null && options[keyboardFocusedOptionIndex]
+                  ? `option-${options[keyboardFocusedOptionIndex].label.replace(/\s+/g, '-')}`
+                  : undefined
+              }
               onChange={this.handleOnChange}
               onKeyDown={this.handleOnKeyDown}
               onFocus={this.handleOnFocus}

package/src/typeahead/typeaheadInput/TypeaheadInput.tsx

@@ -20,10 +20,12 @@ export type TypeaheadInputProps<T> = {
   onFocus: () => void;
   onPaste: React.ClipboardEventHandler<HTMLInputElement>;
   renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;
+  ariaActivedescendant?: string;
 } & Pick<TypeaheadProps<T>, 'id' | 'name' | 'autoFocus' | 'multiple' | 'placeholder' | 'maxHeight'>;
 
 type TypeaheadInputState = {
   inputWidth: number;
+  keyboardFocusedOptionIndex: number | null;
 };
 
 export default class TypeaheadInput<T> extends Component<
@@ -37,6 +39,7 @@ export default class TypeaheadInput<T> extends Component<
     super(props);
     this.state = {
       inputWidth: DEFAULT_INPUT_MIN_WIDTH,
+      keyboardFocusedOptionIndex: null,
     };
   }
 
@@ -76,6 +79,7 @@ export default class TypeaheadInput<T> extends Component<
       onFocus,
       onPaste,
       autoComplete,
+      ariaActivedescendant, // Declare the ariaActivedescendant variable
     } = this.props;
     const { inputWidth } = this.state;
 
@@ -86,6 +90,11 @@ export default class TypeaheadInput<T> extends Component<
         className={clsx(multiple && 'typeahead__input')}
         name={name}
         id={`input-${typeaheadId}`}
+        aria-activedescendant={
+          ariaActivedescendant
+            ? `menu-${typeaheadId} ${ariaActivedescendant}`
+            : `menu-${typeaheadId}`
+        }
         autoFocus={autoFocus}
         placeholder={hasPlaceholder ? placeholder : ''}
         aria-autocomplete="list"

package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js

@@ -51,6 +51,14 @@ describe('Typeahead Option', () => {
     expect(component.is('.tw-dropdown-item--focused')).toBe(true);
   });
 
+  it('expect aria-selected to be true', () => {
+    component.setProps({
+      selected: true,
+    });
+
+    expect(component.prop('aria-selected')).toBe('true');
+  });
+
   it('calls onClick when clicked', () => {
     const onClick = jest.fn();
     component.setProps({

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';
@@ -9,21 +9,24 @@ export type TypeaheadOptionProps<T> = {
   selected?: boolean;
   onClick?: React.MouseEventHandler;
   query?: string;
+  id?: string;
 };
 
-const Option = <T,>(props: TypeaheadOptionProps<T>) => {
-  const { option, selected = false, onClick = () => {}, query = '' } = props;
+const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {
+  const { option, selected = false, onClick = () => {}, query = '', id } = props;
   const { label, note, secondary } = option;
 
   return (
     <li
+      ref={ref}
       role="option"
-      aria-selected="false"
+      aria-selected={selected ? 'true' : 'false'}
+      id={`option-${id}`}
       className={clsx('typeahead__option tw-dropdown-item clickable', {
         'tw-dropdown-item--focused': selected,
       })}
     >
-      <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
+      <a className="dropdown-item" href="#" tabIndex={0} onClick={onClick}>
         <span>{highlight(label, query)}</span>
         {note && <span className="np-text-body-default m-l-1">{note}</span>}
         {secondary && (
@@ -32,6 +35,6 @@ const Option = <T,>(props: TypeaheadOptionProps<T>) => {
       </a>
     </li>
   );
-};
+});
 
 export default Option;