[jules] a11y: Complete keyboard navigation for Dashboard and Friends pages#310
[jules] a11y: Complete keyboard navigation for Dashboard and Friends pages#310
Conversation
…pages Added comprehensive keyboard navigation support to the Dashboard and Friends pages. - Applied `focus-visible` states to all interactive elements (Quick Actions, individual/group comparison balances, friend cards, error retries, and search inputs). - Re-styled focus states dynamically to conform with both the Glassmorphism and Neobrutalism design patterns. - Enhanced ARIA metadata on the Friends page to properly announce the relationship between expandable summary buttons and their breakdown details containers (`aria-controls`, `aria-expanded`). - Included tracking updates to `todo.md` and `changelog.md`. Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
✅ Deploy Preview for split-but-wiser ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThis pull request implements keyboard navigation and focus styling improvements across the Web Dashboard and Friends pages. Changes include adding theme-aware Changes
Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #310 +/- ##
=======================================
Coverage ? 63.55%
=======================================
Files ? 21
Lines ? 2456
Branches ? 254
=======================================
Hits ? 1561
Misses ? 831
Partials ? 64
🚀 New features to boost your workflow:
|
![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 the current code and only fix it if needed.
Inline comments:
In `@web/pages/Friends.tsx`:
- Around line 153-154: The focus styles in the Glassmorphism branch use both
focus:ring-2 focus:ring-blue-500/50 and focus-visible:ring-2 which can stack;
update the non-Neobrutalism class string (the ternary branch in Friends.tsx
producing 'bg-white/10 border border-white/20 ...') to remove the plain focus:
classes and use focus-visible:ring-2 focus-visible:ring-blue-500/50 (and
focus-visible:ring-offset if needed) instead so only focus-visible variants are
applied, matching the rest of the PR and avoiding conflicting
:focus/:focus-visible stacking.
- Around line 307-312: The "View Details" button inside the Friends component
has no onClick handler; either wire it to the same navigation/action used by the
other buttons in this file or remove it until ready. Locate the button (the
element rendering "View Details" and using the isNeo variable and ArrowRight
icon) and add an onClick prop that calls the existing handler used elsewhere in
this component (reuse the same function the other action buttons call) or, if no
action exists yet, remove the button markup to avoid a dead control. Ensure the
added handler performs the intended navigation/action and keeps the existing
styling logic.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: a22c9065-7114-4314-996c-9a7856d19077
⛔ Files ignored due to path filters (1)
web/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
.Jules/changelog.md.Jules/todo.mdweb/pages/Dashboard.tsxweb/pages/Friends.tsx
| ? 'bg-white border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] focus:translate-x-[2px] focus:translate-y-[2px] focus:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-black dark:focus-visible:ring-white rounded-none placeholder:text-black/40' | ||
| : 'bg-white/10 border border-white/20 focus:bg-white/20 focus:border-blue-400 focus:ring-2 focus:ring-blue-500/50 backdrop-blur-md rounded-2xl text-white placeholder:text-white/40' |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Minor: Potential focus style conflict on non-Neobrutalism theme.
The Glassmorphism branch combines focus:ring-2 focus:ring-blue-500/50 with focus-visible:ring-2. Since :focus and :focus-visible can both apply during keyboard navigation, this may cause unpredictable ring stacking. Consider using only focus-visible: classes for consistency with the rest of the PR.
💡 Suggested simplification
- : 'bg-white/10 border border-white/20 focus:bg-white/20 focus:border-blue-400 focus:ring-2 focus:ring-blue-500/50 backdrop-blur-md rounded-2xl text-white placeholder:text-white/40'
+ : 'bg-white/10 border border-white/20 focus:bg-white/20 focus:border-blue-400 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 backdrop-blur-md rounded-2xl text-white placeholder:text-white/40'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@web/pages/Friends.tsx` around lines 153 - 154, The focus styles in the
Glassmorphism branch use both focus:ring-2 focus:ring-blue-500/50 and
focus-visible:ring-2 which can stack; update the non-Neobrutalism class string
(the ternary branch in Friends.tsx producing 'bg-white/10 border border-white/20
...') to remove the plain focus: classes and use focus-visible:ring-2
focus-visible:ring-blue-500/50 (and focus-visible:ring-offset if needed) instead
so only focus-visible variants are applied, matching the rest of the PR and
avoiding conflicting :focus/:focus-visible stacking.
| <button type="button" className={`w-full mt-4 py-2 text-sm font-bold flex items-center justify-center gap-2 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${isNeo | ||
| ? 'bg-black text-white hover:bg-gray-800 rounded-none focus-visible:ring-black dark:focus-visible:ring-white' | ||
| : 'bg-white/10 hover:bg-white/20 rounded-xl focus-visible:ring-white/50' | ||
| }`}> | ||
| View Details <ArrowRight size={14} /> | ||
| </button> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if there's an onClick handler for "View Details" buttons elsewhere or if this is a known TODO
rg -n "View Details" web/pages/Friends.tsx -A 5 -B 2Repository: Devasy/splitwiser
Length of output: 439
🏁 Script executed:
sed -n '305,315p' web/pages/Friends.tsxRepository: Devasy/splitwiser
Length of output: 843
🏁 Script executed:
sed -n '280,320p' web/pages/Friends.tsxRepository: Devasy/splitwiser
Length of output: 2479
🏁 Script executed:
rg -i "todo|fixme|wip|placeholder" web/pages/Friends.tsxRepository: Devasy/splitwiser
Length of output: 628
🏁 Script executed:
rg -n "onClick" web/pages/Friends.tsx | head -20Repository: Devasy/splitwiser
Length of output: 179
Add onClick handler to "View Details" button
The button in the Group Breakdown section has no click handler, while other buttons in this file do (e.g., line 253). Either implement the navigation/action or remove the button until functionality is ready.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@web/pages/Friends.tsx` around lines 307 - 312, The "View Details" button
inside the Friends component has no onClick handler; either wire it to the same
navigation/action used by the other buttons in this file or remove it until
ready. Locate the button (the element rendering "View Details" and using the
isNeo variable and ArrowRight icon) and add an onClick prop that calls the
existing handler used elsewhere in this component (reuse the same function the
other action buttons call) or, if no action exists yet, remove the button markup
to avoid a dead control. Ensure the added handler performs the intended
navigation/action and keeps the existing styling logic.
1 participant
Added comprehensive keyboard navigation support to the Dashboard and Friends pages.
focus-visiblestates to all interactive elements (Quick Actions, individual/group comparison balances, friend cards, error retries, and search inputs).aria-controls,aria-expanded).todo.mdandchangelog.md.PR created automatically by Jules for task 15600808817016522657 started by @Devasy23
Summary by CodeRabbit
Release Notes