cfbe33140c
Fixes WCAG 2.1 AA contrast failure (#341): text-accent (#a1dcd8) on light PDF control bar was 1.52:1 — well below the 4.5:1 AA minimum. text-primary resolves to #012851 in light mode (14.5:1) and #a1dcd8 in dark mode (9:1) — both states pass AA in both themes. Adds PdfControls.svelte.spec.ts with 5 tests covering toggle visibility, label strings, and the contrast-safe class assertion. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
import { vi, describe, it, expect, afterEach } from 'vitest';
|
|
import { cleanup, render } from 'vitest-browser-svelte';
|
|
import { page } from 'vitest/browser';
|
|
|
|
import PdfControls from './PdfControls.svelte';
|
|
|
|
afterEach(cleanup);
|
|
|
|
const defaultProps = {
|
|
currentPage: 1,
|
|
totalPages: 3,
|
|
isLoaded: true,
|
|
showAnnotations: false,
|
|
annotationCount: 0,
|
|
onPrev: vi.fn(),
|
|
onNext: vi.fn(),
|
|
onZoomIn: vi.fn(),
|
|
onZoomOut: vi.fn(),
|
|
onToggleAnnotations: vi.fn()
|
|
};
|
|
|
|
describe('PdfControls — annotation toggle visibility', () => {
|
|
it('renders annotation toggle when annotationCount is greater than zero', async () => {
|
|
render(PdfControls, { ...defaultProps, annotationCount: 3 });
|
|
await expect
|
|
.element(page.getByRole('button', { name: /annotierungen anzeigen/i }))
|
|
.toBeInTheDocument();
|
|
});
|
|
|
|
it('does not render annotation toggle when annotationCount is zero', async () => {
|
|
render(PdfControls, { ...defaultProps, annotationCount: 0 });
|
|
await expect
|
|
.element(page.getByRole('button', { name: /annotierungen/i }))
|
|
.not.toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('PdfControls — annotation toggle label', () => {
|
|
it('shows "Annotierungen anzeigen" label when annotations are hidden', async () => {
|
|
render(PdfControls, { ...defaultProps, annotationCount: 2, showAnnotations: false });
|
|
const btn = page.getByRole('button', { name: /annotierungen anzeigen/i });
|
|
await expect.element(btn).toBeInTheDocument();
|
|
});
|
|
|
|
it('shows "Annotierungen verbergen" label when annotations are visible', async () => {
|
|
render(PdfControls, { ...defaultProps, annotationCount: 2, showAnnotations: true });
|
|
const btn = page.getByRole('button', { name: /annotierungen verbergen/i });
|
|
await expect.element(btn).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('PdfControls — annotation toggle contrast (WCAG 2.1 AA)', () => {
|
|
it('uses text-primary class on annotation toggle button when annotations are hidden', async () => {
|
|
const { container } = render(PdfControls, {
|
|
...defaultProps,
|
|
annotationCount: 2,
|
|
showAnnotations: false
|
|
});
|
|
const allButtons = container.querySelectorAll('button');
|
|
const annotationBtn = Array.from(allButtons).find((b) =>
|
|
b.getAttribute('aria-label')?.toLowerCase().includes('annotierungen')
|
|
);
|
|
expect(annotationBtn).not.toBeNull();
|
|
expect(annotationBtn!.className).toContain('text-primary');
|
|
expect(annotationBtn!.className).not.toContain('text-accent');
|
|
});
|
|
});
|