feat: various a11y improvements
This commit is contained in:
Björn Fromme
+1
-1
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
+15
-15
@@ -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>
|
||||
|
||||
+11
-11
@@ -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}"
|
||||
|
||||
Reference in New Issue
Block a user