Skip to content

🎨 Palette: [UX improvement] Improve keyboard accessibility of Navbar actions #140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Cukurikik wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: [UX improvement] Improve keyboard accessibility of Navbar actions #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 2024-05-18 - Convert interactive `div` elements to semantic `button`s in custom components
**Learning:** In Next.js with Tailwind CSS, custom interactive UI elements built as `div`s with `cursor-pointer` lack inherent keyboard navigation (Tab-ability) and explicit ARIA roles. The use of `motion.button` and `<button>` requires specific tailwind utility classes for accessible focusing.
**Action:** Always convert interactive `div` wrappers acting as controls into standard `button` or `motion.button` elements. Additionally, explicitly apply `focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none` classes to these buttons to ensure standard and prominent focus indicators are visible when interacting with keyboard navigation.
19 changes: 19 additions & 0 deletions dev_server.log
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@

> [email protected] dev /app
> cross-env PORT=3000 next dev --webpack

▲ Next.js 16.2.1 (webpack)
- Local: http://localhost:3000
- Network: http://192.168.0.2:3000
✓ Ready in 585ms
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

- Experiments (use with caution):
· serverActions

○ Compiling / ...
GET / 200 in 15.1s (next.js: 14.7s, application-code: 465ms)
GET / 200 in 134ms (next.js: 11ms, application-code: 123ms)
17 changes: 9 additions & 8 deletions src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,20 @@ export default function Navbar() {
</div>

<div className="flex items-center gap-8">
<div className="hidden md:flex items-center gap-3 px-4 py-2 rounded-full bg-white/5 border border-white/5 text-slate-400 hover:text-white hover:bg-white/10 transition-all cursor-pointer group">
<button type="button" aria-label="Search commands" className="hidden md:flex items-center gap-3 px-4 py-2 rounded-full bg-white/5 border border-white/5 text-slate-400 hover:text-white hover:bg-white/10 transition-all cursor-pointer group focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none">
<Search className="w-4 h-4 group-hover:scale-110 transition-transform" />
<span className="text-xs font-bold tracking-wider">SEARCH COMMANDS</span>
<span className="text-[10px] bg-white/10 px-1.5 py-0.5 rounded border border-white/10 font-mono">⌘K</span>
</div>
</button>

<div className="flex items-center gap-4">
<IconButton icon={<Bell className="w-5 h-5" />} />
<IconButton icon={<User className="w-5 h-5" />} />
<IconButton icon={<Bell className="w-5 h-5" />} ariaLabel="Notifications" />
<IconButton icon={<User className="w-5 h-5" />} ariaLabel="User Profile" />
<div className="h-8 w-[1px] bg-white/10 mx-2" />
<div className="flex items-center gap-3 px-4 py-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20 group cursor-pointer">
<button type="button" aria-label="System status" className="flex items-center gap-3 px-4 py-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20 group cursor-pointer focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none">
<div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
<span className="text-[10px] font-black text-emerald-500 tracking-widest uppercase">System Online</span>
</div>
</button>
Comment on lines +45 to +48
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check if there are any onClick handlers or interactive behaviors associated with the system status element
rg -n -C3 'System.*Online|system.*status' --type=tsx --type=ts

Repository: Cukurikik/HEAVY-TOOLS

Length of output: 92

🏁 Script executed:

# Find Navbar.tsx and examine its full content
find . -name "Navbar.tsx" -type f 2>/dev/null | head -20

Repository: Cukurikik/HEAVY-TOOLS

Length of output: 92

🏁 Script executed:

# Search for onClick handlers or event listeners without file type specification
rg -n "onClick|on[A-Z]|addEventListener" . --glob="*.tsx" --glob="*.ts" -A 2 -B 2 | grep -i "system\|status" -A 5 -B 5

Repository: Cukurikik/HEAVY-TOOLS

Length of output: 50378

🏁 Script executed:

# Search more broadly for the button or system status context
rg -n "System Online|system.*status|aria-label=\"System status\"" . --glob="*.tsx" --glob="*.ts" -A 5 -B 5

Repository: Cukurikik/HEAVY-TOOLS

Length of output: 2213

🏁 Script executed:

cat -n ./src/components/Navbar.tsx

Repository: Cukurikik/HEAVY-TOOLS

Length of output: 4575

Remove cursor-pointer class or add interactive behavior to system status button.

The button element has no onClick handler or interactive behavior, making the cursor-pointer class misleading to users. If this element is purely presentational (showing status only), use a <div role="status" aria-live="polite"> instead. If it should be interactive, add the appropriate click handler.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/Navbar.tsx` around lines 45 - 48, The "System status" button
in Navbar.tsx is presentational but styled with cursor-pointer while having no
onClick handler; either remove the misleading interactivity or make it truly
interactive. To fix: if it's non-interactive, replace the <button> usage with a
non-interactive element (e.g., a <div> or span) and add role="status" and
aria-live="polite" while removing the cursor-pointer class from the element
referenced by the status UI (the element containing "System Online"); if it
should be clickable, keep the <button> and add an onClick handler (and keyboard
handlers if needed) giving the component a clear action and keep or justify
cursor-pointer. Ensure updates target the element that currently renders the
status indicator.

</div>
</div>
</div>
Expand All @@ -62,12 +62,13 @@ function NavLink({ href, label }: { href: string, label: string }) {
);
}

function IconButton({ icon }: { icon: React.ReactNode }) {
function IconButton({ icon, ariaLabel }: { icon: React.ReactNode, ariaLabel?: string }) {
return (
<motion.button
whileHover={{ scale: 1.1, y: -2 }}
whileTap={{ scale: 0.9 }}
className="p-2.5 rounded-xl bg-white/5 border border-white/5 text-slate-400 hover:text-white hover:bg-white/10 transition-all"
aria-label={ariaLabel}
className="p-2.5 rounded-xl bg-white/5 border border-white/5 text-slate-400 hover:text-white hover:bg-white/10 transition-all focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none"
>
{icon}
</motion.button>
Expand Down
Loading