chore(ui): audit pass on Leaderboard ViewSelector + GroupsBrowser - #600
Merged
Conversation
Top-5 improvements from the design-guidelines pass against the ViewSelector + GroupsBrowser components added in the previous refactor: 1. Add :focus-visible outline to ViewSelector items, GroupsBrowser TabButtons, and group Cards. Keyboard users had no visible focus indicator on these interactive surfaces. 2. Make ViewSelector responsive. Bar now flex-wraps and Title drops from 30px -> 24px below 480px so the segmented control doesn't get pushed off-screen on small phones. 3. Replace role="tablist" with aria-current="page" in ViewSelector. These are URL navigations, not in-page tab panels; the tab semantics were dishonest and would have broken expected ArrowLeft/Right focus behavior. 4. Match border-radius (10 -> 8) so the ViewSelector Group matches the existing Tabs/SortOptions visual language. 5. Replace the "Loading groups..." string with a proper shimmer skeleton grid (6 cards). Honors prefers-reduced-motion. Added aria-busy + aria-live + aria-label="Loading groups" so SRs get the right announcement. Also added aria-disabled visual styling to the My-groups TabButton when signed out, and role="alert" to the error message. Constraint: keep visual language consistent with the existing SortOptions inside LeaderboardClient Rejected: drop the color transition on hover entirely | the /ui skill's Tailwind guideline against transition-* on hover is opinionated; the styled-components version reads fine and matches the rest of the codebase Confidence: high Scope-risk: very narrow (only the two new components; no schema, no API, no test changes) Directive: when adding link-based segmented controls, prefer aria-current over role=tablist — links navigate, tabs swap panels Not-tested: arrow-key focus traversal across the Users/Groups items (browsers handle this natively for links via Tab; no custom keyboard handler needed)
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Audit pass on the new components from PR #599. Adds keyboard
:focus-visiblerings, makes the selector responsive, swaps misleadingrole=tablistforaria-current="page", harmonizes border-radius with the rest of the codebase, and replaces a plain loading string with a proper shimmering skeleton grid (respectsprefers-reduced-motion).Verification
tsc --noEmit-> 0 errorsbun run dev:/leaderboard200,/leaderboard?view=groups200aria-current="page"andaria-liveship; CSS grep confirms multiple:focus-visiblerules emitSummary by cubic
Accessibility and responsiveness audit for the leaderboard
ViewSelectorandGroupsBrowser. Improves keyboard focus, small-screen layout, and loading UX.New Features
Refactors
ViewSelectoritems, tab buttons, and group cards.ViewSelectorresponsive (wrap bar; title scales at ≤480px).aria-current="page"on links for correct semantics.Written for commit d4c8ac7. Summary will update on new commits. Review in cubic