From 1d925fb72b8276f000435b1dfd907c0c6982cb89 Mon Sep 17 00:00:00 2001
From: diegosouzapw <diegosouza.pw@gmail.com>
Date: Thu, 28 May 2026 17:30:11 -0300
Subject: [PATCH] a11y(agent-bridge,inspector-ui): add aria-label to action
 buttons and REC controls (B2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AgentBridgeServerCard: aria-label on Start, Stop, Restart, Trust Cert, Download Cert, Regenerate Cert buttons/anchor — sourced from t() keys
- CertStatusIcon: switch title from hardcoded strings to useTranslations("agentBridge").certTrusted/certNotTrusted
- SessionRecorderBar: aria-label={t("recordSession")} and aria-label={t("stopSession")} on REC and Stop buttons
---
 .../agent-bridge/components/AgentBridgeServerCard.tsx      | 6 ++++++
 .../agent-bridge/components/shared/CertStatusIcon.tsx      | 7 +++++--
 .../components/session/SessionRecorderBar.tsx              | 2 ++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/tools/agent-bridge/components/AgentBridgeServerCard.tsx b/src/app/(dashboard)/dashboard/tools/agent-bridge/components/AgentBridgeServerCard.tsx
index be1c75a7c3..b952966eac 100644
--- a/src/app/(dashboard)/dashboard/tools/agent-bridge/components/AgentBridgeServerCard.tsx
+++ b/src/app/(dashboard)/dashboard/tools/agent-bridge/components/AgentBridgeServerCard.tsx
@@ -109,6 +109,7 @@ export function AgentBridgeServerCard({
           type="button"
           onClick={() => runAction("start")}
           disabled={isRunning || loading !== null}
+          aria-label={t("startServer")}
           className="inline-flex items-center gap-1.5 rounded-lg bg-emerald-500/10 text-emerald-600 px-3 py-1.5 text-xs font-medium hover:bg-emerald-500/20 transition-colors disabled:opacity-50"
         >
           <span className="material-symbols-outlined text-[14px]">play_arrow</span>
@@ -119,6 +120,7 @@ export function AgentBridgeServerCard({
           type="button"
           onClick={() => runAction("stop")}
           disabled={!isRunning || loading !== null}
+          aria-label={t("stopServer")}
           className="inline-flex items-center gap-1.5 rounded-lg bg-red-500/10 text-red-600 px-3 py-1.5 text-xs font-medium hover:bg-red-500/20 transition-colors disabled:opacity-50"
         >
           <span className="material-symbols-outlined text-[14px]">stop</span>
@@ -129,6 +131,7 @@ export function AgentBridgeServerCard({
           type="button"
           onClick={() => runAction("restart")}
           disabled={loading !== null}
+          aria-label={t("restartServer")}
           className="inline-flex items-center gap-1.5 rounded-lg bg-amber-500/10 text-amber-600 px-3 py-1.5 text-xs font-medium hover:bg-amber-500/20 transition-colors disabled:opacity-50"
         >
           <span className="material-symbols-outlined text-[14px]">refresh</span>
@@ -139,6 +142,7 @@ export function AgentBridgeServerCard({
           type="button"
           onClick={() => runAction("trust-cert")}
           disabled={loading !== null}
+          aria-label={t("trustCert")}
           className="inline-flex items-center gap-1.5 rounded-lg bg-blue-500/10 text-blue-600 px-3 py-1.5 text-xs font-medium hover:bg-blue-500/20 transition-colors disabled:opacity-50"
         >
           <span className="material-symbols-outlined text-[14px]">security</span>
@@ -148,6 +152,7 @@ export function AgentBridgeServerCard({
         <a
           href="/api/tools/agent-bridge/cert/download"
           download
+          aria-label={t("downloadCert")}
           className="inline-flex items-center gap-1.5 rounded-lg bg-violet-500/10 text-violet-600 px-3 py-1.5 text-xs font-medium hover:bg-violet-500/20 transition-colors"
         >
           <span className="material-symbols-outlined text-[14px]">download</span>
@@ -158,6 +163,7 @@ export function AgentBridgeServerCard({
           type="button"
           onClick={() => runAction("regenerate-cert")}
           disabled={loading !== null}
+          aria-label={t("regenerateCert")}
           className="inline-flex items-center gap-1.5 rounded-lg bg-zinc-500/10 text-text-muted px-3 py-1.5 text-xs font-medium hover:bg-zinc-500/20 transition-colors disabled:opacity-50"
         >
           <span className="material-symbols-outlined text-[14px]">autorenew</span>
diff --git a/src/app/(dashboard)/dashboard/tools/agent-bridge/components/shared/CertStatusIcon.tsx b/src/app/(dashboard)/dashboard/tools/agent-bridge/components/shared/CertStatusIcon.tsx
index ac93885df3..129d04992f 100644
--- a/src/app/(dashboard)/dashboard/tools/agent-bridge/components/shared/CertStatusIcon.tsx
+++ b/src/app/(dashboard)/dashboard/tools/agent-bridge/components/shared/CertStatusIcon.tsx
@@ -1,16 +1,19 @@
 "use client";
 
+import { useTranslations } from "next-intl";
+
 interface CertStatusIconProps {
   trusted: boolean;
   size?: number;
 }
 
 export function CertStatusIcon({ trusted, size = 16 }: CertStatusIconProps) {
+  const t = useTranslations("agentBridge");
   return trusted ? (
     <span
       className="material-symbols-outlined text-emerald-500"
       style={{ fontSize: size }}
-      title="Certificate trusted"
+      title={t("certTrusted")}
     >
       verified_user
     </span>
@@ -18,7 +21,7 @@ export function CertStatusIcon({ trusted, size = 16 }: CertStatusIconProps) {
     <span
       className="material-symbols-outlined text-zinc-400"
       style={{ fontSize: size }}
-      title="Certificate not trusted"
+      title={t("certNotTrusted")}
     >
       lock_open
     </span>
diff --git a/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/session/SessionRecorderBar.tsx b/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/session/SessionRecorderBar.tsx
index 4bcc5cc617..e2021cc68b 100644
--- a/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/session/SessionRecorderBar.tsx
+++ b/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/session/SessionRecorderBar.tsx
@@ -47,6 +47,7 @@ export function SessionRecorderBar({
           <button
             type="button"
             onClick={onStop}
+            aria-label={t("stopSession")}
             className="ml-auto rounded border border-red-500/50 px-2 py-0.5 text-xs hover:bg-red-800/30 focus-ring"
           >
             {t("stopSession")}
@@ -59,6 +60,7 @@ export function SessionRecorderBar({
           <button
             type="button"
             onClick={() => onStart()}
+            aria-label={t("recordSession")}
             className="ml-auto rounded border border-border px-2 py-0.5 text-xs hover:bg-surface focus-ring"
           >
             {t("recordSession")}