Polish market countdown timer with reduced motion fallback

[GiftedGiftB]

closed #366

Description

This PR addresses issue #366 by polishing the market countdown timer's behavior when a user prefers reduced motion. It fixes an accessibility bug and testing issue where the static label under reduced motion resulted in duplicate elements and double-announcements for screen readers.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Performance improvement
• Refactoring (no functional changes)
• Style/UI changes
• Test updates
• CI/CD changes
• Security improvements

Related Issues

Closes #366

Changes Made

Files Modified

• components/disputes/shared/CountdownTimer.tsx (Lines 210-216)

Key Changes

• Conditionally render the sr-only aria-live region in the CountdownTimer component so it is omitted when prefersReducedMotion is true.
• This prevents screen readers from double-reading the same text since the visible text label acts as a static label under reduced-motion preference.
• Resolves failing assertions in CountdownTimer.test.tsx which expected a single accessible label to be rendered.

Testing

• Unit tests added/updated
• Integration tests added/updated
• Manual testing completed
• Cross-browser testing (if applicable)
• Mobile responsiveness tested (if applicable)
• Accessibility testing completed
• Performance testing (if applicable)

Test Coverage

• New code is covered by tests
• Existing tests still pass
• Test coverage meets project standards

Screenshots/Videos

Minimum screenshots for UI/design PRs

• Desktop default state
• Mobile default state
• One stressed state: error, empty, loading, success, validation, open menu, or open modal
• Focus-visible screenshot for the primary interactive element (required when focus behavior changed)
• Open overlay screenshot for modal, drawer, popover, select, or date picker (required when applicable)
• Quick actions closed and open states (required for toolbar, FAB, or bottom-sheet action changes)
• Keyboard-open mobile screenshot and desktop sticky state (required for sticky action panel changes)

Before

(Omitted - DOM structure issue causing duplicate accessibility reads)

After

(Omitted - Corrected DOM structure successfully limits to a single text node under reduced-motion)

Pre-submission Checklist

Code Quality

• Code follows project style guidelines
• Self-review completed
• Code is self-documenting
• No console errors or warnings
• No linting errors
• No TypeScript errors (if applicable)

Functionality

• All tests pass
• Feature works as expected
• No breaking changes introduced
• Performance impact assessed

Documentation

• README updated (if applicable)
• Code comments added where necessary
• API documentation updated (if applicable)
• Changelog updated (if applicable)

Security & Accessibility

• Security considerations addressed
• Accessibility standards met
• No sensitive data exposed
• Input validation implemented

Breaking Changes

Breaking Changes:

• None.

Migration Steps:

• N/A

Additional Notes

Dependencies

• No new dependencies added
• Dependencies updated (list changes)
• Security vulnerabilities addressed

Performance Impact

• No performance impact
• Performance improved (Reduced redundant DOM elements under reduced motion preference)
• Performance impact documented

Browser/Device Support

• Tested on Chrome
• Tested on Firefox
• Tested on Safari
• Tested on Edge
• Tested on mobile devices

Labels

• bugfix
• ui/ux
• frontend

Reviewers

• Frontend team review
• Backend team review (if applicable)
• Design team review (if applicable)
• Security review (if applicable)

[vercel]

@GiftedGiftB is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@GiftedGiftB Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits