37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
|
import { describe, test, expect } from 'vitest';
|
||
|
|
import { ContentSlider } from './ContentSlider';
|
||
|
|
|
||
|
|
const toHtml = (ContentSlider as any).toHtml;
|
||
|
|
|
||
|
|
const slides = [
|
||
|
|
{ type: 'image' as const, heading: 'One' },
|
||
|
|
{ type: 'image' as const, heading: 'Two' },
|
||
|
|
{ type: 'image' as const, heading: 'Three' },
|
||
|
|
];
|
||
|
|
|
||
|
|
describe('ContentSlider.toHtml accessibility (F1.1)', () => {
|
||
|
|
test('prev/next arrows get aria-labels and are real buttons', () => {
|
||
|
|
const { html } = toHtml({ slides, showArrows: true }, '');
|
||
|
|
expect(html).toMatch(/<button[^>]*aria-label="Previous slide"/);
|
||
|
|
expect(html).toMatch(/<button[^>]*aria-label="Next slide"/);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('dot buttons get "Go to slide N" aria-labels', () => {
|
||
|
|
const { html } = toHtml({ slides, showDots: true }, '');
|
||
|
|
expect(html).toMatch(/<button[^>]*aria-label="Go to slide 1"/);
|
||
|
|
expect(html).toMatch(/<button[^>]*aria-label="Go to slide 2"/);
|
||
|
|
expect(html).toMatch(/<button[^>]*aria-label="Go to slide 3"/);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('slides are wrapped in an aria-live="polite" region', () => {
|
||
|
|
const { html } = toHtml({ slides }, '');
|
||
|
|
expect(html).toContain('aria-live="polite"');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('decorative chevron icons in arrows are aria-hidden', () => {
|
||
|
|
const { html } = toHtml({ slides, showArrows: true }, '');
|
||
|
|
expect(html).toMatch(/<i class="fa fa-chevron-left" aria-hidden="true"><\/i>/);
|
||
|
|
expect(html).toMatch(/<i class="fa fa-chevron-right" aria-hidden="true"><\/i>/);
|
||
|
|
});
|
||
|
|
});
|