From 548a90f15ecc6e0a19a353d1b0904b6d773b6adc Mon Sep 17 00:00:00 2001 From: AliceDarkest Date: Sun, 12 Jul 2026 23:51:46 +0200 Subject: [PATCH] Accessibility in Kopfzeilen integrieren und Kategorien angleichen --- CHANGELOG.md | 5 +++++ src/main/resources/static/css/accessibility-placement.css | 7 +++++++ src/main/resources/static/css/codeescape-global.css | 1 + src/main/resources/static/css/techtacular.css | 3 ++- src/main/resources/static/js/accessibility.js | 1 + src/main/resources/static/js/theme.js | 7 ++++++- src/main/resources/templates/codeescape.html | 2 +- 7 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 src/main/resources/static/css/accessibility-placement.css create mode 100644 src/main/resources/static/css/codeescape-global.css diff --git a/CHANGELOG.md b/CHANGELOG.md index 90998bf..8146fb9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,11 @@ Docker/CI-Härtung und erste Tests. „Lesemodus (Dyslexie)“ und weist auf Verdana plus vergrößerte Abstände hin. - Der dauerhaft erreichbare Auslöser besitzt nun reservierten Layoutplatz statt Spielkarten oder Formulare zu überdecken: seitlich auf Desktop und in einer unteren Schutzzone auf kleinen Displays. +- Accessibility-Zugriff in die jeweilige sticky Kopfzeile neben Theme/Logout verschoben; Seiten + ohne Werkzeugleiste erhalten eine eigene reservierte Utility-Zeile statt eines Inhalts-Overlays. +- SystemEscape behält seine Terminal-Typografie im Spiel, verwendet für globale Navigation und + Werkzeuge aber die einheitliche Mindflux-Sans-Serif-Schrift. +- TechTacular-Kategoriekarten auf identische Höhe gesetzt und zweizeilige Titel mittig ausgerichtet. - Das Panel besitzt Dialogsemantik, sichtbaren Tastaturfokus, Escape-Schließen und verständliche Aktivzustände; Spielzustände oder Benutzerkonten werden dabei nicht verändert. - **DevLab-Spielansicht nutzt große Bildschirme aus:** Die bisherige starre Begrenzung auf diff --git a/src/main/resources/static/css/accessibility-placement.css b/src/main/resources/static/css/accessibility-placement.css new file mode 100644 index 0000000..2ca07d1 --- /dev/null +++ b/src/main/resources/static/css/accessibility-placement.css @@ -0,0 +1,7 @@ +body{padding-left:0!important;padding-bottom:0!important} +.mf-a11y-trigger{position:static!important;width:44px;height:44px;z-index:auto;flex:0 0 44px;box-shadow:0 0 14px var(--glow-w);border-radius:12px} +.mf-a11y-trigger svg{width:25px;height:25px} +.mf-a11y-panel{inset:76px 16px auto auto!important;width:min(450px,calc(100vw - 32px));max-height:calc(100dvh - 92px)} +.mf-a11y-utility{position:sticky;top:0;z-index:1700;min-height:60px;display:flex;align-items:center;justify-content:flex-end;padding:.5rem 1rem;background:var(--panel);border-bottom:1px solid var(--border)} +.mf-theme-float{display:flex;align-items:center;gap:.55rem} +@media(max-width:700px){.mf-a11y-panel{inset:70px 6px auto 6px!important;width:auto;max-height:calc(100dvh - 82px)}.mf-a11y-trigger{width:42px;height:42px;flex-basis:42px}} diff --git a/src/main/resources/static/css/codeescape-global.css b/src/main/resources/static/css/codeescape-global.css new file mode 100644 index 0000000..f38e89b --- /dev/null +++ b/src/main/resources/static/css/codeescape-global.css @@ -0,0 +1 @@ +.esc-global-tools{justify-self:end;display:flex;align-items:center;gap:.65rem}.mf-a11y-host{display:flex}.esc-back,.esc-timer{font-family:"Inter","Segoe UI",system-ui,sans-serif}.esc-back{font-weight:600} diff --git a/src/main/resources/static/css/techtacular.css b/src/main/resources/static/css/techtacular.css index 498df78..fc98d49 100644 --- a/src/main/resources/static/css/techtacular.css +++ b/src/main/resources/static/css/techtacular.css @@ -136,7 +136,8 @@ body.tt-body { } .tt-cat-title { - flex: 0 0 auto; + flex: 0 0 3.5rem; + min-height: 3.5rem; display: flex; align-items: center; justify-content: center; diff --git a/src/main/resources/static/js/accessibility.js b/src/main/resources/static/js/accessibility.js index f080b9a..070cad1 100644 --- a/src/main/resources/static/js/accessibility.js +++ b/src/main/resources/static/js/accessibility.js @@ -6,5 +6,6 @@ function button(id,icon,label,detail){return '

Barrierefreiheit

'+button('font','T⁺','Text vergrößern','100 %')+button('contrast','◐','Hochkontrast')+button('color','◉','Farbenblind-Modus')+button('mono','◒','Monochrom')+button('readable','Aa','Lesemodus (Dyslexie)','Verdana + Abstände')+button('links','🔗','Links unterstreichen')+button('motion','Ⅱ','Animationen stoppen')+button('cursor','➤','Großer Cursor')+button('reset','↺','Alles zurücksetzen')+'
'; document.body.appendChild(trigger);document.body.appendChild(panel);var close=panel.querySelector('.mf-a11y-close');function paint(){panel.querySelectorAll('[data-a11y]').forEach(function(b){var id=b.dataset.a11y,on=id==='font'?state.font>100:id==='motion'?!state.motion:id==='reset'?false:!!state[id];b.setAttribute('aria-pressed',on);if(id==='font')b.querySelector('small').textContent=state.font+' %';});} +var host=document.querySelector('.mf-a11y-host,.mf-tools,.tt-header-tools,.mm-header-tools,.ss-header-tools,.dlg-header-tools,.mf-theme-float');if(host){host.insertBefore(trigger,host.firstChild);}else{var utility=document.createElement('div');utility.className='mf-a11y-utility';utility.setAttribute('aria-label','Globale Werkzeuge');utility.appendChild(trigger);document.body.insertBefore(utility,document.body.firstChild);} function hide(){panel.hidden=true;trigger.setAttribute('aria-expanded','false');trigger.focus();}function show(){panel.hidden=false;trigger.setAttribute('aria-expanded','true');paint();close.focus();}trigger.addEventListener('click',function(){panel.hidden?show():hide();});close.addEventListener('click',hide);window.addEventListener('keydown',function(e){if(e.key==='Escape'&&!panel.hidden)hide();});panel.addEventListener('click',function(e){var b=e.target.closest('[data-a11y]');if(!b)return;var id=b.dataset.a11y;if(id==='reset')state=Object.assign({},defaults);else if(id==='font')state.font=levels[(levels.indexOf(state.font)+1)%levels.length];else if(id==='motion')state.motion=!state.motion;else state[id]=!state[id];apply();paint();});paint();} if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init();})(); diff --git a/src/main/resources/static/js/theme.js b/src/main/resources/static/js/theme.js index 274f1db..1a00dd7 100644 --- a/src/main/resources/static/js/theme.js +++ b/src/main/resources/static/js/theme.js @@ -30,10 +30,15 @@ accessibilityCss.href = '/css/accessibility.css?v=3'; accessibilityCss.setAttribute('data-accessibility', ''); document.head.appendChild(accessibilityCss); + var accessibilityPlacementCss = document.createElement('link'); + accessibilityPlacementCss.rel = 'stylesheet'; + accessibilityPlacementCss.href = '/css/accessibility-placement.css?v=1'; + accessibilityPlacementCss.setAttribute('data-accessibility', ''); + document.head.appendChild(accessibilityPlacementCss); } if (!document.querySelector('script[data-accessibility]')) { var accessibilityScript = document.createElement('script'); - accessibilityScript.src = '/js/accessibility.js?v=3'; + accessibilityScript.src = '/js/accessibility.js?v=4'; accessibilityScript.defer = true; accessibilityScript.setAttribute('data-accessibility', ''); document.head.appendChild(accessibilityScript); diff --git a/src/main/resources/templates/codeescape.html b/src/main/resources/templates/codeescape.html index 5a70cc8..400ae96 100644 --- a/src/main/resources/templates/codeescape.html +++ b/src/main/resources/templates/codeescape.html @@ -1 +1 @@ -SystemEscape · Mindflux
← Dashboard
SYSTEMESCAPEFACILITY ACCESS PROTOCOL
--:--
FACILITY WIRD INITIALISIERT …
+SystemEscape · Mindflux
← Dashboard
SYSTEMESCAPEFACILITY ACCESS PROTOCOL
--:--
FACILITY WIRD INITIALISIERT …