Barrierefreiheit-Widget: Technische Details

Barrierefreiheit-Widget für Shopware 6.7 - Architektur-Diagramm, Plugin-Struktur und Subscriber-Übersicht

Live Demo: Teste dieses und weitere Plugins live — ohne Installation, ohne Risiko: demo.markus-michalski.net

Einstellungsverarbeitung

graph TD
    A["Besucher klickt<br/>Barrierefreiheits-Widget"] --> B["AccessibilityWidget<br/>(accessibility-widget.js)"]
    B --> C["Einstellung speichern<br/>(localStorage)"]
    C --> D{"Einstellungstyp?"}
    D -->|"Schriftgröße"| E["CSS-Klasse<br/>a11y-font-small / a11y-font-large"]
    D -->|"Kontrast"| F["CSS-Klasse<br/>a11y-contrast-high / a11y-contrast-inverted"]
    D -->|"Farbfilter"| G["CSS-Klasse<br/>a11y-filter-*"]
    D -->|"Blaulicht / Animationen"| H["CSS-Klasse<br/>a11y-blue-light / a11y-reduce-motion"]
    E & F & G & H --> I["html-Element<br/>Klasse gesetzt"]
    I --> J["CSS-Regeln<br/>aktiv"]

Plugin-Struktur

src/
├── MmdAccessibility.php                       Plugin-Klasse, räumt beim Uninstall system_config auf
├── Subscriber/
│   └── StorefrontRenderSubscriber.php         Reicht Konfiguration an die Templates weiter
└── Resources/
    ├── config/
    │   ├── config.xml                          Plugin-Einstellungen (Admin)
    │   └── services.xml                        Service-Verdrahtung
    ├── app/storefront/src/scss/base.scss        Widget-Styles und Effekt-Klassen
    ├── public/js/accessibility-widget.js        Vanilla-JS-Widget, kein Build-Schritt nötig
    ├── snippet/de_DE/, en_GB/                   Übersetzungen
    └── views/storefront/
        ├── base.html.twig                       Bindet SVG-Filter, Widget und Widget-Script ein
        └── component/accessibility/
            ├── widget.html.twig                 Trigger-Button und Einstellungs-Panel
            └── svg-filters.html.twig            SVG-Filterdefinitionen für Farbsehschwächen

Subscriber-Übersicht

StorefrontRenderSubscriber hört auf StorefrontRenderEvent und stellt die Plugin-Konfiguration unter der Twig-Variable mmdAccessibility bereit:

Config-Key	Twig-Pfad	Standard
`widgetEnabled`	`mmdAccessibility.enabled`	`true`
`widgetPosition`	`mmdAccessibility.position`	`bottom-right`
`optionFontSize`	`mmdAccessibility.options.fontSize`	`true`
`optionContrast`	`mmdAccessibility.options.contrast`	`true`
`optionColorFilter`	`mmdAccessibility.options.colorFilter`	`true`
`optionBlueLight`	`mmdAccessibility.options.blueLight`	`true`
`optionAnimations`	`mmdAccessibility.options.animations`	`true`

Zwei Absicherungen im Subscriber:

Widget-Position wird gegen eine feste Erlaubnisliste (bottom-right, bottom-left) geprüft; jeder andere gespeicherte Wert fällt auf bottom-right zurück. Das verhindert, dass ein manipulierter Konfigurationswert CSS in die Seite einschleust.
Bool-Einstellungen akzeptieren nur echte PHP-Booleans. Ein als String gespeicherter Wert "false" würde PHP sonst als true interpretieren; der Subscriber fällt stattdessen auf den Standardwert zurück.