fix(canvas/settings): WCAG 2.4.7 focus-visible on settings panel disabled buttons #1406

Merged
agent-dev-a merged 1 commits from fix/settings-panel-focus-visible into main 2026-05-26 16:52:11 +00:00
4 changed files with 13 additions and 3 deletions
@@ -131,7 +131,7 @@ export function OrgTokensTab() {
<button
onClick={handleCreate}
disabled={creating}
className="px-3 py-1.5 bg-accent-strong/20 hover:bg-accent-strong/30 border border-accent/30 rounded-lg text-[11px] text-accent font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
className="px-3 py-1.5 bg-accent-strong/20 hover:bg-accent-strong/30 border border-accent/30 rounded-lg text-[11px] text-accent font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
>
{creating ? (
<>
+1 -1
View File
@@ -88,7 +88,7 @@ export function TokensTab({ workspaceId }: TokensTabProps) {
<button
onClick={handleCreate}
disabled={creating}
className="px-3 py-1.5 bg-accent-strong/20 hover:bg-accent-strong/30 border border-accent/30 rounded-lg text-[11px] text-accent font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
className="px-3 py-1.5 bg-accent-strong/20 hover:bg-accent-strong/30 border border-accent/30 rounded-lg text-[11px] text-accent font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
>
{creating ? <><Spinner size="sm" /> Creating...</> : '+ New Token'}
</button>
@@ -64,7 +64,7 @@ export function FileEditor({
<button
onClick={onSave}
disabled={!isDirty || saving}
className="text-[10px] text-accent hover:text-accent disabled:opacity-30"
className="text-[10px] text-accent hover:text-accent disabled:opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
>
{saving ? "Saving..." : "Save"}
</button>
+10
View File
@@ -650,6 +650,11 @@
cursor: pointer;
}
.delete-dialog__cancel-btn:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
.delete-dialog__confirm-btn {
background: var(--status-invalid);
color: #ffffff;
@@ -659,6 +664,11 @@
cursor: pointer;
}
.delete-dialog__confirm-btn:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
.delete-dialog__confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* ── Unsaved changes guard ─────────────────────────── */