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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-fbd2ec1",
+  "version": "0.0.0-experimental-e1f66d5",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,12 +93,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-fbd2ec1",
+    "@transferwise/neptune-css": "14.16.0",
     "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-fbd2ec1",
+    "@transferwise/neptune-css": "^14.9.6",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/moneyInput/MoneyInput.tsx

@@ -381,6 +381,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           </div>
         ) : (
           <div
+            translate="no"
             className={clsx(
               this.style('input-group-btn'),
               this.style('amount-currency-select-btn'),

package/src/typeahead/Typeahead.spec.js

@@ -258,14 +258,6 @@ 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 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']>;
@@ -230,6 +228,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       }
     }
   };
+
   moveFocusedOption(offset: number) {
     this.setState((previousState) => {
       const { keyboardFocusedOptionIndex } = previousState;
@@ -238,10 +237,6 @@ 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,
       };
@@ -407,23 +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}
-                id={String(option.label.replace(/\s+/g, '-'))}
-                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>
@@ -518,11 +507,6 @@ 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,12 +20,10 @@ 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<
@@ -39,7 +37,6 @@ export default class TypeaheadInput<T> extends Component<
     super(props);
     this.state = {
       inputWidth: DEFAULT_INPUT_MIN_WIDTH,
-      keyboardFocusedOptionIndex: null,
     };
   }
 
@@ -79,7 +76,6 @@ export default class TypeaheadInput<T> extends Component<
       onFocus,
       onPaste,
       autoComplete,
-      ariaActivedescendant, // Declare the ariaActivedescendant variable
     } = this.props;
     const { inputWidth } = this.state;
 
@@ -90,11 +86,6 @@ 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,14 +51,6 @@ 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,24 +9,21 @@ export type TypeaheadOptionProps<T> = {
   selected?: boolean;
   onClick?: React.MouseEventHandler;
   query?: string;
-  id?: string;
 };
 
-const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {
-  const { option, selected = false, onClick = () => {}, query = '', id } = props;
+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-${id}`}
+      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 && (
@@ -35,6 +32,6 @@ const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref)
       </a>
     </li>
   );
-});
+};
 
 export default Option;