Skip to content

fix: resolve ARIA issues in SubAgentsDialog and fix invalid var(--text-base) color usage #56

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

Open
allornothingai wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix: resolve ARIA issues in SubAgentsDialog and fix invalid var(--text-base) color usage #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a8b5c19
feat: implement additional accessibility fixes for status bar, comman…
Mar 15, 2026
c0ffb98
fix(a11y): add missing aria-labels to CommandPalette, GoToSymbolDialo…
allornothingai Mar 16, 2026
5d14cc5
fix(a11y): add missing aria-labels to FileFinder, QuickPick, Journal,…
allornothingai Mar 16, 2026
3fea6b2
fix: resolve SubAgentsDialog ARIA issues and fix invalid var(--text-b…
allornothingai Mar 16, 2026
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
18 changes: 9 additions & 9 deletions src/components/AccessibilityHelp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,7 +350,7 @@ export function AccessibilityHelp() {
class="w-full px-3 py-2 rounded-md text-sm"
style={{
background: "var(--surface-base)",
color: "var(--text-base)",
color: "var(--text-primary)",
border: "1px solid var(--border-weak)",
outline: "none",
}}
Expand Down Expand Up @@ -384,7 +384,7 @@ export function AccessibilityHelp() {
class="flex items-center justify-between px-2 py-1.5 rounded"
style={{ background: "var(--surface-base)" }}
>
<span class="text-sm" style={{ color: "var(--text-base)" }}>
<span class="text-sm" style={{ color: "var(--text-primary)" }}>
{shortcut.description}
</span>
<kbd
Expand Down Expand Up @@ -423,7 +423,7 @@ export function AccessibilityHelp() {
<h3
class="text-sm font-semibold px-2 py-1.5 rounded mb-2"
style={{
color: "var(--text-base)",
color: "var(--text-primary)",
background: "var(--surface-base)",
}}
>
Expand Down Expand Up @@ -457,7 +457,7 @@ export function AccessibilityHelp() {
<h3
class="text-sm font-semibold px-2 py-1.5 rounded mb-2 flex items-center gap-2"
style={{
color: "var(--text-base)",
color: "var(--text-primary)",
background: "var(--surface-base)",
}}
>
Expand Down Expand Up @@ -533,7 +533,7 @@ export function AccessibilityHelp() {
<div class="flex items-center gap-3 mb-3">
<Icon name="font" size={16} style={{ color: "var(--accent)" }} />
<div>
<div class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
<div class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
Font Size
</div>
<div class="text-xs" style={{ color: "var(--text-weak)" }}>
Expand Down Expand Up @@ -567,7 +567,7 @@ export function AccessibilityHelp() {
class="text-xs font-mono px-2 py-1 rounded"
style={{
background: "var(--background-base)",
color: "var(--text-base)",
color: "var(--text-primary)",
"min-width": "48px",
"text-align": "center",
}}
Expand All @@ -593,7 +593,7 @@ export function AccessibilityHelp() {
class="w-full px-4 py-2 text-sm rounded-md transition-colors"
style={{
background: "var(--surface-raised)",
color: "var(--text-base)",
color: "var(--text-primary)",
border: "1px solid var(--border-weak)",
}}
onMouseEnter={(e) => {
Expand Down Expand Up @@ -640,7 +640,7 @@ export function AccessibilityHelp() {
<h2
id="accessibility-help-title"
class="text-lg font-semibold"
style={{ color: "var(--text-base)" }}
style={{ color: "var(--text-primary)" }}
>
Accessibility Help
</h2>
Expand Down Expand Up @@ -824,7 +824,7 @@ function SettingToggle(props: SettingToggleProps) {
<div class="flex items-center gap-3">
<span style={{ color: "var(--accent)" }}>{props.icon}</span>
<div>
<div class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
<div class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
{props.title}
</div>
<div class="text-xs" style={{ color: "var(--text-weak)" }}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/ActivityIndicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ function TaskItem(props: TaskItemProps) {
<div class="flex items-center gap-2">
<span
class="text-xs font-medium truncate"
style={{ color: "var(--text-base)" }}
style={{ color: "var(--text-primary)" }}
>
{props.task.title}
</span>
Expand Down
28 changes: 14 additions & 14 deletions src/components/AgentsManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,7 +487,7 @@ Guidelines for generating agents:
style={{ "border-color": "var(--border-weak)" }}
>
<div class="flex items-center gap-2">
<span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
<span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
{mode() === "list" ? "Agents" : mode() === "ai" ? "Generate Agent with AI" : mode() === "create" ? "Create Agent" : "Edit Agent"}
</span>
</div>
Expand All @@ -510,7 +510,7 @@ Guidelines for generating agents:
class="flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded border transition-colors hover:bg-[var(--surface-raised)]"
style={{
"border-color": "var(--border-base)",
color: "var(--text-base)"
color: "var(--text-primary)"
}}
>
<Icon name="bolt" size={16} />
Expand Down Expand Up @@ -557,7 +557,7 @@ Guidelines for generating agents:
<div class="flex items-start justify-between">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<span class="text-sm font-medium" style={{ color: "var(--text-base)" }}>
<span class="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
{agent.name}
</span>
<span
Expand Down Expand Up @@ -602,7 +602,7 @@ Guidelines for generating agents:
<div class="space-y-4">
<div class="text-center mb-6">
<Icon name="bolt" size={32} style={{ color: "var(--text-weak)" }} class="mx-auto mb-2" />
<p class="text-sm" style={{ color: "var(--text-base)" }}>
<p class="text-sm" style={{ color: "var(--text-primary)" }}>
Describe the agent you want to create
</p>
<p class="text-xs mt-1" style={{ color: "var(--text-weaker)" }}>
Expand All @@ -622,7 +622,7 @@ Guidelines for generating agents:
style={{
"border-color": formScope() === "project" ? "var(--text-weak)" : "var(--border-weak)",
background: formScope() === "project" ? "var(--surface-raised)" : "transparent",
color: "var(--text-base)"
color: "var(--text-primary)"
}}
>
<Icon name="folder" size={14} />
Expand All @@ -634,7 +634,7 @@ Guidelines for generating agents:
style={{
"border-color": formScope() === "user" ? "var(--text-weak)" : "var(--border-weak)",
background: formScope() === "user" ? "var(--surface-raised)" : "transparent",
color: "var(--text-base)"
color: "var(--text-primary)"
}}
>
<Icon name="user" size={14} />
Expand All @@ -657,7 +657,7 @@ Guidelines for generating agents:
style={{
background: "var(--background-base)",
"border-color": "var(--border-base)",
color: "var(--text-base)"
color: "var(--text-primary)"
}}
disabled={generating()}
/>
Expand Down Expand Up @@ -735,7 +735,7 @@ Guidelines for generating agents:
style={{
"border-color": formScope() === "project" ? "var(--text-weak)" : "var(--border-weak)",
background: formScope() === "project" ? "var(--surface-raised)" : "transparent",
color: "var(--text-base)"
color: "var(--text-primary)"
}}
>
<Icon name="folder" size={14} />
Expand All @@ -747,7 +747,7 @@ Guidelines for generating agents:
style={{
"border-color": formScope() === "user" ? "var(--text-weak)" : "var(--border-weak)",
background: formScope() === "user" ? "var(--surface-raised)" : "transparent",
color: "var(--text-base)"
color: "var(--text-primary)"
}}
>
<Icon name="user" size={14} />
Expand All @@ -770,7 +770,7 @@ Guidelines for generating agents:
style={{
background: "var(--background-base)",
"border-color": "var(--border-base)",
color: "var(--text-base)"
color: "var(--text-primary)"
}}
/>
</div>
Expand All @@ -789,7 +789,7 @@ Guidelines for generating agents:
style={{
background: "var(--background-base)",
"border-color": "var(--border-base)",
color: "var(--text-base)"
color: "var(--text-primary)"
}}
/>
</div>
Expand Down Expand Up @@ -825,7 +825,7 @@ Guidelines for generating agents:
class="flex items-center gap-2 px-2 py-1.5 rounded text-xs text-left transition-colors"
style={{
background: formTools().includes(tool.id) ? "var(--surface-raised)" : "transparent",
color: "var(--text-base)"
color: "var(--text-primary)"
}}
>
<span style={{ color: formTools().includes(tool.id) ? "var(--text-base)" : "var(--text-weaker)" }}>
Expand All @@ -850,7 +850,7 @@ Guidelines for generating agents:
style={{
background: "var(--background-base)",
"border-color": "var(--border-base)",
color: "var(--text-base)"
color: "var(--text-primary)"
}}
>
<For each={MODELS}>
Expand All @@ -875,7 +875,7 @@ Guidelines for generating agents:
style={{
background: "var(--background-base)",
"border-color": "var(--border-base)",
color: "var(--text-base)"
color: "var(--text-primary)"
}}
/>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/CallHierarchyView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -587,7 +587,7 @@ function CallHierarchyNode(props: CallHierarchyNodeProps) {
{/* Function name */}
<span
class="text-sm font-medium truncate"
style={{ color: "var(--text-base)" }}
style={{ color: "var(--text-primary)" }}
>
{hierarchyItem().name}
</span>
Expand Down Expand Up @@ -1416,7 +1416,7 @@ export function CallHierarchyView(props: CallHierarchyViewProps) {
<Show when={rootItem()}>
<div class="flex items-center gap-2 flex-1 min-w-0">
{getSymbolIcon(rootItem()!.kind)}
<span class="text-sm font-medium truncate" style={{ color: "var(--text-base)" }}>
<span class="text-sm font-medium truncate" style={{ color: "var(--text-primary)" }}>
{rootItem()!.name}
</span>
<span class="text-xs" style={{ color: "var(--text-weak)" }}>
Expand Down Expand Up @@ -1550,7 +1550,7 @@ export function CallHierarchyView(props: CallHierarchyViewProps) {
<Show when={preview() && !preview()!.loading && preview()!.content.length > 0}>
<pre
class="text-xs font-mono leading-relaxed"
style={{ color: "var(--text-base)" }}
style={{ color: "var(--text-primary)" }}
>
<For each={preview()!.content as unknown as Array<{ lineNumber: number; content: string; isHighlighted: boolean }>}>
{(line) => (
Expand Down
1 change: 1 addition & 0 deletions src/components/CommandCenter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -476,6 +476,7 @@ export function CommandCenter() {
{/* Input Field */}
<Show when={isFocused() || isExpanded()}>
<input
aria-label="Search commands"
ref={inputRef}
type="text"
value={query()}
Expand Down
1 change: 1 addition & 0 deletions src/components/CommandPalette.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,7 @@ export function CommandPalette() {
<div
id="quick-input-list"
role="listbox"
aria-label="Command palette options"
style={{ "line-height": "18px" }}
>
<div
Expand Down
8 changes: 4 additions & 4 deletions src/components/DirectoryPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ export function DirectoryPicker(props: DirectoryPickerProps) {
}}
placeholder="New folder name..."
class="flex-1 text-xs bg-transparent outline-none"
style={{ color: "var(--text-base)" }}
style={{ color: "var(--text-primary)" }}
autofocus
/>
<button
Expand Down Expand Up @@ -255,7 +255,7 @@ export function DirectoryPicker(props: DirectoryPickerProps) {
class="w-full flex items-center gap-2 px-3 py-2 hover:bg-[var(--surface-raised)] transition-colors text-left"
>
<Icon name="folder" size={14} class="shrink-0" style={{ color: "var(--text-weak)" }} />
<span class="text-xs truncate" style={{ color: "var(--text-base)" }}>
<span class="text-xs truncate" style={{ color: "var(--text-primary)" }}>
{entry.name}
</span>
</button>
Expand All @@ -275,7 +275,7 @@ export function DirectoryPicker(props: DirectoryPickerProps) {
</div>
<div
class="text-xs font-mono truncate"
style={{ color: "var(--text-base)" }}
style={{ color: "var(--text-primary)" }}
title={currentPath()}
>
{currentPath()}
Expand All @@ -297,7 +297,7 @@ export function DirectoryPicker(props: DirectoryPickerProps) {
class="px-2 py-1 text-xs rounded transition-colors"
style={{
background: "var(--surface-raised)",
color: "var(--text-base)"
color: "var(--text-primary)"
}}
>
select
Expand Down
4 changes: 2 additions & 2 deletions src/components/EmmetWrapDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export function EmmetWrapDialog() {
class="w-full px-3 py-2 rounded text-[14px] outline-none border transition-colors"
style={{
background: "var(--background-base)",
color: "var(--text-base)",
color: "var(--text-primary)",
"border-color": "var(--border-default)",
}}
value={abbreviation()}
Expand Down Expand Up @@ -174,7 +174,7 @@ export function EmmetWrapDialog() {
class="p-3 rounded text-[13px] font-mono overflow-x-auto max-h-[120px] overflow-y-auto"
style={{
background: "var(--background-base)",
color: "var(--text-base)",
color: "var(--text-primary)",
"white-space": "pre-wrap",
"word-break": "break-word",
}}
Expand Down
6 changes: 3 additions & 3 deletions src/components/FileFinder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1008,11 +1008,11 @@ export function FileFinder() {
</Show>

{/* Results list - Design specs: max-height 400px */}
<div
<div
id="file-finder-list"
role="listbox"
style={{
"max-height": "400px",
aria-label="File finder results"
style={{ "max-height": "400px",
overflow: "auto",
"overscroll-behavior": "contain",
}}
Expand Down
6 changes: 3 additions & 3 deletions src/components/FormatterSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -504,7 +504,7 @@ export function FormatterPromptDialog(props: FormatterPromptDialogProps) {
>
{/* Header */}
<div class="px-4 py-3 border-b" style={{ "border-color": "var(--border-weak)" }}>
<h2 class="text-lg font-semibold" style={{ color: "var(--text-base)" }}>
<h2 class="text-lg font-semibold" style={{ color: "var(--text-primary)" }}>
Choose a Formatter
</h2>
<p class="text-sm mt-1" style={{ color: "var(--text-weaker)" }}>
Expand Down Expand Up @@ -548,7 +548,7 @@ export function FormatterPromptDialog(props: FormatterPromptDialogProps) {
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<span class="font-medium" style={{ color: "var(--text-base)" }}>
<span class="font-medium" style={{ color: "var(--text-primary)" }}>
{FORMATTER_DISPLAY_NAMES[formatterId]}
</span>
<Show when={!isAvailable()}>
Expand Down Expand Up @@ -592,7 +592,7 @@ export function FormatterPromptDialog(props: FormatterPromptDialogProps) {
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<span class="font-medium" style={{ color: "var(--text-base)" }}>
<span class="font-medium" style={{ color: "var(--text-primary)" }}>
{provider.name}
</span>
<span
Expand Down
Loading