From e7512aee14bb2dbd67c84a2f94965ba8bdc23730 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sat, 9 May 2026 21:47:36 +0100
Subject: [PATCH] Make Patrol finding rows keyboard-accessible

Each Patrol finding row was a plain <div> with cursor-pointer and an
onClick handler that toggled the row's expanded state. Mouse users got
the toggle, but the row had no role, no tabIndex, and no key handler,
so keyboard users couldn't focus or activate it and screen readers
didn't announce it as a button.

Add role="button", tabIndex={0}, aria-expanded, and aria-controls (with
a matching id on the expanded details container) plus a keydown handler
that toggles on Enter or Space. The mouse path is unchanged.
---
 .../src/components/AI/FindingsPanel.tsx       | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/frontend-modern/src/components/AI/FindingsPanel.tsx b/frontend-modern/src/components/AI/FindingsPanel.tsx
index 2c42644c8..f74d0acbc 100644
--- a/frontend-modern/src/components/AI/FindingsPanel.tsx
+++ b/frontend-modern/src/components/AI/FindingsPanel.tsx
@@ -644,9 +644,22 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
       resource: getResource(finding.resourceId),
     });
 
+    const toggleExpanded = () => {
+      if (expandedId() === finding.id) {
+        setExpandedId(null);
+      } else {
+        setExpandedId(finding.id);
+      }
+      props.onFindingClick?.(finding);
+    };
+
     return (
       <div
         id={`finding-${finding.id}`}
+        role="button"
+        tabIndex={0}
+        aria-expanded={expandedId() === finding.id}
+        aria-controls={`finding-${finding.id}-details`}
         class={`p-3 cursor-pointer transition-colors ${
           finding.status === 'active'
             ? finding.acknowledgedAt
@@ -654,13 +667,12 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
               : 'hover:bg-surface-hover'
             : 'opacity-60 bg-surface-alt hover:opacity-80'
         }`}
-        onClick={() => {
-          if (expandedId() === finding.id) {
-            setExpandedId(null);
-          } else {
-            setExpandedId(finding.id);
+        onClick={toggleExpanded}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            toggleExpanded();
           }
-          props.onFindingClick?.(finding);
         }}
       >
         {/* Finding header */}
@@ -954,7 +966,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
     const manualControls = getFindingManualControlsPresentation(finding);
 
     return (
-      <div class="mt-3 pt-3 border-t border-border-subtle">
+      <div id={`finding-${finding.id}-details`} class="mt-3 pt-3 border-t border-border-subtle">
         <Show when={primaryAction}>
           {(action) => (
             <div class="mb-3">