feat: make tabs a11y

packages/design-system/package.json

@@ -49,6 +49,7 @@
     "@babel/core": "^7.22.20",
     "@cypress/react": "^7.0.3",
     "@cypress/webpack-dev-server": "^3.6.1",
+    "@jest/globals": "^29.7.0",
     "@storybook/addon-a11y": "^7.4.1",
     "@storybook/addon-actions": "^7.4.1",
     "@storybook/addon-essentials": "^7.4.1",
@@ -69,6 +70,7 @@
     "@talend/scripts-config-react-webpack": "^16.0.0",
     "@testing-library/cypress": "^9.0.0",
     "@types/classnames": "^2.3.1",
+    "@types/jest-axe": "^3.5.6",
     "@types/react": "^17.0.65",
     "@types/react-dom": "^17.0.20",
     "@types/react-is": "^17.0.0",
@@ -82,7 +84,7 @@
     "i18next": "^20.6.1",
     "i18next-scanner": "^4.4.0",
     "i18next-scanner-typescript": "^1.1.1",
-    "jest-axe": "^7.0.1",
+    "jest-axe": "^8.0.0",
     "mdx-embed": "^1.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

packages/design-system/src/components/ButtonIcon/ButtonIcon.test.tsx

@@ -1,6 +1,6 @@
 import { axe } from 'jest-axe';
 import { render } from '@testing-library/react';
-import { ButtonIcon, ButtonIconFloating, ButtonIconToggle } from './';
+import { ButtonIcon } from './';
 
 describe('ButtonIcon', () => {
 	it('should render accessible button', async () => {

packages/design-system/src/components/Tabs/Primitive/Tabs.tsx

@@ -14,9 +14,9 @@ export type TabsPropTypes = {
 
 export function Tabs({ children }: TabsPropTypes) {
 	return (
-		<ul className={style.tablist} role="tablist">
+		<StackHorizontal gap="M" role="tablist">
 			{children}
-		</ul>
+		</StackHorizontal>
 	);
 }
 Tabs.displayName = 'Tabs';
@@ -32,14 +32,14 @@ export type TabPropTypes = {
 
 export function Tab(props: TabPropTypes) {
 	const context = useContext(TabsInternalContext);
-	const content = (
+	let content = (
 		<button
 			role="tab"
-			className={classNames(style.tab, { [style.tab_large]: context?.size === 'L' })}
-			type="button"
 			aria-selected={props['aria-controls'] === context?.value}
+			className={classNames(style.tab, { [style.tab_large]: context?.size === 'L' })}
 			onClick={e => context?.onChange(e, props['aria-controls'])}
 			disabled={props.disabled}
+			type="button"
 		>
 			<StackHorizontal gap="XXS" align="center" display="inline">
 				{props.icon && <SizedIcon size="S" name={props.icon} />}
@@ -49,10 +49,8 @@ export function Tab(props: TabPropTypes) {
 		</button>
 	);
 	if (props.tooltip) {
-		<li>
-			<Tooltip title={props.tooltip}>{content}</Tooltip>
-		</li>;
+		content = <Tooltip title={props.tooltip}>{content}</Tooltip>;
 	}
-	return <li>{content}</li>;
+	return content;
 }
 Tab.displayName = 'Tab';

packages/design-system/src/components/Tabs/Primitive/TabsProvider.tsx

@@ -29,10 +29,12 @@ export function TabsProvider(props: TabsProviderPropTypes & WithChildren) {
 		},
 	});
 	return (
-		<StackVertical gap="M">
-			<TabsInternalContext.Provider value={{ size: props.size, ...controlled }}>
-				{props.children}
-			</TabsInternalContext.Provider>
-		</StackVertical>
+		<nav>
+			<StackVertical gap="M">
+				<TabsInternalContext.Provider value={{ size: props.size, ...controlled }}>
+					{props.children}
+				</TabsInternalContext.Provider>
+			</StackVertical>
+		</nav>
 	);
 }

packages/design-system/src/components/Tabs/Tabs.test.tsx

@@ -0,0 +1,26 @@
+import { expect } from '@jest/globals';
+import { axe } from 'jest-axe';
+import { render } from '@testing-library/react';
+import { Tabs, TabPanel, Tab, TabsProvider } from './';
+
+describe('ButtonIcon', () => {
+	it('should render accessible button', async () => {
+		// note we need to add the aria-label to be accessible
+		// TODO: make it required
+		const { container } = render(
+			<TabsProvider defaultActiveKey="profile">
+				<Tabs>
+					<Tab aria-controls="home" title="Home" />
+					<Tab aria-controls="profile" title="Profile" />
+					<Tab aria-controls="contact" title="Contact" disabled />
+				</Tabs>
+				<TabPanel id="home">Tab content for Home</TabPanel>
+				<TabPanel id="profile">Tab content for Profile</TabPanel>
+				<TabPanel id="contact">Tab content for Contact</TabPanel>
+			</TabsProvider>,
+		);
+		expect(container.firstChild).toMatchSnapshot();
+		const results = await axe(document.body);
+		expect(results).toHaveNoViolations();
+	});
+});

packages/design-system/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonIcon should render accessible button 1`] = `
+<nav>
+  <div
+    class="theme-stack theme-justify-start theme-align-start theme-nowrap theme-column theme-block theme-gap-x-M theme-gap-y-M"
+  >
+    <div
+      class="theme-stack theme-justify-start theme-align-start theme-nowrap theme-row theme-block theme-gap-x-M theme-gap-y-M"
+      role="tablist"
+    >
+      <button
+        aria-selected="false"
+        class="theme-tab"
+        role="tab"
+        type="button"
+      >
+        <div
+          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-inline theme-gap-x-XXS theme-gap-y-XXS"
+        >
+          <span
+            class="theme-tab__copy"
+          >
+            Home
+          </span>
+        </div>
+      </button>
+      <button
+        aria-selected="true"
+        class="theme-tab"
+        role="tab"
+        type="button"
+      >
+        <div
+          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-inline theme-gap-x-XXS theme-gap-y-XXS"
+        >
+          <span
+            class="theme-tab__copy"
+          >
+            Profile
+          </span>
+        </div>
+      </button>
+      <button
+        aria-selected="false"
+        class="theme-tab"
+        disabled=""
+        role="tab"
+        type="button"
+      >
+        <div
+          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-inline theme-gap-x-XXS theme-gap-y-XXS"
+        >
+          <span
+            class="theme-tab__copy"
+          >
+            Contact
+          </span>
+        </div>
+      </button>
+    </div>
+    <div
+      id="home"
+      role="tabpanel"
+      style="display: none;"
+      tabindex="0"
+    >
+      Tab content for Home
+    </div>
+    <div
+      id="profile"
+      role="tabpanel"
+      tabindex="0"
+    >
+      Tab content for Profile
+    </div>
+    <div
+      id="contact"
+      role="tabpanel"
+      style="display: none;"
+      tabindex="0"
+    >
+      Tab content for Contact
+    </div>
+  </div>
+</nav>
+`;