Skip to content

fix(canvas): dark theme a11y — settings buttons, input fields, ReactFlow colorMode, zinc-400 contrast, aria-labels #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HongmingWang-Rabbit merged 1 commit into from
Apr 15, 2026
Merged

fix(canvas): dark theme a11y — settings buttons, input fields, ReactFlow colorMode, zinc-400 contrast, aria-labels #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions canvas/src/components/CommunicationOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,19 +145,19 @@ export function CommunicationOverlay() {
<span className="text-zinc-300 font-medium truncate">
{c.sourceName}
</span>
<span className="text-zinc-600">→</span>
<span className="text-zinc-400">→</span>
<span className="text-zinc-300 truncate">{c.targetName}</span>
</div>
<div className="flex items-center gap-1 shrink-0">
<span className={statusColor}>{statusIcon}</span>
<span className="text-zinc-600">{age}</span>
<span className="text-zinc-400">{age}</span>
</div>
</div>
{c.summary && (
<div className="text-zinc-500 truncate mt-0.5 pl-4">{c.summary}</div>
)}
{c.durationMs && (
<div className="text-zinc-600 pl-4">{c.durationMs}ms</div>
<div className="text-zinc-400 pl-4">{c.durationMs}ms</div>
)}
</div>
);
Expand Down
12 changes: 6 additions & 6 deletions canvas/src/components/ConversationTraceModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
{/* Content */}
<div className="flex-1 pb-3 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<span className="text-[9px] text-zinc-600 font-mono">
<span className="text-[9px] text-zinc-400 font-mono">
{time}
</span>
<span
Expand All @@ -183,7 +183,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
: entry.activity_type.toUpperCase()}
</span>
{entry.duration_ms != null && entry.duration_ms > 0 && (
<span className="text-[9px] text-zinc-600">
<span className="text-[9px] text-zinc-400">
{entry.duration_ms > 1000
? `${Math.round(entry.duration_ms / 1000)}s`
: `${entry.duration_ms}ms`}
Expand All @@ -199,7 +199,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
<span className="text-cyan-400 font-medium">
{sourceName || wsName}
</span>
<span className="text-zinc-600"> → </span>
<span className="text-zinc-400"> → </span>
<span className="text-blue-400 font-medium">
{targetName}
</span>
Expand All @@ -211,7 +211,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
</span>
{sourceName && (
<>
<span className="text-zinc-600">
<span className="text-zinc-400">
{" "}← {" "}
</span>
<span className="text-cyan-400 font-medium">
Expand Down Expand Up @@ -248,7 +248,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
<div className="text-[10px] text-zinc-300 whitespace-pre-wrap break-words leading-relaxed">
{requestText.slice(0, 2000)}
{requestText.length > 2000 && (
<span className="text-zinc-600"> ...({requestText.length} chars)</span>
<span className="text-zinc-400"> ...({requestText.length} chars)</span>
)}
</div>
</div>
Expand All @@ -259,7 +259,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
<div className="text-[10px] text-zinc-300 whitespace-pre-wrap break-words leading-relaxed">
{responseText.slice(0, 2000)}
{responseText.length > 2000 && (
<span className="text-zinc-600"> ...({responseText.length} chars)</span>
<span className="text-zinc-400"> ...({responseText.length} chars)</span>
)}
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions canvas/src/components/SearchDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,9 +112,9 @@ export function SearchDialog() {
onChange={(e) => setQuery(e.target.value)}
onKeyDown={handleInputKeyDown}
placeholder="Search workspaces..."
className="flex-1 bg-transparent text-sm text-zinc-100 placeholder-zinc-600 focus:outline-none"
className="flex-1 bg-transparent text-sm text-zinc-100 placeholder-zinc-400 focus:outline-none"
/>
<kbd className="text-[9px] text-zinc-600 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">ESC</kbd>
<kbd className="text-[9px] text-zinc-400 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">ESC</kbd>
</div>

{/* Results */}
Expand All @@ -125,7 +125,7 @@ export function SearchDialog() {
className="max-h-[300px] overflow-y-auto py-1"
>
{filtered.length === 0 ? (
<div role="status" aria-live="polite" className="px-4 py-6 text-center text-xs text-zinc-600">
<div role="status" aria-live="polite" className="px-4 py-6 text-center text-xs text-zinc-400">
{query ? "No workspaces match" : "No workspaces yet"}
</div>
) : (
Expand Down Expand Up @@ -156,7 +156,7 @@ export function SearchDialog() {
)}
</div>
<span
className="text-[9px] font-mono text-zinc-600"
className="text-[9px] font-mono text-zinc-400"
aria-label={`Tier ${node.data.tier}`}
>
T{node.data.tier}
Expand All @@ -168,10 +168,10 @@ export function SearchDialog() {

{/* Footer */}
<div className="px-4 py-2 border-t border-zinc-800/40 flex items-center justify-between">
<span className="text-[9px] text-zinc-600">{filtered.length} workspace{filtered.length !== 1 ? "s" : ""}</span>
<span className="text-[9px] text-zinc-400">{filtered.length} workspace{filtered.length !== 1 ? "s" : ""}</span>
<div className="flex gap-2">
<kbd className="text-[9px] text-zinc-600 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">↑↓ navigate</kbd>
<kbd className="text-[9px] text-zinc-600 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">↵ select</kbd>
<kbd className="text-[9px] text-zinc-400 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">↑↓ navigate</kbd>
<kbd className="text-[9px] text-zinc-400 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">↵ select</kbd>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion canvas/src/components/TemplatePalette.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@ export function TemplatePalette() {
: "bg-zinc-900/90 border border-zinc-700/50 text-zinc-400 hover:text-zinc-200 hover:border-zinc-600"
}`}
title="Template Palette"
aria-label="Template Palette"
aria-label={open ? "Close template palette" : "Open template palette"}
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<rect x="1" y="1" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
Expand Down
6 changes: 3 additions & 3 deletions canvas/src/styles/settings-panel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@
font-size: 14px;
font-family: inherit;
background: #18181b;
color: #f4f4f5;
color: #d4d4d8;
}

.add-key-form__select:focus,
Expand Down Expand Up @@ -399,7 +399,7 @@
font-size: 14px;
font-family: monospace;
background: #18181b;
color: #f4f4f5;
color: #d4d4d8;
}

.key-value-field input:focus {
Expand Down Expand Up @@ -683,7 +683,7 @@
}

.settings-button:hover { background: #27272a; color: #f4f4f5; }
.settings-button--active { color: #3b82f6; background: #1e3a5f; }
.settings-button--active { color: #3b82f6; background: #1e3a8a; }
.settings-button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }

.settings-button__tooltip {
Expand Down
Loading