Das Plugin registriert sich über folgende Hooks, kein Core-Template wird überschrieben:
| Hook | Zweck |
|---|---|
sylius_shop.base#stylesheets |
Lädt accessibility.css |
sylius_shop.base#javascripts |
Lädt accessibility-early.js (synchron, vor dem ersten Rendern) und accessibility.js |
sylius_shop.base.header |
Skip-Link (Priorität 1000, ganz vorn) und das Sprungziel (Priorität 50) |
sylius_shop.base.offcanvas |
Das schwebende Widget selbst, außerhalb des Seiten-Wrappers |
Ein Theme, das diese Hook-Slots ersetzt, muss die Templates des Plugins selbst rendern, sonst erscheint nichts.
Die Basis-Vorlage des Shops hat kein <main> und keine Inhalts-ID. Das Plugin druckt deshalb einen leeren, fokussierbaren <div id="mmd-a11y-main" tabindex="-1" role="region"> zwischen Navigation und Flash-Nachrichten, damit eine Validierungsmeldung oder "In den Warenkorb gelegt"-Nachricht nach dem Sprung nicht übersprungen wird. Setzt dein Theme den Inhalt an anderer Stelle, überschreibe templates/shop/skip_target.html.twig.
Die Effekte sind einfache Klassen auf <html>, Farben/Abstände über CSS Custom Properties aus deinem Theme überschreibbar:
:root {
--mmd-a11y-primary: #0b6b3a;
--mmd-a11y-primary-dark: #08522c;
--mmd-a11y-offset-x: 24px;
--mmd-a11y-offset-bottom: 90px;
--mmd-a11y-z-index: 1020;
}
| Einstellung | Klassen auf <html> |
|---|---|
| Schriftgröße | mmd-a11y-font-small, mmd-a11y-font-large |
| Kontrast | mmd-a11y-contrast-high, mmd-a11y-contrast-inverted |
| Farbfilter | mmd-a11y-filter-protanopia, -deuteranopia, -tritanopia |
| Blaulicht | mmd-a11y-blue-light |
| Reduzierte Bewegung | mmd-a11y-reduce-motion |
localStorage-Key: mmd-accessibility-settings. Eine Headless-Storefront kann dieselben Klassen als Konvention wiederverwenden (siehe Shop API).
Die Farbfilter sitzen bewusst auf
<html>, nicht auf einem Wrapper-Element: Ein Filter auf einem Wrapper würde zum Containing Block jedesposition: fixed-Elements (Sticky-Header, Banner) und dessen Platzierung zerstören.
<head> (accessibility-early.js, eine externe Datei, damit eine strikte CSP keine Ausnahme dafür braucht) setzt die gespeicherten Einstellungen vor dem ersten Rendern auf <html>. Das Widget-Script baut darauf auf.url('#id') in einer externen Stylesheet die Inline-SVG-Filter nicht erreicht; eine strikte Content-Security-Policy braucht dafür einen Nonce oder Hash für diesen <style>.asset(): Solange ein Sylius-Theme aktiv ist, schreibt es Bundle-Assets auf /_themes/... um, das erst nach sylius:theme:assets:install existiert. Die Änderungszeit der Datei dient als Cache-Busting-Version.