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

---
 .../Assets/scss/components/_buttons.scss      |  2 +-
 .../Private/Partials/Pricetable.html          |  8 ++---
 .../Partials/Product/HeaderDetail.html        |  4 +--
 .../Resources/Private/Partials/Topnav.html    |  2 +-
 .../Templates/AjaxTable/Datestable.html       | 30 +++++++++----------
 .../Templates/AjaxTable/Pricetable.html       | 22 +++++++-------
 6 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
index 1dc210bf..3362624f 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
@@ -38,7 +38,7 @@
     }
 
     &--muted {
-        @apply bg-zinc-300 hover:bg-zinc-300;
+        @apply bg-zinc-300 text-gray-900 hover:bg-zinc-300;
     }
 
     &--dark {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
index 2b6a999b..2c1dfe72 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
@@ -16,10 +16,10 @@
                 <table class="min-w-full border border-zinc-200 border-collapse mb-8">
                     <thead>
                     <tr>
-                        <th class="text-left">
+                        <th class="text-left" scope="col">
                             Zimmertyp
                         </th>
-                        <th class="text-left">
+                        <th class="text-left" scope="col">
                             Preis/Pers.
                         </th>
                         <f:if condition="{hasIncludedServices}">
@@ -27,8 +27,8 @@
                                 inkl.
                             </th>
                         </f:if>
-                        <th></th>
-                        <th class="hidden lg:table-cell"></th>
+                        <th scope="col" aria-label="Links zu optionalen Zusatzleistungen"></th>
+                        <th class="hidden lg:table-cell" scope="col" aria-label="Links zur Buchung"></th>
                     </tr>
                     </thead>
                     <tbody>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
index f6e2ac73..6f866809 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
@@ -34,12 +34,12 @@
                             {ep:icon(icon: 'flag-{product.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 md:w-10 md:h-8')}
                             <f:if condition="{hotel}">
                                 <f:then>
-                                    <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
+                                    <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1" title="Öffnen auf Google Maps">
                                         {ep:icon(icon: 'location-marker', class: 'w-4 h-4 md:w-6 md:h-6 text-white')}
                                     </a>
                                 </f:then>
                                 <f:else>
-                                    <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
+                                    <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="block bg-ep-primary-light px-2 py-1" title="Öffnen auf Google Maps">
                                         {ep:icon(icon: 'location-marker', class: 'w-4 h-4 md:w-6 md:h-6 text-white')}
                                     </a>
                                 </f:else>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
index e68155e7..424b36af 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
@@ -25,7 +25,7 @@
                         <f:if condition="{settings.topNavPid}">
                             <div class="flex-1 flex items-center">
                                 <f:for each="{topnav}" as="menuitem">
-                                    <a class="topnav__item flex-grow{f:if(condition: menuitem.data.tx_eptheme_navitemclass, then: ' {menuitem.data.tx_eptheme_navitemclass}')}{f:if(condition: '{menuitem.active} || {menuitem.data.uid} == {settings.forceActiveTopnavUid}', then: ' bg-ep-secondary')}"
+                                    <a class="topnav__item flex-grow{f:if(condition: menuitem.data.tx_eptheme_navitemclass, then: ' {menuitem.data.tx_eptheme_navitemclass}')}{f:if(condition: '{menuitem.active} || {menuitem.data.uid} == {settings.forceActiveTopnavUid}', then: ' bg-ep-secondary text-gray-900')}"
                                        href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}>
                                         {menuitem.title}
                                     </a>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
index 3a003359..7cf7d176 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
@@ -29,21 +29,21 @@
                 <table class="w-full mb-4 bg-zinc-200">
                     <thead>
                         <tr>
-                            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
+                            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base" scope="col">
                                 Termin
                             </th>
-                            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
+                            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base" scope="col">
                                 Nächte
                             </th>
                             <f:if condition="{hasIncludedServices}">
-                                <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
+                                <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base" scope="col">
                                     inklusive
                                 </th>
                             </f:if>
-                            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
+                            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base" scope="col">
                                 ab
                             </th>
-                            <th></th>
+                            <th scope="col" aria-label="Links zur Buchung"></th>
                         </tr>
                     </thead>
                     <tbody>
@@ -54,7 +54,7 @@
                                 <f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
                                     <f:then>
                                         <button type="button"
-                                                class="text-left text-ep-primary-light ser:text-ser-primary text-sm md:text-base"
+                                                class="text-left text-ep-primary-dark ser:text-ser-primary-dark text-sm md:text-base"
                                                 data-action="product-details#loadPrices"
                                                 data-product-details-prices-url-param="{ep:uri.ajax(
                                                     action: 'pricetable',
@@ -117,7 +117,7 @@
                                             </f:if>
                                         </div>
                                         <button type="button"
-                                                class="text-ep-primary-light ser:text-ser-primary col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
+                                                class="text-ep-primary-dark ser:text-ser-primary-dark col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
                                                 data-action="pricetable#openModal"
                                                 data-pricetable-type-param="services"
                                                 data-pricetable-uid-param="{row.dateUid}"
@@ -146,7 +146,7 @@
                                 <f:if condition="{row.showBookingButton}">
                                     <f:then>
                                         <button type="button"
-                                                class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light ser:text-ser-primary', else: 'text-zinc-300')}"
+                                                class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-dark ser:text-ser-primary-dark', else: 'text-zinc-300')}"
                                                 data-action="product-details#loadPrices"
                                                 data-product-details-prices-url-param="{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel, date: row.dateUid}', format: 'html', pageUid: settings.defaultAjaxUid)}">
                                             <svg class="w-6 h-6 hidden md:block">
@@ -160,7 +160,7 @@
                                     <f:else>
                                         <a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
                                            title="Reisen-Alert"
-                                           class="flex space-x-1 items-center text-ep-primary-light ser:text-ser-primary">
+                                           class="flex space-x-1 items-center text-ep-primary-dark ser:text-ser-primary-dark">
                                             <svg class="w-6 h-6 hidden md:block">
                                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
                                             </svg>
@@ -181,7 +181,7 @@
                         <li class="py-2">
                         <button type="button"
                                 data-action="pricetable#toggleSurcharge"
-                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary">
+                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-dark ser:text-ser-primary-dark">
                             <svg class="w-6 h-6">
                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
                             </svg>
@@ -197,7 +197,7 @@
                         <li class="py-2">
                         <button type="button"
                                 data-action="pricetable#toggleDiscount"
-                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary">
+                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-dark ser:text-ser-primary-dark">
                             <svg class="w-6 h-6">
                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
                             </svg>
@@ -212,7 +212,7 @@
                     <f:if condition="{bookableDates -> f:count()} > 5">
                         <li class="py-2">
                         <button type="button"
-                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary"
+                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-dark ser:text-ser-primary-dark"
                                 data-action="pricetable#toggleRows">
                             <svg class="w-6 h-6">
                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-plus-circle"
@@ -228,7 +228,7 @@
                         <li class="py-2">
                         <a href="{altProductLink}"
                            title="{altLabel}"
-                           class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary">
+                           class="flex items-center space-x-1 focus:outline-none text-ep-primary-dark ser:text-ser-primary-dark">
                             <svg class="w-6 h-6">
                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
                             </svg>
@@ -248,7 +248,7 @@
             <div class="absolute inset-0 w-full h-full bg-black/85 z-25"
                  data-action="click->modal#close"></div>
             <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
-                <div class="shadow flex items-center justify-between p-4 bg-ep-primary-light ser:bg-ser-primary text-white rounded-t">
+                <div class="shadow flex items-center justify-between p-4 bg-ep-primary-dark ser:bg-ser-primary-dark text-white rounded-t">
                     <span class="text-xl font-bold">
                         Inklusivleistungen {hotel.name}
                     </span>
@@ -270,7 +270,7 @@
                                     <tr>
                                         <td>
                                             <div class="flex items-center space-x-2">
-                                                <svg class="w-6 h-6 text-ep-primary">
+                                                <svg class="w-6 h-6 text-ep-primary-dark">
                                                     <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-check"></use>
                                                 </svg>
                                                 <span>{service}</span>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
index 9d0dd508..ad24fba4 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
@@ -25,11 +25,11 @@
             <table class="w-full mb-4 bg-zinc-200">
                 <thead>
                     <tr>
-                        <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
+                        <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base" scope="col">
                             Zimmertyp {dateRange}
                         </th>
                         <f:if condition="{hasIncludedServices}">
-                            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
+                            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base" scope="col">
                                 <span class="lg:hidden">
                                     inkl.
                                 </span>
@@ -38,10 +38,10 @@
                                 </span>
                             </th>
                         </f:if>
-                        <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
+                        <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base" scope="col">
                             optional
                         </th>
-                        <th class="px-2 py-1 md:p-2 text-sm md:text-base">
+                        <th class="px-2 py-1 md:p-2 text-sm md:text-base" scope="col">
                             Preis/Buchen
                         </th>
                     </tr>
@@ -67,7 +67,7 @@
                     <li class="py-2">
                         <button type="button"
                                 data-action="pricetable#toggleSurcharge"
-                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
+                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-dark">
                             <svg class="w-6 h-6">
                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
                             </svg>
@@ -83,7 +83,7 @@
                     <li class="py-2">
                         <button type="button"
                                 data-action="pricetable#toggleDiscount"
-                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
+                                class="flex items-center space-x-1 focus:outline-none text-ep-primary-dark">
                             <svg class="w-6 h-6">
                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
                             </svg>
@@ -99,7 +99,7 @@
                     <f:else>
                         <li class="py-2">
                             <button type="button"
-                                    class="flex items-center space-x-1 focus:outline-none text-ep-primary-light"
+                                    class="flex items-center space-x-1 focus:outline-none text-ep-primary-dark"
                                     data-action="product-details#showDates">
                                 <svg class="w-6 h-6">
                                     <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-left"></use>
@@ -119,7 +119,7 @@
                 <ul class="list-none m-0 p-0 flex-1">
                     <f:for each="{servicesIncluded}" as="service">
                         <li class="flex items-center space-x-2">
-                            <svg class="w-6 h-6 text-ep-primary">
+                            <svg class="w-6 h-6 text-ep-primary-dark">
                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-check"></use>
                             </svg>
                             <span>{service}</span>
@@ -152,7 +152,7 @@
             <div class="absolute inset-0 w-full h-full bg-black/85 z-25"
                  data-action="click->modal#close"></div>
             <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
-                <div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t">
+                <div class="shadow flex items-center justify-between p-4 bg-ep-primary-dark text-white rounded-t">
                     <span class="text-xl font-bold">
                         Optionale Zusatzleistungen
                     </span>
@@ -179,7 +179,7 @@
             <td class="border-r border-zinc-200 px-2 py-1 md:p-2">
                 <f:if condition="{row.showBookingButton} && {row.available}">
                     <f:then>
-                        <a class="inline-block text-ep-primary-light text-xs sm:text-sm md:text-base leading-tight"
+                        <a class="inline-block text-ep-primary-dark text-xs sm:text-sm md:text-base leading-tight"
                            href="{row.bookingUrl}"
                            data-controller="datalayer" data-datalayer-event-value="ZurBuchung" data-datalayer-action="trigger"
                            target="_blank"
@@ -241,7 +241,7 @@
             <td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">
                 <f:if condition="{row.hasOptionalServices} && {row.available}">
                     <button type="button"
-                            class="text-ep-primary-light text-sm md:text-base text-left leading-none p-1"
+                            class="text-ep-primary-dark text-sm md:text-base text-left leading-none p-1"
                             data-action="pricetable#openModal"
                             data-pricetable-type-param="options"
                             data-pricetable-uid-param="{row.roomUid}"