@transferwise/components 0.0.0-experimental-2a40639 → 0.0.0-experimental-12d074a

package/src/button/__snapshots__/Button.spec.js.snap

@@ -3,6 +3,8 @@
 exports[`Button alternative states renders as block if block is true 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-block np-btn-block btn-accent btn-priority-1"
     type="button"
@@ -15,6 +17,8 @@ exports[`Button alternative states renders as block if block is true 1`] = `
 exports[`Button by default renders a medium button of type accent and priority primary 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
@@ -27,6 +31,7 @@ exports[`Button by default renders a medium button of type accent and priority p
 exports[`Button by default renders an anchor tag with button styles of type accent and priority primary 1`] = `
 <div>
   <a
+    aria-busy="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     href="#"
@@ -39,6 +44,8 @@ exports[`Button by default renders an anchor tag with button styles of type acce
 exports[`Button deprecated types renders danger as negative buttons with priority secondary and logs a warning 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
     type="button"
@@ -51,6 +58,8 @@ exports[`Button deprecated types renders danger as negative buttons with priorit
 exports[`Button deprecated types renders link as accent buttons with priority tertiary and logs a warning 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-3"
     type="button"
@@ -63,6 +72,8 @@ exports[`Button deprecated types renders link as accent buttons with priority te
 exports[`Button deprecated types renders pay as positive buttons and logs a warning 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
     type="button"
@@ -75,6 +86,8 @@ exports[`Button deprecated types renders pay as positive buttons and logs a warn
 exports[`Button deprecated types renders primary as accent buttons and logs a warning 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
@@ -87,6 +100,8 @@ exports[`Button deprecated types renders primary as accent buttons and logs a wa
 exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-2"
     type="button"
@@ -99,6 +114,8 @@ exports[`Button priorities defaults tertiary buttons to secondary for positive b
 exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 2`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
     type="button"
@@ -111,6 +128,8 @@ exports[`Button priorities defaults tertiary buttons to secondary for positive b
 exports[`Button priorities renders primary buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
@@ -123,6 +142,8 @@ exports[`Button priorities renders primary buttons 1`] = `
 exports[`Button priorities renders primary buttons 2`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
     type="button"
@@ -135,6 +156,8 @@ exports[`Button priorities renders primary buttons 2`] = `
 exports[`Button priorities renders primary buttons 3`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-1"
     type="button"
@@ -147,6 +170,8 @@ exports[`Button priorities renders primary buttons 3`] = `
 exports[`Button priorities renders secondary buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-2"
     type="button"
@@ -159,6 +184,8 @@ exports[`Button priorities renders secondary buttons 1`] = `
 exports[`Button priorities renders secondary buttons 2`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-2"
     type="button"
@@ -171,6 +198,8 @@ exports[`Button priorities renders secondary buttons 2`] = `
 exports[`Button priorities renders secondary buttons 3`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
     type="button"
@@ -183,6 +212,8 @@ exports[`Button priorities renders secondary buttons 3`] = `
 exports[`Button priorities renders tertiary buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-3"
     type="button"
@@ -195,6 +226,8 @@ exports[`Button priorities renders tertiary buttons 1`] = `
 exports[`Button sizes renders large buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-lg np-btn np-btn-lg btn-accent btn-priority-1"
     type="button"
@@ -207,6 +240,8 @@ exports[`Button sizes renders large buttons 1`] = `
 exports[`Button sizes renders medium buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
@@ -219,6 +254,8 @@ exports[`Button sizes renders medium buttons 1`] = `
 exports[`Button sizes renders small buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-sm np-btn np-btn-sm btn-accent btn-priority-1"
     type="button"
@@ -231,6 +268,8 @@ exports[`Button sizes renders small buttons 1`] = `
 exports[`Button types renders accent buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
     type="button"
@@ -243,6 +282,8 @@ exports[`Button types renders accent buttons 1`] = `
 exports[`Button types renders negative buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-negative btn-priority-1"
     type="button"
@@ -255,6 +296,8 @@ exports[`Button types renders negative buttons 1`] = `
 exports[`Button types renders positive buttons 1`] = `
 <div>
   <button
+    aria-busy="false"
+    aria-disabled="false"
     aria-live="off"
     class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
     type="button"

package/src/main.css

@@ -543,6 +543,9 @@ div.critical-comms .critical-comms-body {
 .np-btn.np-btn-xs.btn-block > span.btn-loader {
   top: 0;
 }
+.np-btn.disabled[class] {
+  pointer-events: auto;
+}
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;

package/src/typeahead/Typeahead.spec.js

@@ -347,6 +347,12 @@ describe('Typeahead', () => {
       expect(options.every((label, i) => label === props.options[i].label)).toBe(true);
     });
 
+    it('renders dropdown-menu if has options', () => {
+      expect(component.find('.dropdown-menu')).toHaveLength(1);
+      component.setProps({ options: [] });
+      expect(component.find('.dropdown-menu')).toHaveLength(0);
+    });
+
     it('does not render new option if showNewEntry is false', () => {
       component.setProps({
         allowNew: true,

package/src/typeahead/Typeahead.story.tsx

@@ -6,6 +6,7 @@ import Typeahead, { type TypeaheadOption } from './Typeahead';
 import { Size } from '../common';
 import { useState } from 'react';
 import { Input } from '../inputs/Input';
+import { Field } from '../field/Field';
 
 type Story = StoryObj<typeof Typeahead>;
 
@@ -103,15 +104,17 @@ export const Basic: Story = {
 
 export const Creatable: Story = {
   render: (args) => (
-    <Typeahead
-      {...args}
-      allowNew
-      multiple
-      initialValue={[]}
-      validateChip={validateOptionAsEmail}
-      addon={<SearchIcon size={24} />}
-      options={[]}
-    />
+    <Field id={`input-${args.id}`} label="Typeahead with values">
+      <Typeahead
+        {...args}
+        allowNew
+        multiple
+        initialValue={[]}
+        validateChip={validateOptionAsEmail}
+        addon={<SearchIcon size={24} />}
+        options={[]}
+      />
+    </Field>
   ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

package/src/typeahead/Typeahead.tsx

@@ -401,20 +401,22 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
         className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}
         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);
-              }}
-            />
-          ))}
-          {footer}
-        </ul>
+        {!!optionsToRender.length && (
+          <ul className="dropdown-menu" role="menu">
+            {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.spec.js

@@ -45,6 +45,12 @@ describe('Typeahead input', () => {
     expect(inputWrapper().find('span')).toHaveLength(selected.length);
   });
 
+  it('adds aria-controls prop if dropdown is open', () => {
+    expect(component.prop('aria-controls')).toBeUndefined();
+    component.setProps({ dropdownOpen: true });
+    expect(component.prop('aria-controls')).toBe('menu-test');
+  });
+
   it('passes all callbacks to input', () => {
     const event = {};
     const extraProps = {

package/src/typeahead/typeaheadInput/TypeaheadInput.tsx

@@ -91,7 +91,7 @@ export default class TypeaheadInput<T> extends Component<
         aria-autocomplete="list"
         aria-expanded={dropdownOpen}
         aria-haspopup="listbox"
-        aria-controls={`menu-${typeaheadId}`}
+        aria-controls={dropdownOpen ? `menu-${typeaheadId}` : undefined}
         autoComplete={autoComplete}
         role="combobox"
         value={value}