diff --git a/public/neu/basis.css b/public/neu/basis.css index 07691ad..faf9ec9 100644 --- a/public/neu/basis.css +++ b/public/neu/basis.css @@ -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 ---------- */ diff --git a/public/neu/huelle.css b/public/neu/huelle.css index e362705..a94ceb8 100644 --- a/public/neu/huelle.css +++ b/public/neu/huelle.css @@ -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; } diff --git a/test/knEfixCss.test.js b/test/knEfixCss.test.js index 309cde4..d0f0c15 100644 --- a/test/knEfixCss.test.js +++ b/test/knEfixCss.test.js @@ -24,3 +24,14 @@ test('F2: die Sperre der Mitarbeiter-Kundenansicht (.kb-view-overlay) ist in der assert.match(knopf, /background:\s*var\(--kn-accent\)/) assert.match(regel(HUELLE, '.kb-view-overlay-card p'), /font-size:\s*\d+px/) }) + +test('F3: Fokusring der Shell-Reiter liegt innen (Spezifität über .kn [tabindex]:focus-visible aus module.css, 0-3-0)', () => { + const BASIS = lies('basis.css') + assert.match(HUELLE, /\n\.kn \.kn-t\[role="tab"\]:focus-visible\s*\{[^}]*outline-offset:\s*-2px/) + assert.match(BASIS, /\n\.kn \.kn-reiter-t\[role="tab"\]:focus-visible\s*\{[^}]*outline-offset:\s*-2px/) + // keine Regel mit niedrigerer Spezifität, die den Versatz setzt + assert.doesNotMatch(HUELLE, /\n\.kn-t:focus-visible/) + assert.doesNotMatch(BASIS, /\n\.kn-reiter-t:focus-visible/) + // der aktive Reiter liegt auf dem schwarzen Gleiter: heller Innenring dort + assert.match(HUELLE, /\.kn \.kn-balken:has\(\.kn-t:focus-visible\) \.kn-gleiter\s*\{[^}]*outline:\s*2px solid #fff[^}]*outline-offset:\s*-3px/) +})