Accessibility Widget: Technical Details

Accessibility widget for Sylius - flow diagram, plugin structure, entity and migration overview

Live Demo: Try this and other plugins live — no installation, no risk: demo.markus-michalski.net

Flow

graph TD
    A["Storefront request"] --> B["WidgetConfigResolverInterface"]
    H["Shop API request"] --> B
    B --> C["ChannelSettingsRepositoryInterface"]
    C --> D[("mmd_sylius_accessibility_channel_settings")]
    D --> E{"Row enabled?"}
    E -->|"No"| F["No widget / HTTP 404"]
    E -->|"Yes"| G["WidgetConfig"]
    G --> I["Twig hooks: stylesheets, javascripts, header, offcanvas"]
    G --> J["AccessibilitySettingsProvider (Shop API)"]

The result is cached once per request and channel code (WidgetConfigResolver, kernel.reset), because several storefront templates on the same page ask for the same channel. A database error is not cached.

Bundle and resources

Element	Value
Composer package	`mmd/sylius-accessibility-plugin`
Bundle class	`Mmd\SyliusAccessibilityPlugin\MmdSyliusAccessibilityPlugin`
Configuration tree	`mmd_sylius_accessibility`, deliberately empty
Sylius resource	`mmd_sylius_accessibility_plugin.accessibility_settings` (Doctrine ORM)
Admin route (index)	`mmd_sylius_accessibility_plugin_admin_accessibility_settings_index` under `/%sylius_admin.path_name%/accessibility-channel-settings` (all CRUD routes except `show`)
Shop API operation	`GET /shop/accessibility-settings` (under the API prefix `/api/v2`)
Console command	`mmd:accessibility:setup`
Sidebar group	`MMKreativ Plugins` (code `mmd_plugins`, shared with other MMKreativ plugins)

Plugin structure

src/
├── Api/
│   ├── AccessibilitySettingsProvider.php     # API Platform state provider
│   └── Resource/AccessibilitySettings.php    # API resource (GET /shop/accessibility-settings)
├── DependencyInjection/
│   ├── Configuration.php
│   └── MmdSyliusAccessibilityExtension.php   # bundle extension, Doctrine/grid/hook prepend
├── Command/SetupCommand.php                  # mmd:accessibility:setup
├── Entity/
│   ├── ChannelSettings.php                   # the only own table
│   ├── ChannelSettingsInterface.php
│   └── WidgetPosition.php                    # enum: bottom_right, bottom_left
├── Form/Type/ChannelSettingsFormType.php     # @internal
├── Menu/
│   ├── AdminMenuListener.php                 # @internal
│   └── MenuGroup.php                         # "MMKreativ Plugins" sidebar group
├── Migrations/Version20261003140000.php
├── Settings/
│   ├── ChannelSettingsRepository.php
│   └── ChannelSettingsRepositoryInterface.php
├── Twig/AccessibilityTwigExtension.php       # @internal
└── Widget/
    ├── WidgetConfig.php
    ├── WidgetConfigResolver.php
    └── WidgetConfigResolverInterface.php
config/                                       # services, admin routes, grid, Twig hooks
templates/                                    # shop/ (skip link, target, widget, stylesheets, javascripts), admin/
translations/                                 # messages, flashes, validators (de, en)
Resources/public/                             # accessibility.css, accessibility-early.js, accessibility.js

Entity

A single table, mmd_sylius_accessibility_channel_settings, keyed by channel_code instead of a foreign key - the plugin needs no Sylius core table in its own mapping for that.

Column	Type	Meaning
`id`	`integer`, auto increment	Primary key
`channel_code`	`string(255)`, unique	Channel code, no foreign key
`enabled`	`boolean`	Widget on/off (default off)
`position`	`string(16)`	`bottom_right` / `bottom_left`
`skip_link_enabled`	`boolean`	Skip link on/off
`show_font_size`	`boolean`	Font size tool
`show_contrast`	`boolean`	Contrast tool
`show_color_filter`	`boolean`	Colour filter tool
`show_blue_light`	`boolean`	Blue light filter tool
`show_animations`	`boolean`	Reduce animations tool

Frontend

Plain JavaScript and CSS without a build step. accessibility-early.js holds the schema, storage and application of the settings and exposes them as window.MmdAccessibility; accessibility.js builds the panel behaviour on top of it. The widget sends no network requests.