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

docs/superpowers/plans/2026-03-18-report-command.md

@@ -1642,14 +1642,15 @@ Create `ui/src/routes/report/+page.svelte`:
     color: var(--fg);
     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;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
   }
 
-  .field input:focus,
-  .field select:focus,
-  .field textarea:focus {
+  .field input:focus-visible,
+  .field select:focus-visible,
+  .field textarea:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
     border-color: var(--accent);
     box-shadow: 0 0 8px var(--border-glow);
   }
@@ -1726,7 +1727,7 @@ Create `ui/src/routes/report/+page.svelte`:
     text-transform: uppercase;
     letter-spacing: 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, text-shadow 0.2s ease;
     text-shadow: var(--text-glow);
     box-shadow: inset 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent);
   }
@@ -1753,7 +1754,7 @@ Create `ui/src/routes/report/+page.svelte`:
     text-transform: uppercase;
     letter-spacing: 1px;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
   }
 
   .btn:hover {

ui/src/app.css

@@ -259,6 +259,7 @@ body.theme-8bit-lobster-light:not(.effects-disabled)::after {
 /* Base Inputs */
 input,
 button,
+select,
 textarea {
   font-family: inherit;
   font-size: 0.95em;
@@ -267,14 +268,18 @@ 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,
+select: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);
 }
@@ -349,7 +354,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);
 }
 
@@ -364,6 +369,7 @@ body.effects-disabled * {
 }
 
 body.effects-disabled input:focus,
+body.effects-disabled select:focus,
 body.effects-disabled textarea:focus,
 body.effects-disabled button:hover:not(:disabled) {
   box-shadow: none !important;
@@ -444,3 +450,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;
+  }
+}

ui/src/lib/components/ChannelList.svelte

@@ -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">
@@ -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 {
@@ -448,8 +448,7 @@
     color: var(--fg);
     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);
   }
 
@@ -486,7 +485,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);
@@ -514,7 +513,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;
   }
@@ -552,7 +551,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);
@@ -591,7 +590,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 {
@@ -603,7 +602,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);
@@ -654,7 +653,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);
   }

ui/src/lib/components/ComponentCard.svelte

@@ -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);
   }
 
@@ -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;

ui/src/lib/components/ConfigEditor.svelte

@@ -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;
@@ -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) {
@@ -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);
   }

ui/src/lib/components/ConfigEditorUI.svelte

@@ -216,15 +216,23 @@
     {@const schema = channelSchemas[channelType]}
     {#if schema}
       <div class="section">
-        <div class="accordion-header channel-header" role="button" tabindex="0" onclick={() => toggle(`channel-${channelType}`)} onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') toggle(`channel-${channelType}`); }}>
+        <div
+          class="accordion-header channel-header"
+          role="button"
+          tabindex="0"
+          aria-expanded={openSections[`channel-${channelType}`] ? 'true' : 'false'}
+          onclick={() => toggle(`channel-${channelType}`)}
+          onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(`channel-${channelType}`); } }}
+        >
           <div class="accordion-left">
             <span class="accordion-arrow" class:open={openSections[`channel-${channelType}`]}>&#9654;</span>
             <span>{schema.label}</span>
           </div>
           <button
             class="remove-btn"
+            aria-label={`Remove ${schema.label} channel`}
             onclick={(e) => { e.stopPropagation(); removeChannel(channelType); }}
-          >&#10005;</button>
+          ><span aria-hidden="true">&#10005;</span></button>
         </div>
         {#if openSections[`channel-${channelType}`]}
           <div class="accordion-body">
@@ -652,7 +660,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);
@@ -698,8 +706,7 @@
     color: var(--fg);
     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;
   }
@@ -767,7 +774,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;
@@ -799,7 +806,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 {
@@ -834,7 +841,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);

ui/src/lib/components/InstanceCard.svelte

@@ -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 {
@@ -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 {

ui/src/lib/components/LogViewer.svelte

@@ -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);
@@ -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);

ui/src/lib/components/ManagedInstanceSelector.svelte

@@ -108,7 +108,6 @@
   }
 
   .instance-selector select:focus {
-    outline: none;
     border-color: var(--accent);
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
   }

ui/src/lib/components/NullBoilerPanel.svelte

@@ -1682,7 +1682,6 @@
   .field select:focus,
   .field textarea:focus,
   .json-editor:focus {
-    outline: none;
     border-color: var(--accent);
   }
   .json-editor {

ui/src/lib/components/NullTicketsPanel.svelte

@@ -1570,7 +1570,6 @@
   .field input:focus,
   .field select:focus,
   .field textarea:focus {
-    outline: none;
     border-color: var(--accent);
   }
   .btn {