feat: make stat cards clickable#4
Conversation
…atchers - Stars, Forks, Open Issues, and Watchers stat cards now open the corresponding GitHub.com page in a new tab - Bump version to 0.3.3
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe app version is bumped from v0.3.2 to v0.3.3 in Changesv0.3.3 Interactive ViewRepo + Dependency Upgrades
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)✅ Unit Tests committed locally.
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/ViewRepo.tsx`:
- Around line 159-166: The Badge component rendering the topic with an onClick
handler to trigger search is not keyboard-accessible. Replace the Badge
component with a semantic HTML button element that wraps the topic display and
maintains the same onClick handler for the search function. This will
automatically provide keyboard accessibility through standard Enter and Space
key support, and you can apply the existing className styling to the button to
preserve the visual appearance.
- Around line 55-57: The topic Badge component at lines 162-163 is clickable but
lacks keyboard accessibility and cannot receive focus. Convert the Badge to a
semantic interactive element such as a button, or add tabIndex="0" to make it
focusable, then implement keyboard event handlers (onKeyDown) to respond to
Enter and Space keys with the same click behavior. Ensure the element has proper
ARIA attributes if using a non-button element, and test that it can be navigated
to via keyboard and activated using Enter/Space keys.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 011c2745-6fcb-4267-8312-f6499453936e
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
README.mdpackage.jsonsrc/components/ViewRepo.tsx
| selectUser, | ||
| search | ||
| } = useAppStore(); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
npm run lint
npm run buildRepository: ziguifrido/github-explorer
Length of output: 1330
Add keyboard support to topic Badge component for accessibility.
Lint and type checks pass. However, the topic Badge at line 162-163 is clickable but not keyboard-accessible. Make it a semantic control (button or interactive element) with proper keyboard handlers, or ensure it can receive focus and respond to Enter/Space keys.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/ViewRepo.tsx` around lines 55 - 57, The topic Badge component
at lines 162-163 is clickable but lacks keyboard accessibility and cannot
receive focus. Convert the Badge to a semantic interactive element such as a
button, or add tabIndex="0" to make it focusable, then implement keyboard event
handlers (onKeyDown) to respond to Enter and Space keys with the same click
behavior. Ensure the element has proper ARIA attributes if using a non-button
element, and test that it can be navigated to via keyboard and activated using
Enter/Space keys.
Source: Coding guidelines
| <Badge | ||
| key={topic} | ||
| variant="secondary" | ||
| className="bg-muted hover:bg-muted text-muted-foreground hover:text-foreground text-[11px] py-0.5 px-2 rounded-md font-sans border border-subtle" | ||
| onClick={() => search(`topic:${topic}`)} | ||
| className="bg-muted hover:bg-muted text-muted-foreground hover:text-foreground text-[11px] py-0.5 px-2 rounded-md font-sans border border-subtle cursor-pointer transition-colors" | ||
| > | ||
| #{topic} | ||
| </Badge> |
There was a problem hiding this comment.
Topic badges are click-only and not keyboard-accessible.
Line 162 adds click behavior to Badge, but this control is not keyboard-operable as implemented. Use a semantic <button> (preferred) or add full keyboard interaction support.
Suggested fix
- {activeRepo.topics.map(topic => (
- <Badge
- key={topic}
- variant="secondary"
- onClick={() => search(`topic:${topic}`)}
- className="bg-muted hover:bg-muted text-muted-foreground hover:text-foreground text-[11px] py-0.5 px-2 rounded-md font-sans border border-subtle cursor-pointer transition-colors"
- >
- #{topic}
- </Badge>
- ))}
+ {activeRepo.topics.map((topic) => (
+ <button
+ key={topic}
+ type="button"
+ onClick={() => void search(`topic:${topic}`)}
+ className="bg-muted hover:bg-muted text-muted-foreground hover:text-foreground text-[11px] py-0.5 px-2 rounded-md font-sans border border-subtle cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+ >
+ #{topic}
+ </button>
+ ))}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Badge | |
| key={topic} | |
| variant="secondary" | |
| className="bg-muted hover:bg-muted text-muted-foreground hover:text-foreground text-[11px] py-0.5 px-2 rounded-md font-sans border border-subtle" | |
| onClick={() => search(`topic:${topic}`)} | |
| className="bg-muted hover:bg-muted text-muted-foreground hover:text-foreground text-[11px] py-0.5 px-2 rounded-md font-sans border border-subtle cursor-pointer transition-colors" | |
| > | |
| #{topic} | |
| </Badge> | |
| {activeRepo.topics.map((topic) => ( | |
| <button | |
| key={topic} | |
| type="button" | |
| onClick={() => void search(`topic:${topic}`)} | |
| className="bg-muted hover:bg-muted text-muted-foreground hover:text-foreground text-[11px] py-0.5 px-2 rounded-md font-sans border border-subtle cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" | |
| > | |
| #{topic} | |
| </button> | |
| ))} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/ViewRepo.tsx` around lines 159 - 166, The Badge component
rendering the topic with an onClick handler to trigger search is not
keyboard-accessible. Replace the Badge component with a semantic HTML button
element that wraps the topic display and maintains the same onClick handler for
the search function. This will automatically provide keyboard accessibility
through standard Enter and Space key support, and you can apply the existing
className styling to the button to preserve the visual appearance.
|
Note Unit test generation is a public access feature. Expect some limitations and changes as we gather feedback and continue to improve it. Generating unit tests... This may take up to 20 minutes. |
|
✅ Unit tests committed locally. Commit: |
1 participant
Makes the stat cards in the repository dashboard clickable — clicking Stars, Forks, Open Issues, or Watchers opens the corresponding page on GitHub.com in a new tab.
/stargazers/forks/issues/watchersAlso bumps the project version to 0.3.3.
Changes
<Card>wrappers with<a>links in the stats grid (src/components/ViewRepo.tsx)Stars,Forks, etc.) now usegroup-hover:text-foregroundfor a subtle hover accentpackage.json,package-lock.json, andREADME.mdSummary by CodeRabbit
Release Notes v0.3.3
New Features
Chores