fix(pdf-controls): add focus-visible ring to all PdfControls buttons (WCAG 2.1 §2.4.7)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #493.
This commit is contained in:
@@ -35,7 +35,7 @@ let {
|
|||||||
onclick={onPrev}
|
onclick={onPrev}
|
||||||
disabled={currentPage <= 1}
|
disabled={currentPage <= 1}
|
||||||
aria-label="Zurück"
|
aria-label="Zurück"
|
||||||
class="min-h-[44px] min-w-[44px] rounded p-2 text-ink-3 transition hover:bg-surface/10 disabled:opacity-40"
|
class="min-h-[44px] min-w-[44px] rounded p-2 text-ink-3 transition hover:bg-surface/10 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-1 disabled:opacity-40"
|
||||||
>
|
>
|
||||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
|
||||||
@@ -52,7 +52,7 @@ let {
|
|||||||
onclick={onNext}
|
onclick={onNext}
|
||||||
disabled={!isLoaded || currentPage >= totalPages}
|
disabled={!isLoaded || currentPage >= totalPages}
|
||||||
aria-label="Weiter"
|
aria-label="Weiter"
|
||||||
class="min-h-[44px] min-w-[44px] rounded p-2 text-ink-3 transition hover:bg-surface/10 disabled:opacity-40"
|
class="min-h-[44px] min-w-[44px] rounded p-2 text-ink-3 transition hover:bg-surface/10 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-1 disabled:opacity-40"
|
||||||
>
|
>
|
||||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
||||||
@@ -65,7 +65,7 @@ let {
|
|||||||
<button
|
<button
|
||||||
onclick={onZoomOut}
|
onclick={onZoomOut}
|
||||||
aria-label="Verkleinern"
|
aria-label="Verkleinern"
|
||||||
class="min-h-[44px] min-w-[44px] rounded p-2 text-ink-3 transition hover:bg-surface/10"
|
class="min-h-[44px] min-w-[44px] rounded p-2 text-ink-3 transition hover:bg-surface/10 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-1"
|
||||||
>
|
>
|
||||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
<circle cx="11" cy="11" r="8" />
|
<circle cx="11" cy="11" r="8" />
|
||||||
@@ -75,7 +75,7 @@ let {
|
|||||||
<button
|
<button
|
||||||
onclick={onZoomIn}
|
onclick={onZoomIn}
|
||||||
aria-label="Vergrößern"
|
aria-label="Vergrößern"
|
||||||
class="min-h-[44px] min-w-[44px] rounded p-2 text-ink-3 transition hover:bg-surface/10"
|
class="min-h-[44px] min-w-[44px] rounded p-2 text-ink-3 transition hover:bg-surface/10 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-1"
|
||||||
>
|
>
|
||||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
<circle cx="11" cy="11" r="8" />
|
<circle cx="11" cy="11" r="8" />
|
||||||
@@ -90,7 +90,7 @@ let {
|
|||||||
onclick={onToggleAnnotations}
|
onclick={onToggleAnnotations}
|
||||||
aria-label={showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
|
aria-label={showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
|
||||||
aria-pressed={showAnnotations}
|
aria-pressed={showAnnotations}
|
||||||
class="flex min-h-[44px] min-w-[44px] items-center gap-1.5 rounded px-3 py-2 font-sans text-xs transition {showAnnotations
|
class="flex min-h-[44px] min-w-[44px] items-center gap-1.5 rounded px-3 py-2 font-sans text-xs transition focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-1 {showAnnotations
|
||||||
? 'text-ink-2 hover:bg-surface/10'
|
? 'text-ink-2 hover:bg-surface/10'
|
||||||
: 'bg-surface/10 text-primary'}"
|
: 'bg-surface/10 text-primary'}"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -66,6 +66,35 @@ describe('PdfControls — annotation toggle contrast (WCAG 2.1 AA)', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('PdfControls — focus rings (WCAG 2.1 §2.4.7)', () => {
|
||||||
|
it('annotation toggle button has focus-visible:ring-2 focus ring', 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('focus-visible:ring-2');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('icon-only nav/zoom buttons each have focus-visible:ring-2 focus ring', async () => {
|
||||||
|
const { container } = render(PdfControls, { ...defaultProps });
|
||||||
|
const allButtons = container.querySelectorAll('button');
|
||||||
|
const iconOnlyButtons = Array.from(allButtons).filter((b) => {
|
||||||
|
const label = b.getAttribute('aria-label') ?? '';
|
||||||
|
return ['zurück', 'weiter', 'verkleinern', 'vergrößern'].includes(label.toLowerCase());
|
||||||
|
});
|
||||||
|
expect(iconOnlyButtons).toHaveLength(4);
|
||||||
|
for (const btn of iconOnlyButtons) {
|
||||||
|
expect(btn.className).toContain('focus-visible:ring-2');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('PdfControls — touch targets (WCAG 2.2 §2.5.8)', () => {
|
describe('PdfControls — touch targets (WCAG 2.2 §2.5.8)', () => {
|
||||||
it('annotation toggle button has min-h-[44px] touch target', async () => {
|
it('annotation toggle button has min-h-[44px] touch target', async () => {
|
||||||
const { container } = render(PdfControls, {
|
const { container } = render(PdfControls, {
|
||||||
|
|||||||
Reference in New Issue
Block a user