Merge pull request #719 from City-of-Helsinki/fix/tabs-keyboard-onclick

Fix/tabs keyboard onclick

packages/react/src/components/tabs/Tab.tsx

@@ -56,6 +56,9 @@ export const Tab = ({ children, className, index, onClick, style }: TabProps) =>
     const isEnter = event.key === 'Enter' || event.keyCode === 13;
     const isSpace = event.key === ' ' || event.keyCode === 32;
     if (isEnter || isSpace) {
+      if (onClick) {
+        onClick();
+      }
       setActiveTab(index);
     }
   };

packages/react/src/components/tabs/Tabs.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { LoadingSpinner } from '../loadingSpinner';
 import { Tabs } from './Tabs';
 
 export default {
@@ -112,3 +113,51 @@ export const WithCustomTheme = () => {
     </Tabs>
   );
 };
+
+export const WithCustomOnClickAction = () => {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const content = {
+    education: 'Daytime care for people who cannot be fully independent, such as children or elderly people.',
+    university:
+      'The objective of basic education in Finland is to support pupils&#39; growth towards humanity and ethically responsible membership of society.',
+  };
+
+  const LoadingIndicator = () => (
+    <div style={{ alignItems: 'center', display: 'flex', gap: '1rem' }}>
+      <LoadingSpinner
+        loadingText="Tab content is loading"
+        loadingFinishedText="The tab content loading was finished"
+        small
+      />
+      <span>Tab content is loading</span>
+    </div>
+  );
+
+  const mockLoading = () => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+  };
+
+  const onTabClick = () => {
+    mockLoading();
+  };
+
+  React.useEffect(() => {
+    mockLoading();
+  }, []);
+
+  return (
+    <Tabs initiallyActiveTab={0}>
+      <Tabs.TabList className="example-tablist">
+        <Tabs.Tab onClick={() => onTabClick()}>Basic education</Tabs.Tab>
+        <Tabs.Tab onClick={() => onTabClick()}>University</Tabs.Tab>
+      </Tabs.TabList>
+      <Tabs.TabPanel>{isLoading ? <LoadingIndicator /> : content.education}</Tabs.TabPanel>
+      <Tabs.TabPanel>{isLoading ? <LoadingIndicator /> : content.university}</Tabs.TabPanel>
+    </Tabs>
+  );
+};
+
+WithCustomOnClickAction.parameters = { loki: { skip: true } };

packages/react/src/components/tabs/Tabs.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 
 import { Tabs } from './Tabs';
@@ -21,6 +22,7 @@ describe('<Tabs /> spec', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
   it('should not have basic accessibility issues', async () => {
     const { container } = render(
       <Tabs>
@@ -35,4 +37,36 @@ describe('<Tabs /> spec', () => {
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
+
+  it('should call onClick when user clicks tab', () => {
+    const onClick = jest.fn();
+    render(
+      <Tabs>
+        <TabList>
+          <Tab onClick={onClick}>Foo</Tab>
+          <Tab onClick={onClick}>Bar</Tab>
+        </TabList>
+        <TabPanel>Fizz</TabPanel>
+        <TabPanel>Buzz</TabPanel>
+      </Tabs>,
+    );
+    userEvent.click(screen.getByLabelText('Foo'));
+    waitFor(() => expect(onClick).toHaveBeenCalled());
+  });
+
+  it('should call onClick when user presses enter on tab', () => {
+    const onClick = jest.fn();
+    render(
+      <Tabs>
+        <TabList>
+          <Tab onClick={onClick}>Foo</Tab>
+          <Tab onClick={onClick}>Bar</Tab>
+        </TabList>
+        <TabPanel>Fizz</TabPanel>
+        <TabPanel>Buzz</TabPanel>
+      </Tabs>,
+    );
+    userEvent.type(screen.getByLabelText('Foo'), '{Enter}');
+    waitFor(() => expect(onClick).toHaveBeenCalled());
+  });
 });