From 146a55836ca1a665e53583b0beab46d14dc0b7eb Mon Sep 17 00:00:00 2001
From: duy <kduynguy@gmail.com>
Date: Thu, 29 Jan 2026 15:19:01 -0800
Subject: [PATCH] =?UTF-8?q?fix(boltbot):=20address=20Rams=20design=20revie?=
 =?UTF-8?q?w=20=E2=80=94=2011=20a11y=20and=20visual=20fixes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SessionView: aria-expanded on session toggle, role=table/row/cell
  semantics on sub-table, keyboard access on expanded rows
- ReceiptDetail: backdrop role=button, focus trap sentinel, external
  link changed from <a href="#"> to <button>
- App: view toggle uses role=tablist/tab with aria-selected
- StatsCards: aria-hidden on decorative icons
- FilterControls: increased touch targets to 44px minimum
- ReceiptList: border-l-2 border-transparent on non-selected rows
  to prevent layout shift on selection
---
 extensions/boltbot/dashboard/src/App.tsx      |  6 ++-
 .../src/components/FilterControls.tsx         |  4 +-
 .../src/components/ReceiptDetail.tsx          | 10 +++--
 .../dashboard/src/components/ReceiptList.tsx  |  2 +-
 .../dashboard/src/components/SessionView.tsx  | 38 ++++++++++++-------
 .../dashboard/src/components/StatsCards.tsx   |  2 +-
 6 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/extensions/boltbot/dashboard/src/App.tsx b/extensions/boltbot/dashboard/src/App.tsx
index 5e831cd34..d8e3c805c 100644
--- a/extensions/boltbot/dashboard/src/App.tsx
+++ b/extensions/boltbot/dashboard/src/App.tsx
@@ -88,9 +88,11 @@ export default function App() {
         <div className="max-w-6xl mx-auto space-y-6 pt-6">
           <StatsCards stats={stats} isLoading={statsLoading} error={statsError} />
 
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2" role="tablist">
             <button
               onClick={() => setViewMode("list")}
+              role="tab"
+              aria-selected={viewMode === "list"}
               className={cn(
                 "px-4 py-1.5 text-sm rounded-lg transition-colors",
                 viewMode === "list"
@@ -102,6 +104,8 @@ export default function App() {
             </button>
             <button
               onClick={() => setViewMode("sessions")}
+              role="tab"
+              aria-selected={viewMode === "sessions"}
               className={cn(
                 "px-4 py-1.5 text-sm rounded-lg transition-colors",
                 viewMode === "sessions"
diff --git a/extensions/boltbot/dashboard/src/components/FilterControls.tsx b/extensions/boltbot/dashboard/src/components/FilterControls.tsx
index 6416a162d..6746e44f0 100644
--- a/extensions/boltbot/dashboard/src/components/FilterControls.tsx
+++ b/extensions/boltbot/dashboard/src/components/FilterControls.tsx
@@ -54,7 +54,7 @@ export default function FilterControls({
               onClick={() => toggleTier(t.value)}
               aria-pressed={isActive}
               className={cn(
-                "px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors",
+                "px-3 py-2.5 rounded-lg text-xs font-medium border transition-colors",
                 isActive ? style.active : style.inactive,
               )}
             >
@@ -67,7 +67,7 @@ export default function FilterControls({
         onClick={() => onAnomalyOnlyChange(!anomalyOnly)}
         aria-pressed={anomalyOnly}
         className={cn(
-          "px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors",
+          "px-3 py-2.5 rounded-lg text-xs font-medium border transition-colors",
           anomalyOnly
             ? "bg-red-500/20 text-red-400 border-red-500"
             : "border-neutral-700 text-neutral-400 hover:border-red-500/50",
diff --git a/extensions/boltbot/dashboard/src/components/ReceiptDetail.tsx b/extensions/boltbot/dashboard/src/components/ReceiptDetail.tsx
index dfda468d7..6e9f457bd 100644
--- a/extensions/boltbot/dashboard/src/components/ReceiptDetail.tsx
+++ b/extensions/boltbot/dashboard/src/components/ReceiptDetail.tsx
@@ -116,6 +116,9 @@ export default function ReceiptDetail({ receipt, onClose }: Props) {
       <div
         className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
         onClick={onClose}
+        role="button"
+        aria-label="Close"
+        tabIndex={-1}
       />
       <div
         role="dialog"
@@ -200,13 +203,13 @@ export default function ReceiptDetail({ receipt, onClose }: Props) {
                 <span className="font-mono text-xs break-all text-neutral-300 flex-1">
                   {receipt.daCommitment}
                 </span>
-                <a
-                  href="#"
+                <button
+                  type="button"
                   aria-label="View on EigenDA explorer"
                   className="shrink-0 p-1 rounded hover:bg-neutral-700 transition-colors"
                 >
                   <ExternalLink className="w-3.5 h-3.5 text-neutral-400" aria-hidden="true" />
-                </a>
+                </button>
               </div>
             ) : (
               <div className="text-neutral-400 text-sm">
@@ -221,6 +224,7 @@ export default function ReceiptDetail({ receipt, onClose }: Props) {
             </div>
           </Accordion>
         </div>
+        <div tabIndex={0} onFocus={() => closeButtonRef.current?.focus()} aria-hidden="true" />
       </div>
     </>
   );
diff --git a/extensions/boltbot/dashboard/src/components/ReceiptList.tsx b/extensions/boltbot/dashboard/src/components/ReceiptList.tsx
index 29d5e9322..da0241b73 100644
--- a/extensions/boltbot/dashboard/src/components/ReceiptList.tsx
+++ b/extensions/boltbot/dashboard/src/components/ReceiptList.tsx
@@ -82,7 +82,7 @@ export default function ReceiptList({
               "grid grid-cols-[1fr_80px_90px_40px_40px] gap-2 items-center px-3 py-2 rounded-lg cursor-pointer transition-colors",
               selectedId === r.id
                 ? "bg-neutral-800/50 border-l-2 border-emerald-400"
-                : "hover:bg-neutral-800/30",
+                : "hover:bg-neutral-800/30 border-l-2 border-transparent",
             )}
           >
             <span role="cell" className="text-sm font-mono truncate">{r.toolName}</span>
diff --git a/extensions/boltbot/dashboard/src/components/SessionView.tsx b/extensions/boltbot/dashboard/src/components/SessionView.tsx
index f0288efd9..78b528bf2 100644
--- a/extensions/boltbot/dashboard/src/components/SessionView.tsx
+++ b/extensions/boltbot/dashboard/src/components/SessionView.tsx
@@ -67,6 +67,7 @@ function SessionCard({
     <div className="bg-neutral-900 rounded-xl border border-neutral-800">
       <button
         onClick={() => setExpanded(!expanded)}
+        aria-expanded={expanded}
         className="w-full flex items-center gap-3 p-4 text-left hover:bg-neutral-800/30 transition-colors rounded-xl"
       >
         <ChevronDown
@@ -74,6 +75,7 @@ function SessionCard({
             "w-4 h-4 text-neutral-400 shrink-0 transition-transform",
             expanded && "rotate-180",
           )}
+          aria-hidden="true"
         />
         <span className="font-mono text-xs truncate flex-1 text-neutral-300">
           {group.sessionKey}
@@ -100,36 +102,45 @@ function SessionCard({
       </button>
       {expanded && (
         <div className="border-t border-neutral-800 p-3">
-          <div className="grid grid-cols-[1fr_80px_90px_40px_40px] gap-2 px-3 pb-2 text-neutral-400 text-xs uppercase tracking-wide">
-            <span>Tool</span>
-            <span>Tier</span>
-            <span>Time</span>
-            <span>Status</span>
-            <span>Anomaly</span>
-          </div>
-          {group.receipts.map((r) => (
+          <div role="table">
+            <div role="row" className="grid grid-cols-[1fr_80px_90px_40px_40px] gap-2 px-3 pb-2 text-neutral-400 text-xs uppercase tracking-wide">
+              <span role="columnheader">Tool</span>
+              <span role="columnheader">Tier</span>
+              <span role="columnheader">Time</span>
+              <span role="columnheader">Status</span>
+              <span role="columnheader">Anomaly</span>
+            </div>
+            {group.receipts.map((r) => (
             <div
               key={r.id}
+              role="row"
+              tabIndex={0}
               onClick={() => onSelectReceipt(r)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onSelectReceipt(r);
+                }
+              }}
               className="grid grid-cols-[1fr_80px_90px_40px_40px] gap-2 items-center px-3 py-2 rounded-lg cursor-pointer hover:bg-neutral-800/30 transition-colors"
             >
-              <span className="text-sm font-mono truncate">{r.toolName}</span>
-              <span>
+              <span role="cell" className="text-sm font-mono truncate">{r.toolName}</span>
+              <span role="cell">
                 <span className={cn("rounded-full px-2 py-0.5 text-xs", tierBadge[r.tier])}>
                   {r.tier}
                 </span>
               </span>
-              <span className="text-xs text-neutral-400">
+              <span role="cell" className="text-xs text-neutral-400">
                 {formatRelativeTime(r.timestamp)}
               </span>
-              <span>
+              <span role="cell">
                 {r.success ? (
                   <CheckCircle className="w-4 h-4 text-emerald-400" aria-label="Success" />
                 ) : (
                   <XCircle className="w-4 h-4 text-red-400" aria-label="Failed" />
                 )}
               </span>
-              <span>
+              <span role="cell">
                 {r.anomalies.length > 0 ? (
                   <AlertTriangle className="w-4 h-4 text-amber-400" aria-label="Has anomalies" />
                 ) : (
@@ -138,6 +149,7 @@ function SessionCard({
               </span>
             </div>
           ))}
+          </div>
         </div>
       )}
     </div>
diff --git a/extensions/boltbot/dashboard/src/components/StatsCards.tsx b/extensions/boltbot/dashboard/src/components/StatsCards.tsx
index 8a8087dd4..53348bbc6 100644
--- a/extensions/boltbot/dashboard/src/components/StatsCards.tsx
+++ b/extensions/boltbot/dashboard/src/components/StatsCards.tsx
@@ -37,7 +37,7 @@ export default function StatsCards({ stats, isLoading, error }: Props) {
           className="bg-neutral-900 rounded-xl border border-neutral-800 p-4"
         >
           <div className="flex items-center gap-2 mb-2">
-            <card.icon className={`w-4 h-4 ${card.color}`} />
+            <card.icon className={`w-4 h-4 ${card.color}`} aria-hidden="true" />
             <span className="text-xs text-neutral-400 uppercase tracking-wide">
               {card.label}
             </span>