From 9b8739b5d84d6498b7a8b54fe34ca366226ecd0a Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 2 Apr 2026 18:41:11 +0200
Subject: [PATCH] fix(a11y): add keyboard listeners to clickable elements
 (S1082)

Add onKeyDown (Enter/Space) to the CommandPalette overlay backdrop div and
result item divs to satisfy SonarQube S1082. RouteFlow and ProcessorTimeline
already had the fixes in place.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../composites/CommandPalette/CommandPalette.tsx | 16 +++++++++++++++-
 .../composites/TreeView/TreeView.tsx             |  4 ++++
 src/design-system/layout/Sidebar/SidebarTree.tsx |  4 ++++
 .../primitives/InlineEdit/InlineEdit.tsx         |  8 ++++++++
 4 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/design-system/composites/CommandPalette/CommandPalette.tsx b/src/design-system/composites/CommandPalette/CommandPalette.tsx
index 3baa9be..5cdb0d1 100644
--- a/src/design-system/composites/CommandPalette/CommandPalette.tsx
+++ b/src/design-system/composites/CommandPalette/CommandPalette.tsx
@@ -194,7 +194,15 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
   if (!open) return null
 
   return createPortal(
-    <div className={styles.overlay} onClick={onClose} data-testid="command-palette-overlay">
+    <div
+      className={styles.overlay}
+      onClick={onClose}
+      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onClose() }}
+      role="button"
+      tabIndex={0}
+      aria-label="Close command palette"
+      data-testid="command-palette-overlay"
+    >
       <div
         className={styles.panel}
         onClick={(e) => e.stopPropagation()}
@@ -298,6 +306,12 @@ export function CommandPalette({ open, onClose, onSelect, data, onOpen, onQueryC
                         onSelect(result)
                         onClose()
                       }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          onSelect(result)
+                          onClose()
+                        }
+                      }}
                       onMouseEnter={() => { userNavigated.current = true; setFocusedIdx(flatIdx) }}
                     >
                       <div className={styles.itemMain}>
diff --git a/src/design-system/composites/TreeView/TreeView.tsx b/src/design-system/composites/TreeView/TreeView.tsx
index 056dc46..5e86331 100644
--- a/src/design-system/composites/TreeView/TreeView.tsx
+++ b/src/design-system/composites/TreeView/TreeView.tsx
@@ -230,6 +230,10 @@ function TreeNodeRow({
 
   return (
     <li role="none">
+      {/* S1082: No onKeyDown here by design — the parent <ul role="tree"> carries
+          onKeyDown={handleKeyDown} which handles Enter (select) and all arrow keys
+          per the WAI-ARIA tree widget pattern. Adding a duplicate handler here would
+          fire the action twice. */}
       <div
         role="treeitem"
         aria-expanded={hasChildren ? isExpanded : undefined}
diff --git a/src/design-system/layout/Sidebar/SidebarTree.tsx b/src/design-system/layout/Sidebar/SidebarTree.tsx
index 4fa9770..f284acb 100644
--- a/src/design-system/layout/Sidebar/SidebarTree.tsx
+++ b/src/design-system/layout/Sidebar/SidebarTree.tsx
@@ -366,6 +366,10 @@ function SidebarTreeRow({
 
   return (
     <li role="none">
+      {/* S1082: No onKeyDown here by design — the parent <ul role="tree"> carries
+          onKeyDown={handleKeyDown} which handles Enter (navigate) and all arrow keys
+          per the WAI-ARIA tree widget pattern. Adding a duplicate handler here would
+          fire the action twice. */}
       <div
         role="treeitem"
         aria-expanded={hasChildren ? isExpanded : undefined}
diff --git a/src/design-system/primitives/InlineEdit/InlineEdit.tsx b/src/design-system/primitives/InlineEdit/InlineEdit.tsx
index 8dc197b..34b888b 100644
--- a/src/design-system/primitives/InlineEdit/InlineEdit.tsx
+++ b/src/design-system/primitives/InlineEdit/InlineEdit.tsx
@@ -59,7 +59,15 @@ export function InlineEdit({ value, onSave, placeholder, disabled, className }:
     <span className={`${styles.display} ${disabled ? styles.disabled : ''} ${className ?? ''}`}>
       <span
         className={isEmpty ? styles.placeholder : styles.value}
+        role="button"
+        tabIndex={disabled ? undefined : 0}
         onClick={startEdit}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            startEdit()
+          }
+        }}
       >
         {isEmpty ? placeholder : value}
       </span>