USRSE / USRSE/usrse.github.io

feat(elections): accessible ranked-choice ballot UI

Open
#1,941 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.