Skip to content

🎨 Palette: [UX improvement] Add ARIA labels and focus states to Navbar #135

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 4 commits into
base: main
Choose a base branch
from
Open

🎨 Palette: [UX improvement] Add ARIA labels and focus states to Navbar #135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
84d2563
🎨 Palette: [UX improvement] Add ARIA labels and focus states to Navbar
google-labs-jules[bot] Mar 24, 2026
dfe4a2d
🎨 Palette: [UX improvement] Fix GitHub Actions CI, add ARIA labels an…
google-labs-jules[bot] Mar 24, 2026
1a5b3ef
🎨 Palette: [UX improvement] Fix GitHub Actions CI, add ARIA labels an…
google-labs-jules[bot] Mar 24, 2026
dac1bd0
🎨 Palette: [UX improvement] Fix GitHub Actions CI, add ARIA labels an…
google-labs-jules[bot] Mar 24, 2026
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
20 changes: 14 additions & 6 deletions .github/workflows/video-backend-ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,33 @@ jobs:
- name: Checkout Repository
uses: actions/checkout@v4

- name: Setup pnpm
uses: pnpm/action-setup@v3
with:
version: 9

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
cache: 'pnpm'
cache-dependency-path: pnpm-lock.yaml

- name: Install Dependencies
run: npm ci
run: pnpm install --frozen-lockfile

- name: Run Prisma Generate
run: npx prisma generate
run: pnpm exec prisma generate
env:
DATABASE_URL: 'postgresql://postgres:postgres@localhost:5432/postgres'

- name: ESLint Check
run: npm run lint
run: pnpm run lint

- name: Run Vitest Suite (Unit & Integration)
run: npm run test
run: pnpm run test

- name: Build Next.js 15
run: npm run build
run: pnpm run build
env:
NEXT_TELEMETRY_DISABLED: 1
4 changes: 4 additions & 0 deletions .jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@

## 2024-03-23 - [Adding Keyboard Focus Rings to Custom Components]
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Mar 24, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Date appears incorrect.

The entry is dated 2024-03-23, but based on the PR creation date, this should likely be 2026-03-23.

📝 Proposed fix 
-## 2024-03-23 - [Adding Keyboard Focus Rings to Custom Components]
+## 2026-03-23 - [Adding Keyboard Focus Rings to Custom Components]
📝 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.

Suggested change
## 2024-03-23 - [Adding Keyboard Focus Rings to Custom Components]
## 2026-03-23 - [Adding Keyboard Focus Rings to Custom Components]
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.jules/palette.md at line 2, The markdown entry header in .jules/palette.md
currently reads "## 2024-03-23 - [Adding Keyboard Focus Rings to Custom
Components]" which has the wrong year; update that header to "## 2026-03-23 -
[Adding Keyboard Focus Rings to Custom Components]" so the date matches the PR
creation date and preserves the rest of the title unchanged.

**Learning:** Custom components like `motion.button` and pure visual elements (like styled `div` wrappers) easily lose their keyboard navigability when stripped of native HTML button semantics. In `Navbar.tsx`, interactive icons and visually simulated buttons lacked the `focus-visible` ring.
**Action:** When working on navigation or custom component libraries in this app, explicitly use `focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none` on interactive elements to ensure they do not become "dead ends" for keyboard users, and convert interactive `div` wrappers into native `<button>` tags so they can receive tab focus naturally.
3 changes: 3 additions & 0 deletions pnpm-workspace.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
packages:
- '.'

onlyBuiltDependencies:
- '@firebase/util'
- '@prisma/engines'
Expand Down
21 changes: 13 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,17 +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
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">
<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" title="System Status: Online" aria-label="System Status: Online">
<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>
Comment on lines +48 to 51
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Mar 24, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Potential accessibility inconsistency: interactive-looking element is not keyboard accessible.

This <div> has cursor-pointer suggesting it's clickable, but unlike the search element that was converted to <button>, this remains a non-focusable <div>. Keyboard users cannot tab to it.

If this element is intended to be interactive (e.g., clicking opens a status panel), convert it to a <button> for consistency with the PR's accessibility improvements. If it's purely informational, remove cursor-pointer to avoid implying interactivity.

💡 Option A: If interactive, convert to button 
-            <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" title="System Status: Online" aria-label="System Status: Online">
+            <button type="button" className="flex items-center gap-3 px-4 py-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20 group focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none" title="System Status: Online" aria-label="System Status: Online">
               <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>
💡 Option B: If non-interactive, remove cursor-pointer 
-            <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" title="System Status: Online" aria-label="System Status: Online">
+            <div className="flex items-center gap-3 px-4 py-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20 group" title="System Status: Online" aria-label="System Status: Online">
📝 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.

Suggested change
<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" title="System Status: Online" aria-label="System Status: Online">
<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 type="button" className="flex items-center gap-3 px-4 py-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20 group focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none" title="System Status: Online" aria-label="System Status: Online">
<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>
</button>
Suggested change
<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" title="System Status: Online" aria-label="System Status: Online">
<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>
<div className="flex items-center gap-3 px-4 py-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20 group" title="System Status: Online" aria-label="System Status: Online">
<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>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/Navbar.tsx` around lines 48 - 51, The status indicator div
labeled "System Online" in the Navbar component is styled like an interactive
control but is not keyboard-focusable; either convert that div to a semantic,
keyboard-accessible control or make it clearly non-interactive: if it should be
interactive, replace the <div> containing the pulsing dot and <span> ("System
Online") with a <button type="button">, preserve the existing className, title
and aria-label, add visible focus styles (or rely on existing focus ring), and
ensure no default form submission; if it is purely informational, remove the
interactive affordances (drop cursor-pointer and any interactive
titles/aria-labels that imply control) so it does not mislead keyboard users.

Expand All @@ -55,19 +58,21 @@ export default function Navbar() {

function NavLink({ href, label }: { href: string, label: string }) {
return (
<Link href={href} className="text-xs font-black text-slate-400 hover:text-white tracking-widest uppercase transition-colors relative group">
<Link href={href} className="text-xs font-black text-slate-400 hover:text-white tracking-widest uppercase transition-colors relative group focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none focus-visible:rounded">
{label}
<span className="absolute -bottom-2 left-0 w-0 h-[2px] bg-indigo-500 group-hover:w-full transition-all duration-300" />
</Link>
);
}

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}
title={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