📌 Description
The accessibility audit produced concrete findings for the marketplace
(design/accessibility-audit/findings/03-marketplace.md) and dashboard
(04-dashboard.md), with a remediation-plan.md and acceptance-criteria.md.
The marketplace search/typeahead (MarketplaceHeader.tsx,
MarketplaceFilters.tsx) and dashboard charts need keyboard operability,
correct labelling, and live-region announcements.
This issue remediates the marketplace and dashboard accessibility findings.
Goal: marketplace search and dashboard surfaces meet the audit's
acceptance criteria for keyboard, labelling, and announcements.
🎯 Requirements and Context
- Make the search/typeahead in
MarketplaceHeader.tsx fully keyboard operable
(arrow navigation, Enter to select, Esc to dismiss) with aria-activedescendant
and a labelled combobox.
- Announce result counts / empty results via a polite live region.
- Ensure filter controls in
MarketplaceFilters.tsx have accessible names and
states.
- Give dashboard charts (
HealthMetrics*Chart.tsx) text alternatives /
summaries per 04-dashboard.md.
- Satisfy the items in
design/accessibility-audit/acceptance-criteria.md.
🛠️ Suggested Execution
1. Create a branch
git checkout -b feature/a11y-marketplace-dashboard
2. Implement changes
- Update
MarketplaceHeader.tsx, MarketplaceFilters.tsx, and the dashboard
chart components per the findings.
- Add tests asserting roles, labels, keyboard interactions, and live regions.
3. Test and commit
- Run
npm test.
- Edge cases: empty results announcement, keyboard-only navigation, no-mouse
filter toggle, chart with no data.
Example commit message
fix: remediate marketplace and dashboard accessibility findings
✅ Guidelines
- Minimum 95% test coverage on changed interaction logic.
- Clear documentation mapping changes to audit findings.
- Timeframe: 96 hours.
🏷️ Labels
type-security · type-enhancement · area-frontend · MAYBE REWARDED · GRANTFOX OSS · OFFICIAL CAMPAIGN
💬 Community & Support
- Join the CommitLabs contributor Discord: https://discord.gg/WV7tdYkJk
- Introduce yourself before starting to avoid duplicate work.
- Maintainers triage actively and review fast.
📌 Description
The accessibility audit produced concrete findings for the marketplace
(
design/accessibility-audit/findings/03-marketplace.md) and dashboard(
04-dashboard.md), with aremediation-plan.mdandacceptance-criteria.md.The marketplace search/typeahead (
MarketplaceHeader.tsx,MarketplaceFilters.tsx) and dashboard charts need keyboard operability,correct labelling, and live-region announcements.
This issue remediates the marketplace and dashboard accessibility findings.
🎯 Requirements and Context
MarketplaceHeader.tsxfully keyboard operable(arrow navigation, Enter to select, Esc to dismiss) with
aria-activedescendantand a labelled combobox.
MarketplaceFilters.tsxhave accessible names andstates.
HealthMetrics*Chart.tsx) text alternatives /summaries per
04-dashboard.md.design/accessibility-audit/acceptance-criteria.md.🛠️ Suggested Execution
1. Create a branch
2. Implement changes
MarketplaceHeader.tsx,MarketplaceFilters.tsx, and the dashboardchart components per the findings.
3. Test and commit
npm test.filter toggle, chart with no data.
Example commit message
✅ Guidelines
🏷️ Labels
type-security·type-enhancement·area-frontend·MAYBE REWARDED·GRANTFOX OSS·OFFICIAL CAMPAIGN💬 Community & Support