AP3 A11y-Widget perfektioniert (Focus-Trap, aria-Semantik, tote CSS, Cache)
- accessibility.js: Focus-Trap im Panel (Tab/Shift+Tab zyklisch ueber Close + 9
Optionen), aria-modal="true" beim Oeffnen, Klick-ausserhalb schliesst (Escape +
Fokus-Rueckgabe bestehen). Font-Button: aria-pressed ersetzt durch dynamisches
aria-label ("... aktuell 115 %") + .is-active ab >100 %; Reset-Button ohne
aria-pressed (Aktion statt Toggle). Hochkontrast-Untertitel "immer dunkel".
- accessibility.css: toten Legacy-Dock-Code entfernt (72px body-padding, .mf-a11y-dock,
Fixed-Trigger, Dock-Media-Query); .is-active am Aktiv-Styling; Kommentar, dass
Hochkontrast bewusst immer dunkel bleibt.
- accessibility-placement.css: obsoleten Padding-Reset entfernt; .is-active ergaenzt.
- Cache-Buster: theme.js injiziert accessibility.css v6 / placement v10 /
accessibility.js v9 / fluxtimer.css v5; theme.css?v=4 und theme.js?v=5 in allen
80 Templates/Finalflux-Seiten vereinheitlicht.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WFxcjtc9HNP4VECT6Ur1tE
This commit is contained in:
AliceDarkest
@@ -1,4 +1,4 @@
|
||||
body{padding-left:0!important;padding-bottom:0!important}
|
||||
/* (Legacy-Dock-Padding-Reset entfallen – es gibt kein body-padding-Dock mehr.) */
|
||||
.mf-a11y-trigger{position:static!important;width:42px;height:42px;z-index:auto;flex:0 0 42px;box-shadow:0 0 14px var(--glow-w);border-radius:10px}
|
||||
.mf-a11y-trigger svg{width:20px;height:20px}
|
||||
.mf-a11y-panel{inset:76px 16px auto auto!important;width:min(450px,calc(100vw - 32px));max-height:calc(100dvh - 92px)}
|
||||
@@ -17,5 +17,5 @@ body[class*="mf-a11y-skin-"] .mf-a11y-trigger{border-color:color-mix(in srgb,var
|
||||
body[class*="mf-a11y-skin-"] .mf-a11y-panel{border-color:color-mix(in srgb,var(--mf-a11y-accent) 56%,var(--border));box-shadow:0 12px 45px rgba(0,0,0,.55),0 0 22px var(--mf-a11y-glow)}
|
||||
body[class*="mf-a11y-skin-"] .mf-a11y-head{background:color-mix(in srgb,var(--mf-a11y-accent) 28%,#07121f)}
|
||||
body[class*="mf-a11y-skin-"] .mf-a11y-close{background:var(--mf-a11y-accent);color:var(--mf-a11y-ink)}
|
||||
body[class*="mf-a11y-skin-"] .mf-a11y-option[aria-pressed="true"]{border-color:var(--mf-a11y-accent);background:color-mix(in srgb,var(--mf-a11y-accent) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--mf-a11y-accent)}
|
||||
body[class*="mf-a11y-skin-"] .mf-a11y-option[aria-pressed="true"],body[class*="mf-a11y-skin-"] .mf-a11y-option.is-active{border-color:var(--mf-a11y-accent);background:color-mix(in srgb,var(--mf-a11y-accent) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--mf-a11y-accent)}
|
||||
@media(max-width:700px){.mf-a11y-panel{inset:70px 6px auto 6px!important;width:auto;max-height:calc(100dvh - 82px)}}
|
||||
|
||||
@@ -3,6 +3,8 @@ html[data-mf-readable="true"] body,html[data-mf-readable="true"] button,html[dat
|
||||
/* Die Tokens liegen je nach Spiel auf body bzw. der jeweiligen Spielwurzel.
|
||||
Deshalb müssen die Overrides auf der ganzen Oberfläche gelten – ein Override
|
||||
nur auf html wurde von den lokalen Themes bislang wieder überschrieben. */
|
||||
/* Hochkontrast ist BEWUSST immer dunkel (maximaler, deterministischer Kontrast) –
|
||||
auch im Light Mode. Im Button-Untertitel als "immer dunkel" gekennzeichnet. */
|
||||
html[data-mf-contrast="true"] body,html[data-mf-contrast="true"] body *{--bg:#000!important;--panel:#050505!important;--panel-2:#080808!important;--surface:#0b0b0b!important;--surface-2:#151515!important;--text:#fff!important;--heading:#fff!important;--muted:#f1f1f1!important;--border:#fff!important;--line:#fff!important;--border-accent:#6fffb5!important;--accent:#6fffb5!important;--accent-2:#fff!important;--secondary:#83dbff!important;--secondary-2:#fff!important;--success:#83dbff!important;--danger:#ff9caf!important;--esc-accent:#6fffb5!important;--bh-accent:#6fffb5!important;--sc-accent:#83dbff!important;--nw-accent:#83dbff!important;--mm-accent:#6fffb5!important;--mm-secondary:#83dbff!important;--tt-accent:#6fffb5!important;--tt-secondary:#83dbff!important;--dl-accent:#6fffb5!important;--dl-secondary:#83dbff!important;--ss-accent:#6fffb5!important;--ss-secondary:#83dbff!important;--ff-accent:#6fffb5!important;--ff-secondary:#83dbff!important;--glow-s:transparent!important;--glow-w:transparent!important;--esc-glow:transparent!important;--bh-glow:transparent!important;--sc-glow:transparent!important;--nw-glow:transparent!important;--mm-glow:transparent!important;--tt-glow:transparent!important;--dl-glow:transparent!important;--ss-glow:transparent!important;--ff-glow:transparent!important}
|
||||
html[data-mf-contrast="true"] body{background:#000!important;color:#fff!important;color-scheme:dark}
|
||||
html[data-mf-contrast="true"] body *,html[data-mf-contrast="true"] body *::before,html[data-mf-contrast="true"] body *::after{text-shadow:none!important;box-shadow:none!important}
|
||||
@@ -22,6 +24,7 @@ html[data-mf-color="safe"].sn-platform body .mf-card-finalprotocol{--accent:#999
|
||||
html[data-mf-mono="true"] body{filter:grayscale(1)}html[data-mf-links="true"] a{text-decoration:underline!important;text-underline-offset:.18em;text-decoration-thickness:.12em}
|
||||
html[data-mf-motion="false"] *,html[data-mf-motion="false"] *::before,html[data-mf-motion="false"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
|
||||
html[data-mf-cursor="true"],html[data-mf-cursor="true"] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M2 1v25l7-7 5 11 5-2-5-10h10z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 2 1,auto!important}
|
||||
body{padding-left:72px}.mf-a11y-dock{position:fixed;inset:0 auto 0 0;z-index:1799;width:72px;display:flex;align-items:flex-end;justify-content:center;padding:0 0 18px;background:color-mix(in srgb,var(--panel) 94%,transparent);border-right:1px solid var(--border);box-shadow:5px 0 18px rgba(0,0,0,.16)}
|
||||
/* Legacy-Dock entfernt: der A11y-Trigger sitzt jetzt als 42px-Icon-Button im Header
|
||||
(Platzierung in accessibility-placement.css). Kein body-padding / Fixed-Dock mehr. */
|
||||
.mf-a11y-trigger{width:42px;height:42px;border:1px solid var(--border);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);color:var(--muted);cursor:pointer;transition:all .18s}.mf-a11y-trigger:hover{color:var(--accent);border-color:var(--border-accent);box-shadow:0 0 14px var(--glow-w)}.mf-a11y-trigger svg{width:20px;height:20px}.mf-a11y-trigger:focus-visible,.mf-a11y-panel button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
|
||||
.mf-a11y-panel{position:fixed;left:82px;bottom:18px;z-index:1801;width:min(450px,calc(100vw - 100px));max-height:calc(100dvh - 36px);overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:0 12px 45px rgba(0,0,0,.55)}.mf-a11y-panel[hidden]{display:none}.mf-a11y-head{position:sticky;top:0;display:flex;align-items:center;gap:1rem;padding:.65rem;background:#07121f;color:#fff;z-index:1}.mf-a11y-head h2{font:800 1.05rem Arial,sans-serif;margin:0 auto}.mf-a11y-close{width:44px;height:44px;border:0;border-radius:6px;background:#fff;color:#07121f;font-size:1.8rem;cursor:pointer}.mf-a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;background:var(--surface)}.mf-a11y-option{min-height:88px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);padding:.65rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;font:inherit;cursor:pointer}.mf-a11y-option strong{font-size:1.35rem}.mf-a11y-option[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--accent)}.mf-a11y-option small{color:var(--muted)}@media(max-width:700px){body{padding-left:0;padding-bottom:68px}.mf-a11y-dock{inset:auto 0 0 0;width:auto;height:68px;padding:0 10px;justify-content:flex-start;align-items:center;border-right:0;border-top:1px solid var(--border);box-shadow:0 -5px 18px rgba(0,0,0,.18)}.mf-a11y-trigger{width:52px;height:52px}.mf-a11y-panel{left:6px;bottom:74px;width:calc(100vw - 12px);max-height:calc(100dvh - 86px)}.mf-a11y-grid{grid-template-columns:1fr 1fr}.mf-a11y-option{min-height:78px;font-size:.82rem}}
|
||||
.mf-a11y-panel{position:fixed;left:82px;bottom:18px;z-index:1801;width:min(450px,calc(100vw - 100px));max-height:calc(100dvh - 36px);overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:0 12px 45px rgba(0,0,0,.55)}.mf-a11y-panel[hidden]{display:none}.mf-a11y-head{position:sticky;top:0;display:flex;align-items:center;gap:1rem;padding:.65rem;background:#07121f;color:#fff;z-index:1}.mf-a11y-head h2{font:800 1.05rem Arial,sans-serif;margin:0 auto}.mf-a11y-close{width:44px;height:44px;border:0;border-radius:6px;background:#fff;color:#07121f;font-size:1.8rem;cursor:pointer}.mf-a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;background:var(--surface)}.mf-a11y-option{min-height:88px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);padding:.65rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;font:inherit;cursor:pointer}.mf-a11y-option strong{font-size:1.35rem}.mf-a11y-option[aria-pressed="true"],.mf-a11y-option.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--accent)}.mf-a11y-option small{color:var(--muted)}@media(max-width:700px){.mf-a11y-panel{left:6px;bottom:74px;width:calc(100vw - 12px);max-height:calc(100dvh - 86px)}.mf-a11y-grid{grid-template-columns:1fr 1fr}.mf-a11y-option{min-height:78px;font-size:.82rem}}
|
||||
|
||||
Reference in New Issue
Block a user