Kundenansicht neu E-Fix F3a: Fokusring der Shell-Reiter liegt innen und ist sichtbar

.kn [tabindex]:focus-visible (module.css, 0-3-0, später geladen) und .kn button:focus-visible setzten outline-offset +2px und schlugen
.kn-t:focus-visible und .kn-reiter-t:focus-visible (0-2-0). Der Ring lag außerhalb und wurde von Balken und Reiterzeile abgeschnitten.
Jetzt .kn .kn-t[role="tab"] und .kn .kn-reiter-t[role="tab"] (0-4-0) mit Versatz -2px; der aktive Reiter auf dem schwarzen Gleiter
bekommt vom Gleiter einen hellen Innenring (Rückfall ohne Overlay: weißer Ring am Reiter). Pin in test/knEfixCss.test.js.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed 2026-10-16 21:30:06 +00:00
1 parent 112475e873
commit 92d7d247e9
3 files changed
+18 -2

No files matched your search

+1 -1
View File
@@ -72,7 +72,7 @@
border-bottom: 2px solid transparent; font-variant-numeric: tabular-nums; cursor: pointer;
}
.kn-reiter-t:hover { color: var(--kn-text); }
.kn-reiter-t:focus-visible { outline-offset: -2px; }
.kn .kn-reiter-t[role="tab"]:focus-visible { outline-offset: -2px; } /* 0-4-0: .kn [tabindex]:focus-visible in module.css (0-3-0, später geladen) setzt sonst +2px */
.kn-reiter-t.aktiv, .kn-reiter-t[aria-selected="true"] { color: var(--kn-accent); border-bottom-color: var(--kn-accent); font-weight: 600; }
/* ---------- Status-Pillen ---------- */
+6 -1
View File
@@ -152,7 +152,12 @@
.kn-fb .kn-t[aria-selected="true"] { color: #fff; }
.kn-t { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 4px; font-size: 15px; font-weight: 600; color: var(--kn-text-2); white-space: nowrap; text-align: center; transition: color 250ms; }
.kn-t:focus-visible { outline-offset: -2px; border-radius: 6px; }
/* Fokusring: .kn [tabindex]:focus-visible und .kn button:focus-visible (module.css, 0-3-0 und 0-2-1, später geladen) setzen +2px und schlugen die alte Regel
(0-2-0); der Ring lag außerhalb und wurde vom Balken (overflow) abgeschnitten. Mit .kn und [role="tab"] (0-4-0) bleibt er innen. Der aktive Reiter liegt
auf dem schwarzen Gleiter: dort zeichnet der Gleiter einen hellen Innenring. */
.kn .kn-t[role="tab"]:focus-visible { outline-offset: -2px; border-radius: 6px; }
.kn .kn-balken:has(.kn-t:focus-visible) .kn-gleiter { outline: 2px solid #fff; outline-offset: -3px; }
.kn .kn-fb .kn-t[aria-selected="true"]:focus-visible { outline-color: #fff; }
.kn-schrift-klein .kn-t { font-size: 14px; }
.kn-overlay .kn-t { color: #fff; }