@transferwise/components 0.0.0-experimental-44982e0 → 0.0.0-experimental-f13f3a7

package/build/index.esm.js

@@ -11939,7 +11939,7 @@ class TypeaheadInput extends Component {
       autoFocus,
       multiple,
       name,
-      optionsShown,
+      dropdownOpen,
       placeholder,
       selected,
       value,
@@ -11961,7 +11961,7 @@ class TypeaheadInput extends Component {
       autoFocus: autoFocus,
       placeholder: hasPlaceholder ? placeholder : '',
       "aria-autocomplete": "list",
-      "aria-expanded": optionsShown,
+      "aria-expanded": dropdownOpen,
       "aria-haspopup": "listbox",
       "aria-controls": `menu-${typeaheadId}`,
       autoComplete: autoComplete,
@@ -12463,7 +12463,7 @@ class Typeahead extends Component {
           }), /*#__PURE__*/jsx(TypeaheadInput, {
             autoFocus,
             multiple,
-            optionsShown,
+            dropdownOpen,
             placeholder,
             selected,
             maxHeight,

package/build/index.js

@@ -11972,7 +11972,7 @@ class TypeaheadInput extends React.Component {
       autoFocus,
       multiple,
       name,
-      optionsShown,
+      dropdownOpen,
       placeholder,
       selected,
       value,
@@ -11994,7 +11994,7 @@ class TypeaheadInput extends React.Component {
       autoFocus: autoFocus,
       placeholder: hasPlaceholder ? placeholder : '',
       "aria-autocomplete": "list",
-      "aria-expanded": optionsShown,
+      "aria-expanded": dropdownOpen,
       "aria-haspopup": "listbox",
       "aria-controls": `menu-${typeaheadId}`,
       autoComplete: autoComplete,
@@ -12496,7 +12496,7 @@ class Typeahead extends React.Component {
           }), /*#__PURE__*/jsxRuntime.jsx(TypeaheadInput, {
             autoFocus,
             multiple,
-            optionsShown,
+            dropdownOpen,
             placeholder,
             selected,
             maxHeight,

package/build/types/typeahead/typeaheadInput/TypeaheadInput.d.ts

@@ -4,7 +4,7 @@ export type TypeaheadInputProps<T> = {
     typeaheadId: string;
     value: string;
     selected: readonly TypeaheadOption<T>[];
-    optionsShown?: boolean;
+    dropdownOpen?: boolean;
     autoComplete: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
     onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-44982e0",
+  "version": "0.0.0-experimental-f13f3a7",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/typeahead/Typeahead.spec.js

@@ -370,5 +370,14 @@ describe('Typeahead', () => {
       input().simulate('change', { target: { value: 'test' } });
       expect(menu().is('.open')).toBe(true);
     });
+
+    it('sets aria-expanded to true when options are shown', () => {
+      expect(input().prop('aria-expanded')).toBe(false);
+      // we don't want aria-expanded to be true on focus or before 3 characters are entered (that's when the menu is shown)
+      input().simulate('change', { target: { value: 'aa' } });
+      expect(input().prop('aria-expanded')).toBe(false);
+      input().simulate('change', { target: { value: 'aaa' } });
+      expect(input().prop('aria-expanded')).toBe(true);
+    });
   });
 });

package/src/typeahead/Typeahead.tsx

@@ -484,7 +484,7 @@ export default class Typeahead<T> extends Component<TypeaheadProps<T>, Typeahead
               {...{
                 autoFocus,
                 multiple,
-                optionsShown,
+                dropdownOpen,
                 placeholder,
                 selected,
                 maxHeight,

package/src/typeahead/typeaheadInput/TypeaheadInput.tsx

@@ -13,7 +13,7 @@ export type TypeaheadInputProps<T> = {
   typeaheadId: string;
   value: string;
   selected: readonly TypeaheadOption<T>[];
-  optionsShown?: boolean;
+  dropdownOpen?: boolean;
   autoComplete: string;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
   onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
@@ -67,7 +67,7 @@ export default class TypeaheadInput<T> extends Component<
       autoFocus,
       multiple,
       name,
-      optionsShown,
+      dropdownOpen,
       placeholder,
       selected,
       value,
@@ -89,7 +89,7 @@ export default class TypeaheadInput<T> extends Component<
         autoFocus={autoFocus}
         placeholder={hasPlaceholder ? placeholder : ''}
         aria-autocomplete="list"
-        aria-expanded={optionsShown}
+        aria-expanded={dropdownOpen}
         aria-haspopup="listbox"
         aria-controls={`menu-${typeaheadId}`}
         autoComplete={autoComplete}