mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-08-02 21:32:10 +03:00
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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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")}
|
||||
|
||||
Reference in New Issue
Block a user