Repository navigation
Reflect market filters in URL and announce result counts #965
Description
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
Activity
shobhamerabacha-star commentedon Sep 27, 2026
Hello! I would like to work on this issue.
I would like to resolve this issue. Here is my proposed execution plan:
Reflect market filters in URL and announce result countsfollowing the existing UI design system, accessibility standards, and responsive styling.Looking forward to collaborating on this—please assign!
Fading-Dev commentedon Sep 27, 2026
@Fading-Dev has applied to work on this issue as part of the Stellar Wave Program's 9th wave.
ℹ️ Repo Maintainers: To accept this application, review their application or assign @Fading-Dev to this issue.
drips-wave commentedon Sep 27, 2026
Congratulations, @Fading-Dev! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on September 30, 2026.
🧑💻 @Fading-Dev: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.
Warning
When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.
🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.
🌊 Happy Wave 🌊
drips-wave commentedon Sep 30, 2026
This issue has been marked as completed by a Drips Wave moderator for @Fading-Dev as part of the Stellar Wave Program's 9th Wave 🥳
Moderator's reason: [Auto-assessed] The pull request correctly addresses all acceptance criteria of issue #965 by syncing search and category filters with URL search parameters using router.replace and a debounced input, validating categories against the known list, wrapping the search params in a Suspense boundary, resetting filters cleanly, and announcing result counts via useGlobalLiveRegion. No maintainer objections exist across any channel, and the Vercel deploy check failure is non-actionable as it requires team authorization for a fork PR.
😎 @Fading-Dev: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here.
🧑💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.
ℹ️ Note: This issue was marked complete via moderation. Points were issued even though the GitHub issue remains open.
feat(markets): sync filters to the URL and announce result counts (#965…
grantfox-oss commentedon Oct 1, 2026
🎉 This issue has been marked as completed on GrantFox!
@Fading-Dev's PR #968 was approved and merged by @greatest0fallt1me.
🏆 @Fading-Dev: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (210 total points). Track your full progress on GrantFox.
👏 Great work, @Fading-Dev! Keep contributing to Predictify-org.