Partial rewrite of the slide tabs component

This enables us to put icons there, make the layout tighter and fit to tab list
contents. It also improves accessibility by adding keyboard handling and
changing the structure according to ARIA Authoring Practices Guide.

web/packages/design/src/SlideTabs/SlideTabs.story.tsx

@@ -18,6 +18,9 @@
 
 import React, { useState } from 'react';
 
+import * as Icon from 'design/Icon';
+import Flex from 'design/Flex';
+
 import { SlideTabs } from './SlideTabs';
 
 export default {
@@ -71,6 +74,35 @@ export const Medium = () => {
   );
 };
 
+export const Small = () => {
+  const [activeIndex1, setActiveIndex1] = useState(0);
+  const [activeIndex2, setActiveIndex2] = useState(0);
+  return (
+    <Flex flexDirection="column" gap={3}>
+      <SlideTabs
+        tabs={[
+          { content: <Icon.AlarmRing size="small" /> },
+          { content: <Icon.Bots size="small" /> },
+          { content: <Icon.Check size="small" /> },
+        ]}
+        size="small"
+        appearance="round"
+        onChange={setActiveIndex1}
+        activeIndex={activeIndex1}
+        fitContent
+      />
+      <SlideTabs
+        tabs={['Kraken', 'Chupacabra', 'Yeti']}
+        size="small"
+        appearance="round"
+        onChange={setActiveIndex2}
+        activeIndex={activeIndex2}
+        fitContent
+      />
+    </Flex>
+  );
+};
+
 export const LoadingTab = () => {
   return (
     <SlideTabs

web/packages/design/src/SlideTabs/SlideTabs.test.tsx

@@ -21,7 +21,7 @@ import { screen } from '@testing-library/react';
 
 import { render, userEvent } from 'design/utils/testing';
 
-import { SlideTabs } from './SlideTabs';
+import { SlideTabs, SlideTabsProps } from './SlideTabs';
 
 describe('design/SlideTabs', () => {
   it('renders the supplied number of tabs(3)', () => {
@@ -35,9 +35,9 @@ describe('design/SlideTabs', () => {
 
     expect(screen.getAllByRole('tab')).toHaveLength(3);
 
-    expect(screen.getByLabelText('aws')).toBeInTheDocument();
-    expect(screen.getByLabelText('automatically')).toBeInTheDocument();
-    expect(screen.getByLabelText('manually')).toBeInTheDocument();
+    expect(getTab('aws')).toBeInTheDocument();
+    expect(getTab('automatically')).toBeInTheDocument();
+    expect(getTab('manually')).toBeInTheDocument();
   });
 
   it('renders the supplied number of tabs(5)', () => {
@@ -51,51 +51,80 @@ describe('design/SlideTabs', () => {
 
     expect(screen.getAllByRole('tab')).toHaveLength(5);
 
-    expect(screen.getByLabelText('aws')).toBeInTheDocument();
-    expect(screen.getByLabelText('automatically')).toBeInTheDocument();
-    expect(screen.getByLabelText('manually')).toBeInTheDocument();
-    expect(screen.getByLabelText('apple')).toBeInTheDocument();
-    expect(screen.getByLabelText('purple')).toBeInTheDocument();
-  });
-
-  it('respects a custom form name', () => {
-    const { container } = render(
-      <SlideTabs
-        name="pineapple"
-        tabs={['aws', 'automatically', 'manually']}
-        onChange={() => {}}
-        activeIndex={0}
-      />
-    );
-
-    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-    expect(container.querySelectorAll('input[name=pineapple]')).toHaveLength(3);
+    expect(getTab('aws')).toBeInTheDocument();
+    expect(getTab('automatically')).toBeInTheDocument();
+    expect(getTab('manually')).toBeInTheDocument();
+    expect(getTab('apple')).toBeInTheDocument();
+    expect(getTab('purple')).toBeInTheDocument();
   });
 
   test('onChange highlights the tab clicked', async () => {
     render(<Component />);
 
     // First tab is selected by default.
-    expect(screen.getByRole('tab', { name: 'first' })).toHaveClass('selected');
+    expect(getTab('first')).toHaveClass('selected');
 
     // Select the second tab.
     await userEvent.click(screen.getByText('second'));
-    expect(screen.getByRole('tab', { name: 'second' })).toHaveClass('selected');
+    expect(getTab('second')).toHaveClass('selected');
+
+    expect(getTab('first')).not.toHaveClass('selected');
+  });
 
-    expect(screen.getByRole('tab', { name: 'first' })).not.toHaveClass(
-      'selected'
+  test('keyboard navigation and accessibility', async () => {
+    const user = userEvent.setup();
+    render(
+      <Component
+        tabs={[
+          { id: 'id1', content: 'first', controls: 'tabpanel-1' },
+          { id: 'id2', content: 'second', controls: 'tabpanel-2' },
+        ]}
+      />
     );
+    expect(getTab('first')).not.toHaveFocus();
+    expect(getTab('second')).not.toHaveFocus();
+
+    getTab('first').focus();
+    expect(getTab('first')).toHaveAttribute('aria-selected', 'true');
+    expect(getTab('first')).toHaveAttribute('aria-controls', 'tabpanel-1');
+    expect(getTab('second')).toHaveAttribute('aria-selected', 'false');
+    expect(getTab('second')).toHaveAttribute('aria-controls', 'tabpanel-2');
+
+    await user.keyboard('{Right}');
+    expect(getTab('first')).toHaveAttribute('aria-selected', 'false');
+    expect(getTab('second')).toHaveAttribute('aria-selected', 'true');
+    expect(getTab('second')).toHaveFocus();
+
+    // Should be a no-op.
+    await user.keyboard('{Right}');
+    expect(getTab('first')).toHaveAttribute('aria-selected', 'false');
+    expect(getTab('second')).toHaveAttribute('aria-selected', 'true');
+    expect(getTab('second')).toHaveFocus();
+
+    await user.keyboard('{Left}');
+    expect(getTab('first')).toHaveAttribute('aria-selected', 'true');
+    expect(getTab('second')).toHaveAttribute('aria-selected', 'false');
+    expect(getTab('first')).toHaveFocus();
+
+    // Should be a no-op.
+    await user.keyboard('{Left}');
+    expect(getTab('first')).toHaveAttribute('aria-selected', 'true');
+    expect(getTab('second')).toHaveAttribute('aria-selected', 'false');
+    expect(getTab('first')).toHaveFocus();
   });
 });
 
-const Component = () => {
+const Component = (props: Partial<SlideTabsProps>) => {
   const [activeIndex, setActiveIndex] = useState(0);
 
   return (
     <SlideTabs
       onChange={setActiveIndex}
       tabs={['first', 'second']}
       activeIndex={activeIndex}
+      {...props}
     />
   );
 };
+
+const getTab = (name: string) => screen.getByRole('tab', { name });