EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: various a11y improvements

Browse Source
This commit is contained in:
Björn Fromme
2025-06-22 17:06:40 +02:00
parent 367c20438e
commit 7389b91232
6 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+1 -1
View File
@@ -38,7 +38,7 @@
} }
&--muted { &--muted {
@apply bg-zinc-300 hover:bg-zinc-300; @apply bg-zinc-300 text-gray-900 hover:bg-zinc-300;
} }
&--dark { &--dark {
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
+4 -4
View File
@@ -16,10 +16,10 @@
<table class="min-w-full border border-zinc-200 border-collapse mb-8"> <table class="min-w-full border border-zinc-200 border-collapse mb-8">
<thead> <thead>
<tr> <tr>
<th class="text-left"> <th class="text-left" scope="col">
Zimmertyp Zimmertyp
</th> </th>
<th class="text-left"> <th class="text-left" scope="col">
Preis/Pers. Preis/Pers.
</th> </th>
<f:if condition="{hasIncludedServices}"> <f:if condition="{hasIncludedServices}">
@@ -27,8 +27,8 @@
inkl. inkl.
</th> </th>
</f:if> </f:if>
<th></th> <th scope="col" aria-label="Links zu optionalen Zusatzleistungen"></th>
<th class="hidden lg:table-cell"></th> <th class="hidden lg:table-cell" scope="col" aria-label="Links zur Buchung"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
+2 -2
View File
@@ -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')} {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:if condition="{hotel}">
<f:then> <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')} {ep:icon(icon: 'location-marker', class: 'w-4 h-4 md:w-6 md:h-6 text-white')}
</a> </a>
</f:then> </f:then>
<f:else> <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')} {ep:icon(icon: 'location-marker', class: 'w-4 h-4 md:w-6 md:h-6 text-white')}
</a> </a>
</f:else> </f:else>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
+1 -1
View File
@@ -25,7 +25,7 @@
<f:if condition="{settings.topNavPid}"> <f:if condition="{settings.topNavPid}">
<div class="flex-1 flex items-center"> <div class="flex-1 flex items-center">
<f:for each="{topnav}" as="menuitem"> <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"')}> href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}>
{menuitem.title} {menuitem.title}
</a> </a>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
+15 -15
View File
@@ -29,21 +29,21 @@
<table class="w-full mb-4 bg-zinc-200"> <table class="w-full mb-4 bg-zinc-200">
<thead> <thead>
<tr> <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 Termin
</th> </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 Nächte
</th> </th>
<f:if condition="{hasIncludedServices}"> <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 inklusive
</th> </th>
</f:if> </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 ab
</th> </th>
<th></th> <th scope="col" aria-label="Links zur Buchung"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -54,7 +54,7 @@
<f:if condition="{bookable} && {row.available} && {row.showBookingButton}"> <f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
<f:then> <f:then>
<button type="button" <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-action="product-details#loadPrices"
data-product-details-prices-url-param="{ep:uri.ajax( data-product-details-prices-url-param="{ep:uri.ajax(
action: 'pricetable', action: 'pricetable',
@@ -117,7 +117,7 @@
</f:if> </f:if>
</div> </div>
<button type="button" <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-action="pricetable#openModal"
data-pricetable-type-param="services" data-pricetable-type-param="services"
data-pricetable-uid-param="{row.dateUid}" data-pricetable-uid-param="{row.dateUid}"
@@ -146,7 +146,7 @@
<f:if condition="{row.showBookingButton}"> <f:if condition="{row.showBookingButton}">
<f:then> <f:then>
<button type="button" <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-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)}"> 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"> <svg class="w-6 h-6 hidden md:block">
@@ -160,7 +160,7 @@
<f:else> <f:else>
<a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}" <a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
title="Reisen-Alert" 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"> <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> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg> </svg>
@@ -181,7 +181,7 @@
<li class="py-2"> <li class="py-2">
<button type="button" <button type="button"
data-action="pricetable#toggleSurcharge" 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"> <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> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg> </svg>
@@ -197,7 +197,7 @@
<li class="py-2"> <li class="py-2">
<button type="button" <button type="button"
data-action="pricetable#toggleDiscount" 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"> <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> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg> </svg>
@@ -212,7 +212,7 @@
<f:if condition="{bookableDates -> f:count()} > 5"> <f:if condition="{bookableDates -> f:count()} > 5">
<li class="py-2"> <li class="py-2">
<button type="button" <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"> data-action="pricetable#toggleRows">
<svg class="w-6 h-6"> <svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-plus-circle" <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"> <li class="py-2">
<a href="{altProductLink}" <a href="{altProductLink}"
title="{altLabel}" 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"> <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> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg> </svg>
@@ -248,7 +248,7 @@
<div class="absolute inset-0 w-full h-full bg-black/85 z-25" <div class="absolute inset-0 w-full h-full bg-black/85 z-25"
data-action="click->modal#close"></div> 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="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"> <span class="text-xl font-bold">
Inklusivleistungen {hotel.name} Inklusivleistungen {hotel.name}
</span> </span>
@@ -270,7 +270,7 @@
<tr> <tr>
<td> <td>
<div class="flex items-center space-x-2"> <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> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-check"></use>
</svg> </svg>
<span>{service}</span> <span>{service}</span>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
+11 -11
View File
@@ -25,11 +25,11 @@
<table class="w-full mb-4 bg-zinc-200"> <table class="w-full mb-4 bg-zinc-200">
<thead> <thead>
<tr> <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} Zimmertyp {dateRange}
</th> </th>
<f:if condition="{hasIncludedServices}"> <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"> <span class="lg:hidden">
inkl. inkl.
</span> </span>
@@ -38,10 +38,10 @@
</span> </span>
</th> </th>
</f:if> </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 optional
</th> </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 Preis/Buchen
</th> </th>
</tr> </tr>
@@ -67,7 +67,7 @@
<li class="py-2"> <li class="py-2">
<button type="button" <button type="button"
data-action="pricetable#toggleSurcharge" 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"> <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> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg> </svg>
@@ -83,7 +83,7 @@
<li class="py-2"> <li class="py-2">
<button type="button" <button type="button"
data-action="pricetable#toggleDiscount" 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"> <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> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg> </svg>
@@ -99,7 +99,7 @@
<f:else> <f:else>
<li class="py-2"> <li class="py-2">
<button type="button" <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"> data-action="product-details#showDates">
<svg class="w-6 h-6"> <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> <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"> <ul class="list-none m-0 p-0 flex-1">
<f:for each="{servicesIncluded}" as="service"> <f:for each="{servicesIncluded}" as="service">
<li class="flex items-center space-x-2"> <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> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-check"></use>
</svg> </svg>
<span>{service}</span> <span>{service}</span>
@@ -152,7 +152,7 @@
<div class="absolute inset-0 w-full h-full bg-black/85 z-25" <div class="absolute inset-0 w-full h-full bg-black/85 z-25"
data-action="click->modal#close"></div> 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="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"> <span class="text-xl font-bold">
Optionale Zusatzleistungen Optionale Zusatzleistungen
</span> </span>
@@ -179,7 +179,7 @@
<td class="border-r border-zinc-200 px-2 py-1 md:p-2"> <td class="border-r border-zinc-200 px-2 py-1 md:p-2">
<f:if condition="{row.showBookingButton} && {row.available}"> <f:if condition="{row.showBookingButton} && {row.available}">
<f:then> <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}" href="{row.bookingUrl}"
data-controller="datalayer" data-datalayer-event-value="ZurBuchung" data-datalayer-action="trigger" data-controller="datalayer" data-datalayer-event-value="ZurBuchung" data-datalayer-action="trigger"
target="_blank" target="_blank"
@@ -241,7 +241,7 @@
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center"> <td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">
<f:if condition="{row.hasOptionalServices} && {row.available}"> <f:if condition="{row.hasOptionalServices} && {row.available}">
<button type="button" <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-action="pricetable#openModal"
data-pricetable-type-param="options" data-pricetable-type-param="options"
data-pricetable-uid-param="{row.roomUid}" data-pricetable-uid-param="{row.roomUid}"