137 lines
3.5 KiB
TypeScript
137 lines
3.5 KiB
TypeScript
import { render } from '@testing-library/react';
|
|
import { axe, toHaveNoViolations } from 'jest-axe';
|
|
|
|
expect.extend(toHaveNoViolations);
|
|
|
|
// Mock components for testing
|
|
const AccessibleButton = () => (
|
|
<button aria-label="Submit form">Submit</button>
|
|
);
|
|
|
|
const InaccessibleButton = () => (
|
|
<button>Submit</button>
|
|
);
|
|
|
|
const AccessibleForm = () => (
|
|
<form>
|
|
<label htmlFor="email">Email</label>
|
|
<input id="email" type="email" />
|
|
<button type="submit" aria-label="Submit form">Submit</button>
|
|
</form>
|
|
);
|
|
|
|
describe('WCAG Accessibility Compliance', () => {
|
|
it('should not have accessibility violations for buttons with aria-label', async () => {
|
|
const { container } = render(<AccessibleButton />);
|
|
const results = await axe(container);
|
|
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it('should have proper form labels', async () => {
|
|
const { container } = render(<AccessibleForm />);
|
|
const results = await axe(container);
|
|
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it('should have proper color contrast', async () => {
|
|
const { container } = render(
|
|
<div style={{ backgroundColor: '#000', color: '#fff' }}>
|
|
High contrast text
|
|
</div>
|
|
);
|
|
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it('should have accessible heading hierarchy', async () => {
|
|
const { container } = render(
|
|
<div>
|
|
<h1>Main Title</h1>
|
|
<h2>Subtitle</h2>
|
|
<h3>Section Title</h3>
|
|
</div>
|
|
);
|
|
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it('should have accessible links', async () => {
|
|
const { container } = render(
|
|
<a href="/about" aria-label="Learn more about us">
|
|
Learn more
|
|
</a>
|
|
);
|
|
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it('should have accessible images', async () => {
|
|
const { container } = render(
|
|
<img src="/test.jpg" alt="Descriptive text for image" />
|
|
);
|
|
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it('should support keyboard navigation', async () => {
|
|
const { container } = render(
|
|
<div>
|
|
<button tabIndex={0}>First</button>
|
|
<button tabIndex={0}>Second</button>
|
|
<button tabIndex={0}>Third</button>
|
|
</div>
|
|
);
|
|
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it('should have proper ARIA roles', async () => {
|
|
const { container } = render(
|
|
<nav role="navigation" aria-label="Main navigation">
|
|
<ul>
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="/about">About</a></li>
|
|
</ul>
|
|
</nav>
|
|
);
|
|
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it('should have accessible modal dialogs', async () => {
|
|
const { container } = render(
|
|
<div
|
|
role="dialog"
|
|
aria-labelledby="dialog-title"
|
|
aria-modal="true"
|
|
>
|
|
<h2 id="dialog-title">Modal Title</h2>
|
|
<p>Modal content</p>
|
|
<button aria-label="Close modal">Close</button>
|
|
</div>
|
|
);
|
|
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
|
|
it('should have accessible loading states', async () => {
|
|
const { container } = render(
|
|
<div role="status" aria-live="polite" aria-busy="true">
|
|
Loading...
|
|
</div>
|
|
);
|
|
|
|
const results = await axe(container);
|
|
expect(results).toHaveNoViolations();
|
|
});
|
|
});
|