feat(elections): accessible ranked-choice ballot UI
Open
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 33
- Forks
- 104
- Avg merge
- 12h 3m
- Merged PRs (30d)
- 10
Description
Summary
Build the voter-facing ballot: a mobile-friendly, WCAG 2.2 AA-compliant interface for ranking candidates in each race.
Part of #1933.
Requirements
- Per-race ranking UI that supports drag-to-reorder and keyboard-only reordering (up/down arrow keys)
- Screen-reader-accessible announcements when rank changes
- Support partial ballots (voter may rank a subset of candidates)
- Support skipping a race (explicit "I don't wish to vote in this race" option)
- Candidate cards show name, bio, optional photo — never anything that could hint at voter preference
- Review screen summarizing all rankings before final submission
- Clear confirmation of submission with no way to edit afterward
- Works on mobile viewports (375×667 minimum); touch-friendly rank targets
- Passes axe-core automated accessibility checks in CI
Context
- Epic: #1933
- Depends on schema issue
Implementation notes
- Use the design-system's focus/contrast tokens — do not introduce new color tokens
- Consider a "rank" number + candidate list pattern (select a rank for each candidate) as a keyboard-friendly alternative to pure drag — prototype both and pick the more accessible one
- Run through the `uiux-design-team:accessibility-audit` skill before calling this done
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No implementation files, tests, or entry points are named. Start by resolving the schema dependency and reviewing the design-system focus and contrast tokens; prototype the rank-number and candidate-list pattern alongside drag-to-reorder. Done means the ballot meets the listed ranking, review, submission, mobile, keyboard, screen-reader, and axe-core requirements and passes the accessibility-audit skill.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100