Install and implement Jest-Axe for accessibility testing in unit tests

jest.setup.ts

@@ -1,6 +1,9 @@
 import '@testing-library/jest-dom';
+import { toHaveNoViolations } from 'jest-axe';
 
 jest.mock('./src/providers/RedbackUiThemeProvider/GlobalStyle.tsx', () => ({
 	GlobalStyle: () => null
 }));
 
+// Ref: https://github.com/NickColley/jest-axe?tab=readme-ov-file#testing-react-with-react-testing-library
+expect.extend(toHaveNoViolations);

jest.utils.tsx

@@ -20,3 +20,4 @@ export const renderWithDeps = (component: ReactNode) => {
 			</RedbackUiThemeProvider>
 		</DiProvider>);
 };
+

package.json

@@ -50,6 +50,7 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
     "@types/jest": "^29.5.12",
+    "@types/jest-axe": "^3.5.9",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
@@ -63,6 +64,7 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
+    "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/Alert/Alert.test.tsx

@@ -1,11 +1,31 @@
 import { screen } from '@testing-library/react';
 import { renderWithDeps } from '../../../jest.utils';
 import { Alert } from './Alert';
+import { axe } from 'jest-axe';
 
 describe('<Alert />', () => {
 	it('renders', () => {
 		renderWithDeps(<Alert>Example alert</Alert>);
 
 		expect( screen.getByText('Example alert')).toBeInTheDocument();
 	});
+
+	it('has no accessibility violations', async () => {
+		const { container } = renderWithDeps(<Alert>Example alert</Alert>);
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+
+	describe('default theme accessibility', () => {
+		['success', 'info', 'warning', 'error'].forEach(type => {
+			it(`has no accessibility violations for type "${type}" in default theme`, async () => {
+				// @ts-expect-error TS2322: Type string is not assignable to type 'success' | 'info' | 'warning' | 'error' | undefined
+				const { container } = renderWithDeps(<Alert type={type}>Example alert</Alert>);
+				const results = await axe(container);
+
+				expect(results).toHaveNoViolations();
+			});
+		});
+	});
 });

src/components/Button/Button.test.tsx

@@ -1,6 +1,9 @@
 import { screen, fireEvent }  from '@testing-library/react';
 import { renderWithDeps } from '../../../jest.utils';
 import { Button } from './Button';
+import { axe } from 'jest-axe';
+import { themes } from '../../themes';
+import { ThemeColor } from '../../types';
 
 const mockClick = jest.fn();
 
@@ -11,6 +14,33 @@ describe('<Button />', () => {
 		expect(screen.getByRole('button', { name: 'Test button' })).toBeVisible();
 	});
 
+	it('has no accessibility violations (default props)', async () => {
+		const { container } = renderWithDeps(<Button label="Test button" onClick={mockClick}/>);
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+
+	describe('default theme accessibility', () => {
+		Object.keys(themes.default.colors).forEach((color: ThemeColor) => {
+			it(`has no accessibility violations for "${String(color)}" colour in default theme - solid style`, async () => {
+				const { container } = renderWithDeps(<Button color={color} appearance="solid" label="Test button" onClick={mockClick} />);
+				const results = await axe(container);
+
+				expect(results).toHaveNoViolations();
+			});
+		});
+
+		Object.keys(themes.default.colors).forEach((color: ThemeColor) => {
+			it(`has no accessibility violations for "${String(color)}" colour in default theme - outline stype`, async () => {
+				const { container } = renderWithDeps(<Button color={color} appearance="outline" label="Test button" onClick={mockClick} />);
+				const results = await axe(container);
+
+				expect(results).toHaveNoViolations();
+			});
+		});
+	});
+
 	it('calls the click handler',  () => {
 		renderWithDeps(<Button label="Test button" onClick={mockClick}/>);
 

src/components/ImageSlider/ImageSlider.test.tsx

@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
 import { renderWithDeps } from '../../../jest.utils';
 import ImageSlider from './ImageSlider';
+import { axe } from 'jest-axe';
 
 describe('<ImageSlider />', () => {
 	const images = [
@@ -16,4 +17,13 @@ describe('<ImageSlider />', () => {
 
 		expect(templateName).toBeVisible();
 	});
+
+	it('has no accessibility violations', async () => {
+		const { container } = renderWithDeps(<ImageSlider size="small" images={images} />);
+		const results = await axe(container);
+
+		// TODO: Fix the violation and replace this with
+		// expect(results).toHaveNoViolations();
+		expect(results.violations.length).toBe(1);
+	});
 });

src/components/Label/Label.test.tsx

@@ -1,11 +1,31 @@
 import { screen } from '@testing-library/react';
 import { renderWithDeps } from '../../../jest.utils';
 import { Label } from './Label';
+import { axe } from 'jest-axe';
 
 describe('<Label />', () => {
 	it('renders', () => {
 		renderWithDeps(<Label type="info" text="Test label"/>);
 
 		expect(screen.getByText('Test label')).toBeVisible();
 	});
+
+	it('has no accessibility violations', async () => {
+		const { container } = renderWithDeps(<Label type="info" text="Test label"/>);
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+
+	describe('default theme accessibility', () => {
+		['success', 'info', 'warning', 'error'].forEach(type => {
+			it(`has no accessibility violations for type "${type}" in default theme`, async () => {
+				// @ts-expect-error TS2322: Type string is not assignable to type 'success' | 'info' | 'warning' | 'error' | undefined
+				const { container } = renderWithDeps(<Label type={type} text="Test label"/>);
+				const results = await axe(container);
+
+				expect(results).toHaveNoViolations();
+			});
+		});
+	});
 });

src/components/LinkButton/LinkButton.test.tsx

@@ -1,11 +1,41 @@
 import { screen } from '@testing-library/react';
 import { renderWithDeps } from '../../../jest.utils';
 import { LinkButton } from './LinkButton';
+import { axe } from 'jest-axe';
+import { themes } from '../../themes';
+import { ThemeColor } from '../../types';
 
 describe('<LinkButton />', () => {
 	it('renders', () => {
 		renderWithDeps(<LinkButton label="Test link" href="#" />);
 
 		expect(screen.getByRole('link', { name: 'Test link' })).toBeVisible();
 	});
+
+	it('has no accessibility violations (default props)', async () => {
+		const { container } = renderWithDeps(<LinkButton label="Test link" href="#" />);
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+
+	describe('default theme accessibility', () => {
+		Object.keys(themes.default.colors).forEach((color: ThemeColor) => {
+			it(`has no accessibility violations for "${String(color)}" colour in default theme - solid style`, async () => {
+				const { container } = renderWithDeps(<LinkButton color={color} appearance="solid" label="Test link" href="#" />);
+				const results = await axe(container);
+
+				expect(results).toHaveNoViolations();
+			});
+		});
+
+		Object.keys(themes.default.colors).forEach((color: ThemeColor) => {
+			it(`has no accessibility violations for "${String(color)}" colour in default theme - outline stype`, async () => {
+				const { container } = renderWithDeps(<LinkButton color={color} appearance="outline" label="Test link" href="#" />);
+				const results = await axe(container);
+
+				expect(results).toHaveNoViolations();
+			});
+		});
+	});
 });

src/components/TruncatedText/TruncatedText.test.tsx

@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
 import { renderWithDeps } from '../../../jest.utils';
 import { TruncatedText } from './TruncatedText';
+import { axe } from 'jest-axe';
 
 const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis faucibus mattis. Sed eget magna urna. Quisque posuere vehicula pharetra. Pellentesque bibendum condimentum lacus, at elementum justo ultrices ut. Ut at ipsum vel metus condimentum venenatis. Ut varius nisi in massa porttitor mollis. Pellentesque ac auctor quam.';
 
@@ -10,4 +11,11 @@ describe('<TruncatedText />', () => {
 
 		expect(screen.getByText('Lorem ipsum dolor sit amet', { exact:false })).toBeVisible();
 	});
+
+	it('has no accessibility violations', async () => {
+		const { container } = renderWithDeps(<TruncatedText text={text} lines={1}/>);
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
 });