From 2e9584d2c7f9a1371527a60e52e9d44d87d252f7 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Sun, 15 Mar 2026 21:10:08 -0500
Subject: [PATCH] fix(a11y): add keyboard nav to fleet table rows, fix ARIA,
 add scope

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/fleet/FleetTable.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/fleet/FleetTable.tsx b/frontend/src/components/fleet/FleetTable.tsx
index bcb70f9..80858a7 100644
--- a/frontend/src/components/fleet/FleetTable.tsx
+++ b/frontend/src/components/fleet/FleetTable.tsx
@@ -246,7 +246,7 @@ export function FleetTable({
   const tableHead = (
     <thead>
       <tr className="border-b border-border bg-surface">
-        <th scope="col" className="px-2 py-2 text-xs font-medium text-text-muted w-6"></th>
+        <th scope="col" className="px-2 py-2 text-xs font-medium text-text-muted w-6"><span className="sr-only">Status</span></th>
         <SortHeader column="hostname" label="Hostname" {...sortProps} className="text-left" />
         <SortHeader column="ip_address" label="IP" {...sortProps} className="text-left" />
         <SortHeader column="model" label="Model" {...sortProps} className="text-left" />
@@ -328,7 +328,8 @@ export function FleetTable({
                               selectedIndex === virtualRow.index && 'bg-elevated/50',
                             )}
                             onClick={() => handleDeviceClick(device)}
-                            aria-selected={selectedIndex === virtualRow.index}
+                            tabIndex={0}
+                            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleDeviceClick(device) } }}
                             style={{
                               position: 'absolute',
                               top: 0,
@@ -388,7 +389,8 @@ export function FleetTable({
                         selectedIndex === idx && 'bg-elevated/50',
                       )}
                       onClick={() => handleDeviceClick(device)}
-                      aria-selected={selectedIndex === idx}
+                      tabIndex={0}
+                      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleDeviceClick(device) } }}
                     >
                       {renderDeviceRow(device)}
                     </tr>