a11y(agent-bridge,inspector-ui): add aria-label to action buttons and REC controls (B2)

- 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
This commit is contained in:
diegosouzapw
2026-05-28 17:30:11 -03:00
parent 471a5bed00
commit 1d925fb72b
3 changed files with 13 additions and 2 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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")}