Skip to content

fix(a11y): add high-contrast focus-visible ring to custom select components#6125

Closed
hardik-bhalekar wants to merge 1 commit into
JhaSourav07:mainfrom
hardik-bhalekar:fix/accessibility-focus-rings
Closed

fix(a11y): add high-contrast focus-visible ring to custom select components#6125
hardik-bhalekar wants to merge 1 commit into
JhaSourav07:mainfrom
hardik-bhalekar:fix/accessibility-focus-rings

Conversation

@hardik-bhalekar

Copy link
Copy Markdown

Summary

Adds visible keyboard-focus indicators to every custom <select> element that previously relied on browser-default or invisible outlines, improving WCAG 2.1 §2.4.7 (Focus Visible) compliance.

Problem

Several custom-styled <select> elements across the dashboard and customization surfaces suppress the browser's native focus outline (outline-none) but do not provide an adequate replacement. This makes it impossible for keyboard-only or assistive-technology users to track which control currently has focus.

Changes

File Change
app/customize/components/ThemeSelector.tsx Added focus-visible:ring-2 focus-visible:ring-purple-500 to StyledSelect
components/dashboard/CIAnalytics/CIFilters.tsx Replaced focus:ring-2 focus:ring-cyan-500/30 with focus-visible:ring-2 focus-visible:ring-purple-500 on both filter selects
components/dashboard/InactiveRepoReminder.tsx Added focus-visible:ring-2 focus-visible:ring-purple-500 to the inactivity filter select

Why focus-visible instead of focus

focus-visible activates only on keyboard navigation, not on mouse clicks, preserving the clean mouse-click UX while guaranteeing visibility for keyboard users. The purple ring (ring-purple-500) provides ≥ 3:1 contrast against both light and dark backgrounds per WCAG guidelines.

Testing

  • npx tsc --noEmit passes with zero errors
  • Keyboard-tabbing through each select shows a visible purple ring
  • Mouse clicks do not trigger the focus ring

…e:ring-purple-500 to custom select components
@vercel

vercel Bot commented Jun 20, 2026

Copy link
Copy Markdown
Contributor

@hardik-bhalekar is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions

Copy link
Copy Markdown
Contributor

👋 Hey @hardik-bhalekar! Thanks for your contribution! 🎉

Unfortunately, this PR has been automatically closed because it is not linked to any open issue.

To resolve this, please do the following:

  1. Link a valid open issue by editing your PR description to include a closing keyword (e.g., Fixes #<issue-number>).
  2. Reopen this PR once the link is added.

💡 You can link multiple issues if needed (e.g. Fixes #12, Closes #34).
If you're working on something that doesn't have an issue yet, please open one first and then link it here.

We look forward to reviewing your PR once an issue is linked! 🚀

@github-actions github-actions Bot closed this Jun 20, 2026
@github-actions github-actions Bot added the type:bug Something isn't working as expected label Jun 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

type:bug Something isn't working as expected

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant