Skip to content

Fix accessible name for GSoC member filter - #182

Open
sujalswaraj-lab wants to merge 1 commit into
NST-DEVFORGE:mainfrom
sujalswaraj-lab:fix/72-gsoc-dropdown-label
Open

sujalswaraj-lab wants to merge 1 commit into
NST-DEVFORGE:mainfrom
sujalswaraj-lab:fix/72-gsoc-dropdown-label

Conversation

@sujalswaraj-lab

Copy link
Copy Markdown

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

  • I was assigned the issue before I started
  • npm run lint and npm run build pass locally (not run; Node 24 is unavailable)
  • The diff only touches what the issue asked for

@vercel

vercel Bot commented Oct 3, 2026

Copy link
Copy Markdown

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.

github-actions Bot added a commit that referenced this pull request Oct 3, 2026
@github-actions

github-actions Bot commented Oct 3, 2026

Copy link
Copy Markdown

📸 How this looks

Built from this PR, so you can see the change without checking it out.

/

Desktop (1280px), top 3000px
Mobile (390px), top 3000px

/learn/open-source

Desktop (1280px), top 3000px
Mobile (390px), top 3000px

Screenshots are taken from a production build of this PR, signed out. Pages behind sign-in show the signed-out view. Build log

@apsian4352-coder apsian4352-coder left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

  1. 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.
  2. 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.
  3. 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 kanaseprathamesh568-a11y left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Checked out pr-182 locally and verified:

  • npm test runs cleanly (all 121 tests across 13 suites pass).
  • npm run build completes 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?

Comment thread components/gsoc-stats.tsx
<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"

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

GSoC stats: the member dropdown has no label

3 participants