Summary
The search and category filters on app/markets/page.tsx live only in component state, so a filtered view cannot be shared, bookmarked or restored with the Back button. When results change there is no live-region announcement, and screen-reader users are not told how many markets now match or that the list emptied.
Why this matters
Market discovery links shared in the FWC26 campaign lose their filter context, and pressing Back from a market detail resets the user's search. WCAG 4.1.3 (Status Messages) expects a filtered result count to be announced, and the app already ships hooks/use-global-live-region.ts for exactly this.
Scope
Sync search and category to query params with useSearchParams and router.replace, debouncing the search input by about 300ms. Initialise state from the URL on load and validate category against the CATEGORIES list. After filtering, announce 'N markets found' politely through useGlobalLiveRegion, deduplicating identical counts. Keep NoMatchEmptyState's clear button resetting both the state and the URL.
Relevant code in Predictify-org/predictify-frontend:
app/markets/page.tsxapp/markets/__tests__/page.test.tsxhooks/use-global-live-region.tscomponents/events/NoMatchEmptyState.tsx
Priority
Medium
Acceptance criteria
- Typing a search updates ?q= in the URL without adding a history entry per keystroke
- Loading /markets?q=argentina&category=Football pre-fills both controls and filters the list
- An invalid category param falls back to 'all'
- Each change in result count triggers one polite live-region announcement
- app/markets/tests/page.test.tsx covers URL hydration and the announcement
Validation
Run pnpm test app/markets and pnpm test hooks/__tests__, then check the announcements with VoiceOver or NVDA in pnpm dev.
Non-goals
- Typo-only, formatting-only, or cosmetic changes.
- Unrelated refactors, dependency upgrades, or broad rewrites.
- Removing safeguards or weakening validation to make tests pass.
Contributor application
Before coding, describe the affected modules, proposed state/invariant changes, test strategy, compatibility considerations, and an estimate. Wait for assignment before starting implementation.
PR requirements
Use a feature branch and include Closes #<issue-number>. Address every criterion, map criteria to code and tests, explain security and failure-mode handling, and ensure CI passes.
Quality review
A maintainer will assess correctness, completeness, test depth, compatibility, observability, and adverse-case handling. A substantive implementation is required; merge or CI status alone does not guarantee reward eligibility.
Generated by Claude Code
Summary
The search and category filters on app/markets/page.tsx live only in component state, so a filtered view cannot be shared, bookmarked or restored with the Back button. When results change there is no live-region announcement, and screen-reader users are not told how many markets now match or that the list emptied.
Why this matters
Market discovery links shared in the FWC26 campaign lose their filter context, and pressing Back from a market detail resets the user's search. WCAG 4.1.3 (Status Messages) expects a filtered result count to be announced, and the app already ships hooks/use-global-live-region.ts for exactly this.
Scope
Sync search and category to query params with useSearchParams and router.replace, debouncing the search input by about 300ms. Initialise state from the URL on load and validate category against the CATEGORIES list. After filtering, announce 'N markets found' politely through useGlobalLiveRegion, deduplicating identical counts. Keep NoMatchEmptyState's clear button resetting both the state and the URL.
Relevant code in Predictify-org/predictify-frontend:
app/markets/page.tsxapp/markets/__tests__/page.test.tsxhooks/use-global-live-region.tscomponents/events/NoMatchEmptyState.tsxPriority
Medium
Acceptance criteria
Validation
Run
pnpm test app/marketsandpnpm test hooks/__tests__, then check the announcements with VoiceOver or NVDA inpnpm dev.Non-goals
Contributor application
Before coding, describe the affected modules, proposed state/invariant changes, test strategy, compatibility considerations, and an estimate. Wait for assignment before starting implementation.
PR requirements
Use a feature branch and include
Closes #<issue-number>. Address every criterion, map criteria to code and tests, explain security and failure-mode handling, and ensure CI passes.Quality review
A maintainer will assess correctness, completeness, test depth, compatibility, observability, and adverse-case handling. A substantive implementation is required; merge or CI status alone does not guarantee reward eligibility.
Generated by Claude Code