@transferwise/components 46.97.4 → 46.98.0

package/src/moneyInput/MoneyInput.tsx

@@ -262,11 +262,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
     this.props.onCurrencyChange?.(value);
   };
 
-  handleCustomAction = () => {
-    this.handleSearchChange('');
-    this.props.onCustomAction?.();
-  };
-
   handleSearchChange = (searchQuery: string) => {
     this.setState({ searchQuery });
     this.props.onSearchChange?.({
@@ -413,7 +408,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
                 this.props.onCustomAction
                   ? () => (
                       // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                      <div role="button" tabIndex={0} onClick={this.handleCustomAction}>
+                      <div role="button" tabIndex={0} onClick={this.props.onCustomAction}>
                         {this.props.customActionLabel}
                       </div>
                     )
@@ -421,7 +416,10 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
               }
               placeholder={this.props.intl.formatMessage(messages.selectPlaceholder)}
               filterable
-              filterPlaceholder={this.props.searchPlaceholder}
+              filterPlaceholder={
+                this.props.searchPlaceholder ||
+                this.props.intl.formatMessage(messages.searchPlaceholder)
+              }
               disabled={disabled}
               size={size}
               onChange={this.handleSelectChange}

package/src/phoneNumberInput/PhoneNumberInput.messages.ts

@@ -5,4 +5,12 @@ export default defineMessages({
     id: 'neptune.PhoneNumberInput.SelectInput.placeholder',
     defaultMessage: 'Select an option...',
   },
+  countryCodeLabel: {
+    id: 'neptune.PhoneNumberInput.countryCodeLabel',
+    defaultMessage: 'Country code',
+  },
+  phoneNumberLabel: {
+    id: 'neptune.PhoneNumberInput.phoneNumberLabel',
+    defaultMessage: 'Phone number',
+  },
 });

package/src/phoneNumberInput/PhoneNumberInput.spec.tsx

@@ -21,28 +21,30 @@ describe('PhoneNumberInput', () => {
   const customRender = (overrides: Partial<PhoneNumberInputProps> = {}, locale?: string) =>
     render(<PhoneNumberInput {...props} {...overrides} />, { locale });
 
-  const getPrefixEl = () => screen.getByRole('combobox');
-  const getInputEl = () => screen.getByRole('textbox');
+  const getCountryCodeSelect = () => screen.getByRole('combobox');
+  const getCountryCodeLabel = () => screen.getByText('Country code');
+  const getPhoneNumberInput = () => screen.getByRole('textbox');
+  const getPhoneNumberLabel = () => screen.getByText('Phone number');
 
   describe('defaults', () => {
     it('should set prefix control to default UK value', () => {
       customRender();
-      expect(getPrefixEl()).toHaveTextContent('+44');
+      expect(getCountryCodeSelect()).toHaveTextContent('+44');
     });
 
     it('should set number control to empty', () => {
       customRender();
-      expect(getInputEl()).toHaveValue('');
+      expect(getPhoneNumberInput()).toHaveValue('');
     });
 
     it('should not disable the select', () => {
       customRender();
-      expect(getPrefixEl()).toBeEnabled();
+      expect(getCountryCodeSelect()).toBeEnabled();
     });
 
     it('should not disable the input', () => {
       customRender();
-      expect(getInputEl()).toBeEnabled();
+      expect(getPhoneNumberInput()).toBeEnabled();
     });
   });
 
@@ -50,22 +52,54 @@ describe('PhoneNumberInput', () => {
     const prefix = '+39';
     const number = '123456789';
     customRender({ initialValue: `${prefix}${number}` });
-    expect(getPrefixEl()).toHaveTextContent(prefix);
-    expect(getInputEl()).toHaveValue(number);
+    expect(getCountryCodeSelect()).toHaveTextContent(prefix);
+    expect(getPhoneNumberInput()).toHaveValue(number);
   });
 
   describe('id prop', () => {
-    it('should not render id by default', () => {
+    it('should render sensible default IDs', () => {
       customRender();
-      expect(getPrefixEl()).not.toHaveAttribute('id');
-      expect(getInputEl()).not.toHaveAttribute('id');
+      const countryCodeSelectID = getCountryCodeSelect().getAttribute('id');
+      expect(countryCodeSelectID).toMatch(/^country-code-select-[a-z0-9]{6}$/);
+      const countryCodeLabelID = getCountryCodeLabel().getAttribute('id');
+      expect(countryCodeLabelID).toMatch(/^country-code-label-[a-z0-9]{6}$/);
+      const phoneNumberInputID = getPhoneNumberInput().getAttribute('id');
+      expect(phoneNumberInputID).toMatch(/^phone-number-input-[a-z0-9]{6}$/);
+      const phoneNumberLabelID = getPhoneNumberLabel().getAttribute('id');
+      expect(phoneNumberLabelID).toMatch(/^phone-number-label-[a-z0-9]{6}$/);
     });
 
-    it('should respect `id` for the input and ignore the select', () => {
+    it('should use the custom `id` as-is for the input but with slight modification for select', () => {
       const id = 'component-id';
       customRender({ id });
-      expect(getPrefixEl()).not.toHaveAttribute('id');
-      expect(getInputEl()).toHaveAttribute('id', id);
+      expect(getPhoneNumberInput()).toHaveAttribute('id', id);
+      expect(getPhoneNumberLabel()).toHaveAttribute('id', `${id}-phone-number-label`);
+      expect(getCountryCodeSelect()).toHaveAttribute('id', `${id}-country-code-select`);
+      expect(getCountryCodeLabel()).toHaveAttribute('id', `${id}-country-code-label`);
+    });
+
+    it('should set correct ARIA attributes on the country code select when id is provided', () => {
+      const id = 'my-id';
+      customRender({ id });
+      expect(getCountryCodeSelect()).toHaveAttribute('aria-labelledby', `${id}-country-code-label`);
+    });
+
+    it('should set correct ARIA attributes on the country code select when id is not provided', () => {
+      customRender();
+      const selectLabelledBy = getCountryCodeSelect().getAttribute('aria-labelledby');
+      expect(selectLabelledBy).toMatch(/^country-code-label-[a-z0-9]{6}$/);
+    });
+
+    it('should set correct ARIA attributes on the phone number input when id is provided', () => {
+      const id = 'my-id';
+      customRender({ id });
+      expect(getPhoneNumberInput()).toHaveAttribute('aria-labelledby', `${id}-phone-number-label`);
+    });
+
+    it('should set correct ARIA attributes on the phone number input when id is not provided', () => {
+      customRender();
+      const inputLabelledBy = getPhoneNumberInput().getAttribute('aria-labelledby');
+      expect(inputLabelledBy).toMatch(/^phone-number-label-[a-z0-9]{6}$/);
     });
   });
 
@@ -94,38 +128,38 @@ describe('PhoneNumberInput', () => {
       it(`'${number}' number should update the value properly`, async () => {
         await renderAndPaste(number);
 
-        expect(getPrefixEl()).toHaveTextContent(countryCode);
-        expect(getInputEl()).toHaveValue(localNumber);
+        expect(getCountryCodeSelect()).toHaveTextContent(countryCode);
+        expect(getPhoneNumberInput()).toHaveValue(localNumber);
         expect(props.onChange).toHaveBeenCalledWith(number.replace(/[\s-]+/g, ''), countryCode);
       });
     });
 
     it('should not paste invalid characters', async () => {
       await renderAndPaste('+36asdasdasd');
-      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
-      expect(getInputEl()).toHaveValue(initialNumber);
+      expect(getCountryCodeSelect()).toHaveTextContent(initialPrefix);
+      expect(getPhoneNumberInput()).toHaveValue(initialNumber);
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it('should not paste countries which are not in the select', async () => {
       await renderAndPaste('+9992342343423');
-      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
-      expect(getInputEl()).toHaveValue(initialNumber);
+      expect(getCountryCodeSelect()).toHaveTextContent(initialPrefix);
+      expect(getPhoneNumberInput()).toHaveValue(initialNumber);
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should not paste numbers which doesn't start with the country code", async () => {
       await renderAndPaste('0+36303932551');
-      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
-      expect(getInputEl()).toHaveValue(initialNumber);
+      expect(getCountryCodeSelect()).toHaveTextContent(initialPrefix);
+      expect(getPhoneNumberInput()).toHaveValue(initialNumber);
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should allow pasting numbers which don't contain a country code", async () => {
       const newNumber = '06303932551';
       await renderAndPaste(newNumber);
-      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
-      expect(getInputEl()).toHaveValue(newNumber);
+      expect(getCountryCodeSelect()).toHaveTextContent(initialPrefix);
+      expect(getPhoneNumberInput()).toHaveValue(newNumber);
       expect(props.onChange).toHaveBeenCalledWith(`${initialPrefix}${newNumber}`, initialPrefix);
     });
   });
@@ -136,12 +170,12 @@ describe('PhoneNumberInput', () => {
 
       it('should set the select to the longest matching prefix', () => {
         customRender(initialProps);
-        expect(getPrefixEl()).toHaveTextContent('+1868');
+        expect(getCountryCodeSelect()).toHaveTextContent('+1868');
       });
 
       it('should set the number input to the rest of the number', () => {
         customRender(initialProps);
-        expect(getInputEl()).toHaveValue('123456789');
+        expect(getPhoneNumberInput()).toHaveValue('123456789');
       });
     });
 
@@ -150,20 +184,20 @@ describe('PhoneNumberInput', () => {
 
       it('should empty the select', () => {
         customRender(initialProps);
-        expect(getPrefixEl()).toHaveTextContent('Select an option...');
+        expect(getCountryCodeSelect()).toHaveTextContent('Select an option...');
       });
 
       it('should put the whole value in the input without the plus', () => {
         customRender(initialProps);
-        expect(getInputEl()).toHaveValue('999123456789');
+        expect(getPhoneNumberInput()).toHaveValue('999123456789');
       });
     });
 
     describe('when an partial model is supplied (with a matching prefix)', () => {
       it('should set the select to the matching prefix and put the rest of the number in the suffix', () => {
         customRender({ initialValue: '+123' });
-        expect(getPrefixEl()).toHaveTextContent('+1');
-        expect(getInputEl()).toHaveValue('23');
+        expect(getCountryCodeSelect()).toHaveTextContent('+1');
+        expect(getPhoneNumberInput()).toHaveValue('23');
       });
     });
   });
@@ -171,8 +205,8 @@ describe('PhoneNumberInput', () => {
   describe('when disabled is true', () => {
     it('should disable both controls', () => {
       customRender({ disabled: true });
-      expect(getPrefixEl()).toBeDisabled();
-      expect(getInputEl()).toBeDisabled();
+      expect(getCountryCodeSelect()).toBeDisabled();
+      expect(getPhoneNumberInput()).toBeDisabled();
     });
   });
 
@@ -180,13 +214,13 @@ describe('PhoneNumberInput', () => {
     it('should use the provided placeholder', () => {
       const placeholder = 'custom placeholder';
       customRender({ placeholder });
-      expect(getInputEl()).toHaveAttribute('placeholder', placeholder);
+      expect(getPhoneNumberInput()).toHaveAttribute('placeholder', placeholder);
     });
 
     it('should use the provided searchPlaceholder', async () => {
       const searchPlaceholder = 'search placeholder';
       customRender({ searchPlaceholder });
-      await userEvent.click(getPrefixEl());
+      await userEvent.click(getCountryCodeSelect());
       expect(screen.getByRole('combobox', { name: searchPlaceholder })).toBeInTheDocument();
     });
   });
@@ -195,7 +229,7 @@ describe('PhoneNumberInput', () => {
     describe('and a value', () => {
       it('should use the prefix of the supplied value', () => {
         customRender({ initialValue: '+12345678' }, 'es');
-        expect(getPrefixEl()).toHaveTextContent('+1');
+        expect(getCountryCodeSelect()).toHaveTextContent('+1');
       });
     });
 
@@ -203,14 +237,14 @@ describe('PhoneNumberInput', () => {
       describe('and no country code', () => {
         it('should default the prefix to the local country', () => {
           customRender(undefined, 'es');
-          expect(getPrefixEl()).toHaveTextContent('+34');
+          expect(getCountryCodeSelect()).toHaveTextContent('+34');
         });
       });
 
       describe('and country code', () => {
         it('should override locale prefix with country specific prefix', () => {
           customRender({ countryCode: 'US' }, 'es');
-          expect(getPrefixEl()).toHaveTextContent('+1');
+          expect(getCountryCodeSelect()).toHaveTextContent('+1');
         });
       });
     });
@@ -220,7 +254,7 @@ describe('PhoneNumberInput', () => {
     describe('valid number', () => {
       it('should trigger onChange handler', async () => {
         customRender();
-        await userEvent.type(getInputEl(), '123');
+        await userEvent.type(getPhoneNumberInput(), '123');
         expect(props.onChange).toHaveBeenCalledWith('+44123', '+44');
       });
     });
@@ -228,7 +262,7 @@ describe('PhoneNumberInput', () => {
     describe('invalid number', () => {
       it('should trigger onChange with null value', async () => {
         customRender({ initialValue: '+1234' });
-        await userEvent.type(getInputEl(), '{Backspace}{Backspace}{Backspace}1');
+        await userEvent.type(getPhoneNumberInput(), '{Backspace}{Backspace}{Backspace}1');
         expect(props.onChange).toHaveBeenCalledWith(null, '+1');
       });
     });
@@ -236,7 +270,7 @@ describe('PhoneNumberInput', () => {
     describe('when user insert invalid character', () => {
       it('should strip them', async () => {
         customRender({ initialValue: '+12345678' });
-        await userEvent.type(getInputEl(), '123--');
+        await userEvent.type(getPhoneNumberInput(), '123--');
         expect(props.onChange).toHaveBeenCalledWith('+12345678123', '+1');
       });
     });
@@ -244,8 +278,8 @@ describe('PhoneNumberInput', () => {
     describe('overlapping prefix and suffix numbers', () => {
       it("shouldn't change the prefix number on matching suffix input", async () => {
         customRender({ countryCode: 'eg' });
-        await userEvent.type(getInputEl(), '1111111');
-        expect(getInputEl()).toHaveValue('1111111');
+        await userEvent.type(getPhoneNumberInput(), '1111111');
+        expect(getPhoneNumberInput()).toHaveValue('1111111');
         expect(props.onChange).toHaveBeenCalledWith('+201111111', '+20');
       });
     });
@@ -254,7 +288,7 @@ describe('PhoneNumberInput', () => {
   describe('when selectProps is supplied', () => {
     it('renders Select component with expected props', () => {
       customRender({ selectProps: { className: 'custom-class' } });
-      expect(getPrefixEl().parentElement).toHaveClass('custom-class');
+      expect(getCountryCodeSelect().parentElement).toHaveClass('custom-class');
     });
   });
 

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -4,7 +4,6 @@ import { useIntl } from 'react-intl';
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
 import { useInputAttributes } from '../inputs/contexts';
 import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
-
 import messages from './PhoneNumberInput.messages';
 import countries from './data/countries';
 import {
@@ -18,6 +17,7 @@ import {
   findCountryByPrefix,
 } from './utils';
 import { PhoneNumber } from './utils/explodeNumberModel';
+import { Input } from '../inputs/Input';
 
 const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
 
@@ -63,6 +63,25 @@ const PhoneNumberInput = ({
 
   const { locale, formatMessage } = useIntl();
 
+  const createId = (customID: string | undefined, backup: string): string => {
+    if (customID) {
+      return customID + (backup ? `-${backup}` : '');
+    }
+    const random = Math.random().toString(36).slice(2, 8);
+    return `${backup}-${random}`;
+  };
+
+  const ids = {
+    countryCode: {
+      label: createId(id, 'country-code-label'),
+      select: createId(id, 'country-code-select'),
+    },
+    phoneNumber: {
+      label: createId(id, 'phone-number-label'),
+      input: createId(id, id ? '' : 'phone-number-input'),
+    },
+  };
+
   const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {
     const cleanValue = initialValue ? cleanNumber(initialValue) : null;
 
@@ -150,6 +169,9 @@ const PhoneNumberInput = ({
       aria-labelledby={ariaLabelledBy}
       className="tw-telephone"
     >
+      <label className="sr-only" id={ids.countryCode.label}>
+        {formatMessage(messages.countryCodeLabel)}
+      </label>
       <div className="tw-telephone__country-select">
         <SelectInput
           placeholder={formatMessage(messages.selectInputPlaceholder)}
@@ -180,6 +202,13 @@ const PhoneNumberInput = ({
           filterPlaceholder={searchPlaceholder}
           disabled={disabled}
           size={size}
+          id={ids.countryCode.select}
+          UNSAFE_triggerButtonProps={{
+            id: ids.countryCode.select,
+            'aria-labelledby': ids.countryCode.label,
+            'aria-describedby': undefined,
+            'aria-invalid': undefined,
+          }}
           onChange={(prefix) => {
             const country = prefix != null ? findCountryByPrefix(prefix) : null;
             setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));
@@ -192,18 +221,21 @@ const PhoneNumberInput = ({
           {...selectProps}
         />
       </div>
+      <label className="sr-only" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>
+        {formatMessage(messages.phoneNumberLabel)}
+      </label>
       <div className="tw-telephone__number-input">
         <div className={`input-group input-group-${size}`}>
-          <input
-            id={id}
+          <Input
+            id={ids.phoneNumber.input}
             autoComplete="tel-national"
             name="phoneNumber"
             inputMode="numeric"
             value={internalValue.suffix}
-            className="form-control"
             disabled={disabled}
             required={required}
             placeholder={placeholder}
+            aria-labelledby={ids.phoneNumber.label}
             onChange={onSuffixChange}
             onPaste={onPaste}
             onFocus={onFocus}

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import PrimitiveAnchor from '..';
 
-export default {
+const meta: Meta<typeof PrimitiveAnchor> = {
   component: PrimitiveAnchor,
   title: 'Primitives/Anchor',
   args: {
@@ -16,7 +16,8 @@ export default {
     onMouseLeave: fn(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof PrimitiveAnchor>;
+};
+export default meta;
 
 type Story = StoryObj<typeof PrimitiveAnchor>;
 

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import PrimitiveButton from '..';
 
-export default {
+const meta: Meta<typeof PrimitiveButton> = {
   component: PrimitiveButton,
   title: 'Primitives/Button',
   args: {
@@ -15,7 +15,8 @@ export default {
     onMouseLeave: fn(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof PrimitiveButton>;
+};
+export default meta;
 
 type Story = StoryObj<typeof PrimitiveButton>;
 

package/src/promoCard/__snapshots__/PromoCard.spec.tsx.snap

@@ -23,6 +23,7 @@ exports[`PromoCard matches snapshot 1`] = `
     <img
       alt="Test Image"
       class="tw-image tw-image__stretch tw-image__shrink"
+      loading="lazy"
       src="test.jpg"
     />
   </div>

package/src/promoCard/__snapshots__/PromoCardGroup.spec.tsx.snap

@@ -33,6 +33,7 @@ exports[`PromoCardGroup matches snapshot 1`] = `
       <img
         alt=""
         class="tw-image tw-image__stretch tw-image__shrink"
+        loading="lazy"
         src="https://via.placeholder.com/150"
       />
     </div>
@@ -67,6 +68,7 @@ exports[`PromoCardGroup matches snapshot 1`] = `
       <img
         alt=""
         class="tw-image tw-image__stretch tw-image__shrink"
+        loading="lazy"
         src="https://via.placeholder.com/150"
       />
     </div>

package/src/radioGroup/RadioGroup.story.tsx

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 type Story<T extends string | number = string> = StoryObj<RadioGroupProps<T>>;
 
-export const Basic = {
+export const Basic: Story = {
   args: {
     selectedValue: 'radio-2',
     name: 'radio-group',
@@ -45,7 +45,7 @@ export const WithAvatars = {
   ...Basic,
   args: {
     ...Basic.args,
-    radios: Basic.args.radios.map(
+    radios: Basic?.args?.radios?.map(
       (radio) =>
         ({
           ...radio,

package/src/tabs/Tabs.spec.tsx

@@ -0,0 +1,137 @@
+import { Globals } from '@react-spring/web';
+import { render, screen, userEvent } from '../test-utils';
+import Tabs, { TabsProps } from './Tabs';
+
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
+if (typeof performance === 'undefined') {
+  global.performance = { now: () => Date.now() } as Performance;
+}
+
+const defaultTabsStatus = [false, true, false];
+
+function generateTabs(tabsStatus = defaultTabsStatus) {
+  return tabsStatus.map((disabled, index) => ({
+    disabled,
+    title: `Title ${index}`,
+    content: <p data-testid={`content-${index}`}>Content {index}</p>,
+  }));
+}
+
+beforeAll(() => {
+  Globals.assign({
+    skipAnimation: true,
+  });
+});
+
+describe('Tabs', () => {
+  const initialProps: TabsProps = {
+    animatePanelsOnClick: true,
+    tabs: generateTabs(),
+    changeTabOnSwipe: true,
+    name: 'testName',
+    headerWidth: 'block',
+    selected: 0,
+    transitionSpacing: 'default',
+    onTabSelect: jest.fn(),
+    className: 'custom-class-name',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+
+  afterEach(async () => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it('should render a tablist', () => {
+    render(<Tabs {...initialProps} />);
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+  });
+
+  it('should respect className', () => {
+    render(<Tabs {...initialProps} />);
+    expect(screen.getByRole('tablist').parentNode).toHaveClass(String(initialProps.className));
+  });
+
+  it('should respect `name` prop', () => {
+    render(<Tabs {...initialProps} />);
+    const controlsTarget = screen
+      .getByRole('tab', { selected: true })
+      .getAttribute('aria-controls');
+    expect(screen.getByRole('tabpanel')).toHaveAttribute('id', controlsTarget);
+  });
+
+  describe('transitionSpacing', () => {
+    test.each([
+      ['default', '100%'],
+      ['xs', '8px'],
+      ['sm', '16px'],
+      ['md', '24px'],
+      ['lg', '32px'],
+    ] as const)('should respect `%s`', (input, width) => {
+      render(<Tabs {...initialProps} transitionSpacing={input} />);
+      expect(screen.getByRole('tabpanel').nextSibling).toHaveStyle({ width });
+    });
+  });
+
+  it('should render correct number of tabs', () => {
+    render(<Tabs {...initialProps} />);
+    expect(screen.getAllByRole('tab')).toHaveLength(defaultTabsStatus.length);
+    initialProps.tabs.forEach(({ title }) => {
+      expect(screen.getByText(title)).toBeInTheDocument();
+    });
+  });
+
+  it('should show first tab content by default', () => {
+    render(<Tabs {...initialProps} />);
+    expect(screen.getAllByRole('tabpanel')).toHaveLength(1);
+    expect(screen.getByTestId('content-0')).toBeInTheDocument();
+  });
+
+  describe('tab switch', () => {
+    it('should call onTabSelecton on click', async () => {
+      render(<Tabs {...initialProps} />);
+      const thirdTab = screen.getAllByRole('tab')[2];
+      await user.click(thirdTab);
+
+      // It's called on mount first, that's why the count is at 2
+      expect(initialProps.onTabSelect).toHaveBeenCalledTimes(2);
+      expect(initialProps.onTabSelect).toHaveBeenCalledWith(2);
+    });
+
+    it('should call onTabSelecton when navigating with keyboard', async () => {
+      render(<Tabs {...initialProps} />);
+      await user.keyboard('{Tab}{Tab}{Tab}{Enter}');
+
+      // It's called on mount first, that's why the count is at 2
+      expect(initialProps.onTabSelect).toHaveBeenCalledTimes(2);
+      expect(initialProps.onTabSelect).toHaveBeenCalledWith(2);
+    });
+
+    it('should call onTabSelecton on swipe', async () => {
+      render(<Tabs {...initialProps} />);
+      await user.keyboard('{Tab}{Tab}{Tab}{Enter}');
+
+      // It's called on mount first, that's why the count is at 2
+      expect(initialProps.onTabSelect).toHaveBeenCalledTimes(2);
+      expect(initialProps.onTabSelect).toHaveBeenCalledWith(2);
+    });
+
+    it('should highlight selected tab', async () => {
+      const { rerender } = render(<Tabs {...initialProps} />);
+      rerender(<Tabs {...initialProps} selected={2} />);
+
+      expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Title 2');
+    });
+
+    it('should switch content tab', async () => {
+      const { rerender } = render(<Tabs {...initialProps} />);
+      rerender(<Tabs {...initialProps} selected={2} />);
+      expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 2');
+    });
+  });
+});

package/src/tabs/Tabs.story.tsx

@@ -7,6 +7,7 @@ import Tabs from './Tabs';
 export default {
   component: Tabs,
   title: 'Navigation/Tabs',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/tabs/Tabs.tsx

@@ -403,7 +403,6 @@ export default class Tabs extends Component<TabsProps, TabsState> {
 
     if (isSwiping) {
       const nextSelected = this.getTabToSelect(currentSelectedFromProps, start, end);
-
       this.animateLine(
         this.swipedOverHalfOfContainer(difference) ? nextSelected : currentSelectedFromProps,
       );