From 8c74b4867f844cf0662d4cfc4c8767aca71f1aa1 Mon Sep 17 00:00:00 2001
From: billlzzz10 <208072329+billlzzz10@users.noreply.github.com>
Date: Sat, 11 Jul 2026 16:58:46 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20sidebar=20k?=
 =?UTF-8?q?eyboard=20accessibility=20and=20screen=20reader=20experience?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 src/components/layout/sidebar.tsx | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index a9445908..90ba5ad8 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -46,7 +46,7 @@ export function Sidebar() {
       {/* Logo / Brand */}
       <div className="mb-8">
         <div className="flex h-8 w-8 items-center justify-center rounded-sm border border-white/20 bg-white/10">
-          <Terminal size={16} className="text-agent-cyan" />
+          <Terminal size={16} className="text-agent-cyan" aria-hidden="true" />
         </div>
       </div>
 
@@ -60,15 +60,18 @@ export function Sidebar() {
               href={item.href}
               aria-label={item.label}
               className={cn(
-                "group relative flex items-center justify-center rounded-md p-3 transition-all duration-300",
+                "group relative flex items-center justify-center rounded-md p-3 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
                 isActive
                   ? "bg-white/10 text-white shadow-[0_0_15px_rgba(255,255,255,0.1)]"
                   : "text-white/40 hover:bg-white/5 hover:text-white"
               )}
             >
-              <item.icon size={20} />
+              <item.icon size={20} aria-hidden="true" />
               {/* Tooltip on Hover */}
-              <span className="pointer-events-none absolute left-14 z-50 rounded border border-white/10 bg-black/80 px-2 py-1 text-xs whitespace-nowrap opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100">
+              <span
+                aria-hidden="true"
+                className="pointer-events-none absolute left-14 z-50 rounded border border-white/10 bg-black/80 px-2 py-1 text-xs whitespace-nowrap opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100"
+              >
                 {item.label}
               </span>
             </Link>
@@ -80,11 +83,14 @@ export function Sidebar() {
       <div className="mt-auto flex w-full flex-col items-center gap-3 px-4">
         <button
           onClick={toggleLanguage}
-          className="group relative mb-2 rounded-md p-3 text-white/40 transition-all hover:bg-white/5 hover:text-white"
+          className="group relative mb-2 rounded-md p-3 text-white/40 transition-all hover:bg-white/5 hover:text-white focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none"
           aria-label="Toggle Language"
         >
-          <Globe size={20} />
-          <span className="pointer-events-none absolute left-14 z-50 rounded border border-white/10 bg-black/80 px-2 py-1 font-mono text-[10px] whitespace-nowrap uppercase opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100">
+          <Globe size={20} aria-hidden="true" />
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute left-14 z-50 rounded border border-white/10 bg-black/80 px-2 py-1 font-mono text-[10px] whitespace-nowrap uppercase opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100"
+          >
             Toggle EN/TH
           </span>
         </button>
@@ -94,7 +100,9 @@ export function Sidebar() {
         {activeAgents.map((agent) => (
           <div
             key={agent.name}
-            className="group relative flex w-full justify-center"
+            className="group relative flex w-full justify-center rounded-sm focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none"
+            tabIndex={0}
+            aria-label={`${agent.name} status: ${agent.status}`}
             data-testid="agent-status-indicator"
           >
             <div
@@ -106,7 +114,10 @@ export function Sidebar() {
                   : "opacity-30"
               )}
             />
-            <span className="pointer-events-none absolute top-1/2 left-10 z-50 -translate-y-1/2 rounded border border-white/10 bg-black/80 px-2 py-1 font-mono text-[10px] whitespace-nowrap opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100">
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute top-1/2 left-10 z-50 -translate-y-1/2 rounded border border-white/10 bg-black/80 px-2 py-1 font-mono text-[10px] whitespace-nowrap opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100"
+            >
               {agent.name}: {agent.status.toUpperCase()}
             </span>
           </div>