Skip to content

ui: a11y fixes from web-design-guidelines audit + transition: all sweep #72

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
Kures wants to merge 2 commits into
base: main
Choose a base branch
from
Open

ui: a11y fixes from web-design-guidelines audit + transition: all sweep #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d4d70f8
ui: fix top a11y issues from web-design-guidelines audit
Kures May 8, 2026
4a45a0d
ui: replace transition: all with explicit property lists
Kures May 8, 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
29 changes: 24 additions & 5 deletions ui/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,14 +267,17 @@ textarea {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px 12px;
outline: none;
transition: all 0.2s ease;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
backdrop-filter: blur(4px);
text-shadow: var(--text-glow);
}

input:focus,
textarea:focus {
input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
box-shadow: 0 0 8px var(--border-glow);
}
Expand Down Expand Up @@ -349,7 +352,7 @@ button:disabled {
a {
color: var(--accent);
text-decoration: none;
transition: all 0.2s ease;
transition: color 0.2s ease, text-shadow 0.2s ease;
text-shadow: 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
}

Expand Down Expand Up @@ -444,3 +447,19 @@ body.effects-disabled button:hover:not(:disabled) {
transform: translate(0)
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}

body:not(.effects-disabled)::before,
body:not(.effects-disabled)::after {
animation: none !important;
}
}
18 changes: 9 additions & 9 deletions ui/src/lib/components/ChannelList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@
{#if schema?.hasAccounts && isNamedAccount(entry.account)}
<span class="account-name">{entry.account}</span>
{/if}
<button class="icon-btn remove-btn" onclick={() => removeChannel(i)} title="Remove">&#215;</button>
<button class="icon-btn remove-btn" onclick={() => removeChannel(i)} aria-label="Remove channel" title="Remove"><span aria-hidden="true">&#215;</span></button>
</div>

<div class="channel-fields">
Expand Down Expand Up @@ -355,7 +355,7 @@
padding: 1rem;
margin-bottom: 0.75rem;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

.channel-row:hover {
Expand Down Expand Up @@ -449,7 +449,7 @@
font-size: 0.875rem;
font-family: var(--font-mono);
outline: none;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

Expand Down Expand Up @@ -486,7 +486,7 @@
color: var(--fg-dim);
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}
.remove-btn:hover {
background: color-mix(in srgb, var(--error, #e55) 15%, transparent);
Expand Down Expand Up @@ -514,7 +514,7 @@
font-size: 0.8rem;
font-family: var(--font-mono);
cursor: pointer;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
Expand Down Expand Up @@ -552,7 +552,7 @@
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}
.add-btn:hover {
border-color: var(--accent);
Expand Down Expand Up @@ -591,7 +591,7 @@
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 2px;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.toggle-slider::before {
Expand All @@ -603,7 +603,7 @@
top: 3px;
background: var(--fg-dim);
border-radius: 2px;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}
.toggle input:checked + .toggle-slider {
background: color-mix(in srgb, var(--accent) 20%, transparent);
Expand Down Expand Up @@ -654,7 +654,7 @@
border-bottom: 1px solid var(--border);
color: var(--fg);
cursor: pointer;
transition: all 0.15s ease;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease, text-shadow 0.15s ease;
text-align: left;
font-family: var(--font-mono);
}
Expand Down
4 changes: 2 additions & 2 deletions ui/src/lib/components/ComponentCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
border-radius: 4px;
padding: 1.5rem;
color: var(--fg);
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
backdrop-filter: blur(4px);
}

Expand Down Expand Up @@ -165,7 +165,7 @@
padding: 0.375rem 0.75rem;
border-radius: 2px;
cursor: pointer;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
Expand Down
11 changes: 6 additions & 5 deletions ui/src/lib/components/ConfigEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}
.mode-btn:first-child {
border-radius: 2px 0 0 2px;
Expand Down Expand Up @@ -218,7 +218,7 @@
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
box-shadow: inset 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.save-btn:hover:not(:disabled) {
Expand Down Expand Up @@ -275,11 +275,12 @@
font-size: 0.875rem;
resize: none;
line-height: 1.6;
outline: none;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}
.raw-editor:focus {
.raw-editor:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 8px var(--border-glow);
}
Expand Down
10 changes: 5 additions & 5 deletions ui/src/lib/components/ConfigEditorUI.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -652,7 +652,7 @@
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}
.accordion-header:hover {
background: color-mix(in srgb, var(--accent) 5%, transparent);
Expand Down Expand Up @@ -699,7 +699,7 @@
font-size: 0.875rem;
font-family: var(--font-mono);
outline: none;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}
Expand Down Expand Up @@ -767,7 +767,7 @@
font-size: 0.75rem;
cursor: pointer;
opacity: 0.6;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}
.remove-btn:hover {
opacity: 1;
Expand Down Expand Up @@ -799,7 +799,7 @@
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
width: 100%;
}
.add-channel-btn:hover {
Expand Down Expand Up @@ -834,7 +834,7 @@
text-align: left;
cursor: pointer;
font-family: var(--font-mono);
transition: all 0.15s ease;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease, text-shadow 0.15s ease;
}
.add-channel-dropdown button:hover {
background: color-mix(in srgb, var(--accent) 15%, transparent);
Expand Down
4 changes: 2 additions & 2 deletions ui/src/lib/components/InstanceCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
border: 1px solid var(--border);
border-radius: 4px;
color: var(--fg);
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
backdrop-filter: blur(4px);
}
.card:hover {
Expand Down Expand Up @@ -155,7 +155,7 @@
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
text-shadow: var(--text-glow);
}
.card-actions button:hover {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/lib/components/LogViewer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.8px;
transition: all 0.15s ease;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease, text-shadow 0.15s ease;
}
.source-btn:hover {
background: color-mix(in srgb, var(--accent) 10%, transparent);
Expand Down Expand Up @@ -191,7 +191,7 @@
font-family: var(--font-mono);
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}
.clear-btn:hover {
background: color-mix(in srgb, var(--accent) 20%, transparent);
Expand Down
21 changes: 12 additions & 9 deletions ui/src/lib/components/ProviderList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,18 +389,21 @@
class="icon-btn"
onclick={() => moveUp(i)}
disabled={i === 0}
title="Move up">&#8593;</button
aria-label="Move provider up"
title="Move up"><span aria-hidden="true">&#8593;</span></button
>
<button
class="icon-btn"
onclick={() => moveDown(i)}
disabled={i === entries.length - 1}
title="Move down">&#8595;</button
aria-label="Move provider down"
title="Move down"><span aria-hidden="true">&#8595;</span></button
>
<button
class="icon-btn remove-btn"
onclick={() => removeEntry(i)}
title="Remove">&#215;</button
aria-label="Remove provider"
title="Remove"><span aria-hidden="true">&#215;</span></button
>
</div>
</div>
Expand Down Expand Up @@ -553,7 +556,7 @@
padding: 1rem;
margin-bottom: 0.75rem;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

.provider-row:hover {
Expand Down Expand Up @@ -588,7 +591,7 @@
font-size: 0.875rem;
font-family: var(--font-mono);
outline: none;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

.provider-row-header select:focus {
Expand All @@ -614,7 +617,7 @@
color: var(--fg-dim);
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

.icon-btn:hover:not(:disabled) {
Expand Down Expand Up @@ -662,7 +665,7 @@
font-size: 0.875rem;
font-family: var(--font-mono);
outline: none;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

Expand Down Expand Up @@ -749,7 +752,7 @@
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

.status-dot {
Expand Down Expand Up @@ -825,7 +828,7 @@
cursor: pointer;
text-align: left;
font-family: var(--font-mono);
transition: all 0.15s ease;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease, text-shadow 0.15s ease;
}

.saved-item:last-child {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/lib/components/Sidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
border-left: 3px solid transparent;
}

Expand Down Expand Up @@ -264,7 +264,7 @@
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
border-left: 3px solid transparent;
}

Expand Down
2 changes: 1 addition & 1 deletion ui/src/lib/components/StructuredConfigEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,7 @@
font-size: 0.875rem;
font-family: var(--font-mono);
outline: none;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

.field input:focus,
Expand Down
7 changes: 4 additions & 3 deletions ui/src/lib/components/TopBar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,13 +169,14 @@
font-family: var(--font-mono);
font-size: 0.75rem;
text-transform: uppercase;
outline: none;
cursor: pointer;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.theme-select:focus,
.theme-select:focus-visible,
.theme-select:hover {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
box-shadow: 0 0 8px var(--border-glow);
}
Expand Down
Loading
Loading