From de6deb0f866f4f4125ff2dd357d0f6b87b39fa17 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sat, 9 May 2026 22:03:42 +0100
Subject: [PATCH] Make alert metric edit cells keyboard-accessible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each metric value cell on /alerts/thresholds is a clickable surface that
opens an inline editor for the threshold value. The wrapper was a plain
<div> with cursor-pointer and onClick — focusable for mouse but not for
keyboard, and screen readers didn't announce it as a button.

Add role="button", tabIndex={0}, onKeyDown for Enter/Space activation,
and an aria-label that mirrors the existing title hint. The mouse path
is unchanged; keyboard users can now Tab into the cells and press Enter
to open the editor.
---
 .../src/components/Alerts/AlertResourceTableRow.tsx   | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend-modern/src/components/Alerts/AlertResourceTableRow.tsx b/frontend-modern/src/components/Alerts/AlertResourceTableRow.tsx
index 970dbb722..1795f61a3 100644
--- a/frontend-modern/src/components/Alerts/AlertResourceTableRow.tsx
+++ b/frontend-modern/src/components/Alerts/AlertResourceTableRow.tsx
@@ -352,7 +352,7 @@ export function AlertResourceTableRow(props: AlertResourceTableRowProps) {
             );
           }
 
-          const openMetricEditor = (e: MouseEvent) => {
+          const openMetricEditor = (e?: MouseEvent) => {
             startEditing(metric, e);
           };
 
@@ -366,9 +366,18 @@ export function AlertResourceTableRow(props: AlertResourceTableRowProps) {
                   when={isEditing()}
                   fallback={
                     <div
+                      role="button"
+                      tabIndex={0}
                       onClick={openMetricEditor}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                          event.preventDefault();
+                          openMetricEditor();
+                        }
+                      }}
                       class="cursor-pointer hover:bg-surface-hover rounded px-1 py-0.5 transition-colors"
                       title={getAlertResourceTableEditMetricTitle()}
+                      aria-label={getAlertResourceTableEditMetricTitle()}
                     >
                       <MetricValueWithHeat
                         resourceId={props.resource.id}