From 70e883de85fe89f758f2a39044dcdd9346a67c49 Mon Sep 17 00:00:00 2001
From: jbingham17 <jbingham@coderabbit.ai>
Date: Sat, 21 Feb 2026 21:46:28 -0800
Subject: [PATCH] Improve navbar accessibility with ARIA attributes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Navbar.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 0359408..5cc19f3 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -21,14 +21,15 @@ export function Navbar({ appName = 'btop' }: NavbarProps) {
         <span className="navbar-title">{appName}</span>
       </div>
 
-      <ul className="navbar-nav">
+      <ul className="navbar-nav" role="tablist">
         {navItems.map((item) => (
           <li key={item.id}>
             <button
               className={`nav-item ${activeTab === item.id ? 'active' : ''}`}
               onClick={() => setActiveTab(item.id)}
+              aria-current={activeTab === item.id ? 'page' : undefined}
             >
-              <span className="nav-icon">{item.icon}</span>
+              <span className="nav-icon" aria-hidden="true">{item.icon}</span>
               <span className="nav-label">{item.label}</span>
             </button>
           </li>