accesibility fixes

config/packages/sylius_twig_hooks.yaml

@@ -28,9 +28,19 @@ sylius_twig_hooks:
         'sylius_shop.base#stylesheets':
             override:
                 template: "css_override.html.twig"
-                priority: 100
+                priority: -10
 
         'sylius_shop.account.login.content.login_container':
             analytics:
                 template: "shop_demo_credentials.html.twig"
                 priority: 150
+
+        'sylius_shop.homepage.index#metatags':
+            homepage_metatags:
+                template: "homepage_metatags.html.twig"
+                priority: 150
+
+        'sylius_shop.base#metatags':
+            homepage_metatags:
+                template: "shop_metatags.html.twig"
+                priority: 150

templates/css_override.html.twig

@@ -1 +1 @@
-<style>.info-box{position:fixed;bottom:20px;left:20px;z-index:9998;display:none;padding:25px 25px 80px;border-radius:6px;color:#fff;font-size:16px!important;line-height:1.6;box-shadow:0 6px 18px 0 rgba(0,0,0,.22);background:rgba(16,116,93,.9);backdrop-filter:blur(10px);overflow:hidden}.info-box.show,.info-toggle.show>svg:last-child,.info-toggle>svg:first-child{display:block}.info-box a{color:#fff;text-decoration:underline}.info-box a:hover{color:rgba(255,255,255,.85)!important;text-decoration:underline}.info-box label{font-size:16px!important;font-weight:700;padding:0!important;margin:0!important}.info-box select{width:100%;border-radius:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);padding:4px 10px!important}.info-cta,.info-toggle{display:flex;height:48px;border-radius:6px}.info-box__item{margin-bottom:10px}@media (min-width:600px){.info-box__item{display:flex;align-items:center;min-height:30px}}.info-box__item__label{flex-shrink:0;width:130px}.info-box__item__content{flex-grow:1}.select-color-green{background:rgba(16,116,93,.9)!important}.info-cta{position:absolute;bottom:20px;left:80px;align-items:center;padding:0 20px;background:#1e2e3e}.info-cta a{color:#fff;text-decoration:none}.info-toggle{position:fixed;bottom:40px;left:40px;z-index:9999;align-items:center;justify-content:center;width:48px;color:#1e2e3e;box-shadow:0 6px 18px 0 rgba(0,0,0,.05);background:#22b99a;cursor:pointer;transition:.2s}.info-toggle:hover{background:rgba(34,185,154,.8)!important}.info-toggle.show{background:#22b99a}.info-toggle.show>svg:first-child,.info-toggle>svg:last-child{display:none}.admin-layout .admin-layout__sidebar{z-index:997}.admin-layout__nav .sylius-admin-menu{padding-bottom:94px}.bg-success-subtle.text-success{color:#157247!important}button,html{letter-spacing:.03em}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{text-shadow:0 .01em,.01em 0,.01em .01em}*{font-family:Arial,serif}</style>
+<style>.info-box{position:fixed;bottom:20px;left:20px;z-index:9998;display:none;padding:25px 25px 80px;border-radius:6px;color:#fff;font-size:16px!important;line-height:1.6;box-shadow:0 6px 18px 0 rgba(0,0,0,.22);background:rgba(16,116,93,.9);backdrop-filter:blur(10px);overflow:hidden}.info-box.show,.info-toggle.show>svg:last-child,.info-toggle>svg:first-child{display:block}.info-box a{color:#fff;text-decoration:underline}.info-box a:hover{color:rgba(255,255,255,.85)!important;text-decoration:underline}.info-box label{font-size:16px!important;font-weight:700;padding:0!important;margin:0!important}.info-box select{width:100%;border-radius:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);padding:4px 10px!important}.info-cta,.info-toggle{display:flex;height:48px;border-radius:6px}.info-box__item{margin-bottom:10px}@media (min-width:600px){.info-box__item{display:flex;align-items:center;min-height:30px}}.info-box__item__label{flex-shrink:0;width:130px}.info-box__item__content{flex-grow:1}.select-color-green{background:rgba(16,116,93,.9)!important}.info-cta{position:absolute;bottom:20px;left:80px;align-items:center;padding:0 20px;background:#1e2e3e}.info-cta a{color:#fff;text-decoration:none}.info-toggle{position:fixed;bottom:40px;left:40px;z-index:9999;align-items:center;justify-content:center;width:48px;color:#1e2e3e;box-shadow:0 6px 18px 0 rgba(0,0,0,.05);background:#22b99a;cursor:pointer;transition:.2s}.info-toggle:hover{background:rgba(34,185,154,.8)!important}.info-toggle.show{background:#22b99a}.info-toggle.show>svg:first-child,.info-toggle>svg:last-child{display:none}.admin-layout .admin-layout__sidebar{z-index:997}.admin-layout__nav .sylius-admin-menu{padding-bottom:94px}.bg-success-subtle.text-success{color:#157247!important}button,html{letter-spacing:.03em}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{text-shadow:0 .01em,.01em 0,.01em .01em}*{font-family:Arial,serif}a{color:#1A866B}a:hover{color:#22b99a}.btn-primary{--bs-btn-bg:#1A866B}.text-body-tertiary{color:#797676!important;}.text-black-50{color:#797676!important;}.pagination{--bs-pagination-disabled-color:#797676}.btn-link{--bs-btn-color:#1A866B}.btn-link:hover{color:#22b99a}#register-here-button{color:#1D8170}</style>

templates/homepage_metatags.html.twig

@@ -0,0 +1 @@
+<meta name="description" content="{{ 'sylius_demo.meta_description'|trans }}"/>

templates/shop_demo_credentials.html.twig

@@ -1,5 +1,5 @@
 <div class="alert alert-info" role="alert">
-    <h4 class="alert-heading">Test credentials</h4>
+    <h3 class="h4 alert-heading">Test credentials</h3>
     <p class="mt-3 mb-0">
         Username: <strong>shop@example.com</strong><br>
         Password: <strong>sylius</strong>

templates/shop_metatags.html.twig

@@ -0,0 +1 @@
+<meta name="description" content="{{ 'sylius_demo.meta_description'|trans }}"/>

translations/messages.en.yml

@@ -1,2 +1,3 @@
 sylius_demo:
     verification_link_flash: 'For demo purposes you can visit %url% to verify the account.'
+    meta_description: 'Explore the Sylius – a flexible e-commerce platform built on Symfony. Discover features to customize your online store and test its capabilities!'