Skip to content

Fix accessibility: ARIA labels, sr-only labels, aria-disabled, stable keys - #1285

Open
thesajidalam wants to merge 1 commit into
shyamtawli:masterfrom
thesajidalam:fix/accessibility-aria-labels
Open

thesajidalam wants to merge 1 commit into
shyamtawli:masterfrom
thesajidalam:fix/accessibility-aria-labels

Conversation

@thesajidalam

Copy link
Copy Markdown

Fixes #1260 and #1262

Changes

Accessibility (Issue #1262)

  • Profile.jsx: Added aria-label on GitHub, Twitter, and LinkedIn social links with the developer's name (e.g., aria-label="GitHub profile of John Doe")
  • Sidebar.jsx: Added aria-label on theme toggle button reflecting current state ("Switch to dark mode" / "Switch to light mode")
  • Search.jsx: Added <label htmlFor> with sr-only class for both the search criteria dropdown and search input
  • Pagination.jsx: Added aria-disabled matching visual disabled state, aria-label on Previous/Next buttons, removed invalid href attributes from <span> elements

Stable React Keys (Issue #1260)

  • Profile.jsx: Replaced key={index} (array index) with key={skill} (stable string) for skill badges

Acceptance Criteria

  • Screen readers can announce every interactive control
  • Tab navigation works with proper labels
  • axe DevTools shows zero "elements must have an accessible name" violations
  • No more invalid href on non-anchor elements

…able React keys

- Add aria-label on social links (GitHub/Twitter/LinkedIn) with developer name
- Add aria-label on theme toggle reflecting current mode
- Add sr-only labels for search input and filter dropdown
- Add aria-disabled on pagination buttons matching visual state
- Add aria-label on Previous/Next pagination buttons
- Remove invalid href attributes from span elements in Pagination
- Replace array index keys with stable skill name keys in Profile
- Fixes shyamtawli#1260, shyamtawli#1262
@vercel

vercel Bot commented Aug 25, 2026

Copy link
Copy Markdown

@thesajidalam is attempting to deploy a commit to the Shyam Tawli's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot 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.

Great job, @thesajidalam! 🎉 Thank you for opening a pull request. Your contribution is valuable and we appreciate your efforts to improve our project.

Soon the maintainers/owner will review it and provide you with feedback/suggestions.

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.

[Bug]: Use stable React keys instead of array index

1 participant