From b2ee09e5e4a8ab4fe0205f407892df3278d9adce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Sun, 22 Jun 2025 17:58:41 +0200
Subject: [PATCH] feat: various a11y improvements

---
 .../Private/Partials/HeaderSlider.html        |  4 +-
 .../Private/Partials/Product/Teaser.html      | 95 +++++++++----------
 2 files changed, 46 insertions(+), 53 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
index 903f4039..f2815133 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
@@ -66,9 +66,9 @@
                                                         <circle fill="currentColor" class="text-ep-primary-dark" cx="100" cy="100" r="70"/>
                                                     </svg>
                                                     <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
-                                                        <span class="block text-center text-white uppercase font-bold leading-none text-xl">{badgeData.title -> f:format.raw()}</span>
+                                                        <span class="block text-center text-white bg-ep-primary-dark uppercase font-bold leading-none text-xl">{badgeData.title -> f:format.raw()}</span>
                                                         <f:if condition="{badgeData.subtitle}">
-                                                            <span class="block text-center text-white uppercase font-bold leading-none">{badgeData.subtitle -> f:format.raw()}</span>
+                                                            <span class="block text-center text-white bg-ep-primary-dark uppercase font-bold leading-none">{badgeData.subtitle -> f:format.raw()}</span>
                                                         </f:if>
                                                     </div>
                                                 </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
index 1697529d..49b18d99 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
@@ -6,40 +6,32 @@
 
     <f:section name="Teaser">
         <f:variable name="targetUrl" value="{ep:uri.product(forceHotelUid: forceHotelUid, product: product, hotel: hotel, dateFrom: dateFrom, dateTo: dateTo, ref: referringPageUri)}"/>
-        <div class="product-teaser flex flex-col h-full bg-white group{f:if(condition: landscape, then: ' sm:flex-row sm:h-auto')}">
+        <div class="product-teaser relative flex flex-col h-full bg-white{f:if(condition: landscape, then: ' sm:flex-row sm:h-auto')}">
             <f:render section="TeaserImage" arguments="{_all}"/>
             <f:render section="TeaserContent" arguments="{_all}"/>
         </div>
     </f:section>
 
     <f:section name="TeaserImage">
-        <div class="relative{f:if(condition: landscape, then: ' sm:w-2/5')}">
-            <a href="{targetUrl}"
-               <f:if condition="{concept.popupText} && {settings.globalConceptCode} != {concept.code}">
-                   hx-get="{ep:uri.ajax(action: 'concept', controller: 'AjaxTeaserPopup', arguments: '{concept: concept.uid, targetUrl: targetUrl}', format: 'html', pageUid: settings.defaultAjaxUid)}"
-                   hx-target="body"
-                   hx-swap="beforeend"
-               </f:if>
-            >
-                <f:if condition="{productImage}">
-                    <f:then>
-                        <ep:lazyLoadImage image="{productImage}"
-                                          loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
-                                          class="block w-full h-full object-cover"
-                                          width="400c"
-                                          height="300c"
-                                          alt="{product.name}" />
-                    </f:then>
-                    <f:else>
-                        <f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
-                                 class="block w-full h-full object-cover"
-                                 width="400c"
-                                 height="300c"
-                                 alt="{product.name}" />
-                    </f:else>
-                </f:if>
-            </a>
-            <div class="absolute top-0 left-0 z-10 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}/70', else: 'bg-ep-primary/80')}">
+        <div class="{f:if(condition: landscape, then: ' sm:w-2/5')}">
+            <f:if condition="{productImage}">
+                <f:then>
+                    <ep:lazyLoadImage image="{productImage}"
+                                        loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                                        class="block w-full h-full object-cover"
+                                        width="400c"
+                                        height="300c"
+                                        alt="{product.name}" />
+                </f:then>
+                <f:else>
+                    <f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
+                                class="block w-full h-full object-cover"
+                                width="400c"
+                                height="300c"
+                                alt="{product.name}" />
+                </f:else>
+            </f:if>
+            <div class="absolute top-0 left-0 z-20 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}/70', else: 'bg-ep-primary/80')}">
                 <div class="flex items-center space-x-2">
                     <f:if condition="{country.code}">
                         {ep:icon(class: 'product-teaser__flag', icon: 'flag-{country.code -> f:format.case(mode: \'lower\')}')}
@@ -76,37 +68,38 @@
     </f:section>
 
     <f:section name="TeaserContent">
-        {f:variable(name: 'including', value: '{f:render(section: \'Including\', arguments: \'{_all}\') -> v:format.trim()}')}
-        <a href="{targetUrl}"
-            <f:if condition="{concept.popupText} && {settings.globalConceptCode} != {concept.code}">
-                hx-get="{ep:uri.ajax(action: 'concept', controller: 'AjaxTeaserPopup', arguments: '{concept: concept.uid, targetUrl: targetUrl}', format: 'html', pageUid: settings.defaultAjaxUid)}"
-                hx-target="body"
-                hx-swap="beforeend"
-            </f:if>
-           class="flex-1 flex flex-col space-y-1 px-2 py-4 md:p-4">
-            <div class="product-teaser__label-name">
-                {product.name}
-            </div>
-            <div class="product-teaser__label-region">
-                {region.name}
-            </div>
+    {f:variable(name: 'including', value: '{f:render(section: \'Including\', arguments: \'{_all}\') -> v:format.trim()}')}
+        <div class="flex-1 flex flex-col space-y-1 px-2 py-4 md:p-4">
+            <a href="{targetUrl}" class="peer"
+                <f:if condition="{concept.popupText} && {settings.globalConceptCode} != {concept.code}">
+                    hx-get="{ep:uri.ajax(action: 'concept', controller: 'AjaxTeaserPopup', arguments: '{concept: concept.uid, targetUrl: targetUrl}', format: 'html', pageUid: settings.defaultAjaxUid)}"
+                    hx-target="body"
+                    hx-swap="beforeend"
+                </f:if>
+            >
+                <div class="product-teaser__label-name">
+                    {product.name}
+                </div>
+                <div class="product-teaser__label-region">
+                    {region.name}
+                </div>
+                <span class="absolute top-0 left-0 inset-0 z-10"></span>
+            </a>
             <div class="product-teaser__label-included">
                 {ep:nightsOptions(options: nights, daytrip: daytrip)}{f:if(condition: including, then: ' inkl.')}
             </div>
             <ul class="product-teaser__list-included flex-1 list-none m-0 text-zinc-800 divide-y divide-zinc-400">
                 {including -> f:format.raw()}
             </ul>
-            <div class="pt-8">
-                <div class="bg-button text-white font-bold px-4 py-1 group-hover:bg-button transition-colors">
-                    <div class="lg:inline-block">
-                        ab <span class="product-teaser__price mx-1">{minPrice} €</span>
-                    </div>
-                    <div class="product-teaser__label-price">
-                        p. P.{f:if(condition: '{season} == "w"', then: ' / inkl. Skipass')}
-                    </div>
+            <div class="mt-8 bg-ep-primary-dark text-white font-bold px-4 py-1 peer-hover:bg-ep-secondary peer-hover:text-gray-900 transition-colors">
+                <div class="lg:inline-block">
+                    ab <span class="product-teaser__price mx-1">{minPrice} €</span>
+                </div>
+                <div class="product-teaser__label-price">
+                    p. P.{f:if(condition: '{season} == "w"', then: ' / inkl. Skipass')}
                 </div>
             </div>
-        </a>
+        </div>
     </f:section>
 
     <f:section name="Including">