Live Demo: Try this and other plugins live — no installation, no risk: demo.markus-michalski.net
src/
├── MmdAccessibility.php Plugin class, cleans up system_config on uninstall
├── Subscriber/
│ └── StorefrontRenderSubscriber.php Passes configuration to the templates
└── Resources/
├── config/
│ ├── config.xml Plugin settings (admin)
│ └── services.xml Service wiring
├── app/storefront/src/scss/base.scss Widget styles and effect classes
├── public/js/accessibility-widget.js Vanilla JS widget, no build step required
├── snippet/de_DE/, en_GB/ Translations
└── views/storefront/
├── base.html.twig Includes SVG filters, widget and widget script
└── component/accessibility/
├── widget.html.twig Trigger button and settings panel
└── svg-filters.html.twig SVG filter definitions for color vision deficiencies
StorefrontRenderSubscriber listens for StorefrontRenderEvent and exposes the plugin configuration under the Twig variable mmdAccessibility:
| Config Key | Twig Path | Default |
|---|---|---|
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 |
Two safeguards in the subscriber:
bottom-right, bottom-left); any other stored value falls back to bottom-right. This prevents a manipulated config value from injecting CSS into the page."false" would otherwise be interpreted by PHP as true; the subscriber falls back to the default instead.