diff --git a/components/disputes/shared/CountdownTimer.tsx b/components/disputes/shared/CountdownTimer.tsx index 0b47aac6..26298b14 100644 --- a/components/disputes/shared/CountdownTimer.tsx +++ b/components/disputes/shared/CountdownTimer.tsx @@ -6,6 +6,7 @@ import { cn } from '@/lib/utils'; interface CountdownTimerProps { deadline: Date; label?: string; + } interface TimeLeft { @@ -13,6 +14,7 @@ interface TimeLeft { hours: number; minutes: number; seconds: number; + } function computeTimeLeft(deadline: Date): TimeLeft | null { @@ -210,9 +212,12 @@ export function CountdownTimer({ deadline, label }: CountdownTimerProps) { > {visibleLabel} - - {announcement} - + {/* Avoid duplicate text and unnecessary live region updates when reduced motion is preferred */} + {!prefersReducedMotion && ( + + {announcement} + + )} ); } diff --git a/components/disputes/shared/__tests__/CountdownTimer.test.tsx b/components/disputes/shared/__tests__/CountdownTimer.test.tsx index be349ca8..5a75fd8a 100644 --- a/components/disputes/shared/__tests__/CountdownTimer.test.tsx +++ b/components/disputes/shared/__tests__/CountdownTimer.test.tsx @@ -200,6 +200,7 @@ describe('CountdownTimer', () => { const liveRegion = container.querySelector('[aria-live="polite"]'); expect(liveRegion?.textContent).toBe('Deadline passed'); }); + }); describe('reduced motion', () => {