Repository navigation
Fix accessible name for GSoC member filter - #182
sujalswaraj-lab wants to merge 1 commit into
Conversation
|
Someone is attempting to deploy a commit to the Geetansh Goyal's projects Team on Vercel. A member of the Team first needs to authorize it. |
📸 How this looksBuilt from this PR, so you can see the change without checking it out.
|
apsian4352-coder
left a comment
There was a problem hiding this comment.
I reviewed the diff and component statically against issue #72 and verified the GitHub Actions CI workflow logs.
The fix is minimal and directly satisfies the requirement by adding aria-label="Show PRs by member" to the <select> in components/gsoc-stats.tsx:441.
A quick observation and question:
- CI Status: In your PR checklist you noted being unable to run checks locally due to Node version; all core repository CI checks (Lint, Test, Type-check & build, and PR description) passed cleanly in GitHub Actions. The single failing check is just the external Vercel preview bot awaiting maintainer authorization.
- Accessible name pairing: Since the first
<option value="all">is"All Members", screen readers announce"Show PRs by member, All Members, menu popup", which gives clear context. - Question: Did you test with Chrome DevTools Elements -> Accessibility pane or an OS screen reader (like VoiceOver with Cmd+F5) to verify how the announcement sounds when switching between individual members?
kanaseprathamesh568-a11y
left a comment
There was a problem hiding this comment.
Checked out pr-182 locally and verified:
npm testruns cleanly (all 121 tests across 13 suites pass).npm run buildcompletes successfully with no TypeScript or lint regressions.- The
<select>element now has a clear accessible name satisfying WCAG 4.1.2 (Name, Role, Value).
One question:
Have you considered whether the PR list container below should include aria-live="polite" (or have the select announce the filtered count), so screen reader users are notified when changing the selected member updates the list?
| <div className="flex justify-between items-center mb-6"> | ||
| <h2 className="text-3xl font-bold text-white">All GSoC PRs</h2> | ||
| <select | ||
| aria-label="Show PRs by member" |
There was a problem hiding this comment.
Nice catch on adding the accessible name to this <select>!
For consistency across DevForge, components/quality-prs-list.tsx uses aria-label="Filter by member". Would "Filter PRs by member" or "Filter by member" be a closer match to the terminology used across the rest of the app?




What
The GSoC member selector now has an accessible name so screen readers can identify its purpose.
Fixes #72
How I tested it
I verified the aria-label is on the member select and the diff only changes this issue. I could not run npm lint, tests, or build locally because Node 24 is unavailable; GitHub Actions will run CI. No screenshot: this is a non-visual accessibility change.
Checklist