Hitonabi/mission-control-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish: A11y-, Motion- & Deep-Linking-Sweep (Web Interface Guidelines)

Browse Source 
Aus dem web-design-guidelines-Audit über das ganze Frontend:

P1 — index.css: prefers-reduced-motion-Block (Animationen/Transitions aus),
color-scheme dark/light, zwei `transition: all` → explizite Properties,
globaler :focus-visible-Ring. Formular-aria-labels (SystemDrawer-Passwörter
inkl. name/autocomplete/spellCheck, Memory, Connect, ModelBrowse, LaneEditor,
CustomDialog). Icon-Button-aria-labels + dekorative Icons aria-hidden.

P2 — Memory-Lösch-Bestätigung (war sofort), overscroll-behavior:contain auf
Modals (CustomDialog/Agent/Cockpit/CommandPalette), ModelBrowse fmtN → Intl.NumberFormat.

P3 — Deep-Linking: top-level View im URL-Hash (#models), Reload/Teilen/Cmd-Klick
funktionieren; Sidebar-Nav als <a href="#id"> (echte Links, aria-current),
hashchange-Sync; index.css-Aktiv-Selektoren button→a nachgezogen.

Verifiziert: npm run build (tsc strict) clean; live gegen die Box (Hash-Nav,
Reload-Persistenz, aria-current, Aktiv-Styling teal+Akzent, keine Konsolenfehler).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
2026-06-29 20:25:08 +02:00
parent 8108d3fd28
commit 087eb2259d
17 changed files with 378 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+23 -4
View File
@@ -21,6 +21,7 @@
--input: 222 18% 23%;
--ring: 172 72% 50%;
--radius: 0.75rem;
color-scheme: dark;
}
.light {
@@ -39,6 +40,7 @@
--border: 220 13% 88%;
--input: 220 13% 88%;
--ring: 172 66% 50%;
color-scheme: light;
}
@theme inline {
@@ -97,6 +99,23 @@
outline-color: hsl(var(--primary) / 0.5);
}
/* Sichtbarer Fokus für Tastatur-Nutzer auf allen interaktiven Elementen
(Inputs haben ihren eigenen Ring unten via box-shadow). */
:focus-visible {
outline: 2px solid hsl(var(--primary) / 0.7);
outline-offset: 2px;
}
/* Bewegungs-Sensibilität respektieren: Animationen/Transitions praktisch aus. */
@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;
}
}
html,
body,
#root {
@@ -139,7 +158,7 @@ body {
box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Gorgeous gradient top accent line to all main cards to inject color and structure */
@@ -171,7 +190,7 @@ body {
.rounded-xl.border.bg-card\/45 {
background-color: hsl(var(--card) / 0.88) !important;
border-color: hsl(var(--border) / 0.9) !important;
transition: all 0.2s ease !important;
transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
.rounded-xl.border.bg-card\/45:hover {
background-color: hsl(var(--card) / 0.95) !important;
@@ -179,7 +198,7 @@ body {
}
/* Sidebar active link styling */
aside nav button[class*="bg-primary/15"]:not([class*="justify-center"]) {
aside nav a[class*="bg-primary/15"]:not([class*="justify-center"]) {
background: linear-gradient(90deg, hsl(var(--primary) / 0.18), rgba(99, 102, 241, 0.12)) !important;
color: hsl(var(--primary)) !important;
border-left: 3.5px solid hsl(var(--primary)) !important;
@@ -188,7 +207,7 @@ aside nav button[class*="bg-primary/15"]:not([class*="justify-center"]) {
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.02) !important;
}
aside nav button[class*="bg-primary/15"][class*="justify-center"] {
aside nav a[class*="bg-primary/15"][class*="justify-center"] {
background: hsl(var(--primary) / 0.18) !important;
color: hsl(var(--primary)) !important;
box-shadow: 0 0 12px 1px hsl(var(--primary) / 0.1) !important;