feat: make teasers more accessible for screen readers
This commit is contained in:
Björn Fromme
@@ -26,6 +26,13 @@
|
|||||||
@apply suz:hover:bg-suz-primary-dark;
|
@apply suz:hover:bg-suz-primary-dark;
|
||||||
@apply uch:hover:bg-uch-primary-dark;
|
@apply uch:hover:bg-uch-primary-dark;
|
||||||
@apply ser:hover:bg-ser-primary;
|
@apply ser:hover:bg-ser-primary;
|
||||||
|
@apply peer-hover:bg-ep-secondary;
|
||||||
|
@apply peer-hover:text-gray-900;
|
||||||
|
@apply sbw:peer-hover:bg-sbw-primary-dark;
|
||||||
|
@apply snz:peer-hover:bg-snz-primary-dark;
|
||||||
|
@apply suz:peer-hover:bg-suz-primary-dark;
|
||||||
|
@apply uch:peer-hover:bg-uch-primary-dark;
|
||||||
|
@apply ser:peer-hover:bg-ser-primary;
|
||||||
|
|
||||||
&--active,
|
&--active,
|
||||||
&--secondary {
|
&--secondary {
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||||
|
|
||||||
<f:section name="Teaser">
|
<f:section name="Teaser">
|
||||||
<a href="{f:uri.typolink(parameter: city.detailPage)}" class="flex flex-col">
|
<div class="relative flex flex-col">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
{ep:icon(icon: 'flag-{city.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
|
{ep:icon(icon: 'flag-{city.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
|
||||||
<f:alias map="{teaserImage: city.teaserImage, defaultImage: city.images.0}">
|
<f:alias map="{teaserImage: city.teaserImage, defaultImage: city.images.0}">
|
||||||
@@ -34,17 +34,19 @@
|
|||||||
</f:if>
|
</f:if>
|
||||||
</f:alias>
|
</f:alias>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-zinc-200">
|
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
|
||||||
<span class="headline--3 mb-4">
|
<a href="{f:uri.typolink(parameter: city.detailPage)}" class="px-2 peer headline--3 mb-4 no-underline">
|
||||||
{city.name}
|
{city.name}
|
||||||
</span>
|
<span class="absolute inset-0"></span>
|
||||||
{city.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
</a>
|
||||||
|
<div class="flex-1 px-2 text-zinc-800" data-rte-content>
|
||||||
|
{city.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
||||||
|
</div>
|
||||||
|
<div class="button bg-button w-full">
|
||||||
|
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="button"
|
</div>
|
||||||
class="button bg-button w-full">
|
|
||||||
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
|
|
||||||
</button>
|
|
||||||
</a>
|
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||||
|
|
||||||
<f:section name="Teaser">
|
<f:section name="Teaser">
|
||||||
<a href="{f:uri.typolink(parameter: hotel.detailPage)}" class="flex flex-col">
|
<div class="relative flex flex-col">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
{ep:icon(icon: 'flag-{hotel.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
|
{ep:icon(icon: 'flag-{hotel.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
|
||||||
<f:if condition="{hotel.images.original.0}">
|
<f:if condition="{hotel.images.original.0}">
|
||||||
@@ -25,27 +25,29 @@
|
|||||||
</f:else>
|
</f:else>
|
||||||
</f:if>
|
</f:if>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-zinc-200">
|
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
|
||||||
<span class="headline--3 mb-4">
|
<a href="{f:uri.typolink(parameter: hotel.detailPage)}" class="px-2 peer headline--3 mb-4 no-underline">
|
||||||
{hotel.name -> f:format.nl2br()}
|
{hotel.name -> f:format.nl2br()}
|
||||||
</span>
|
<span class="absolute inset-0"></span>
|
||||||
|
</a>
|
||||||
<f:if condition="{hotel.category}">
|
<f:if condition="{hotel.category}">
|
||||||
<span class="searchresult-item__category">
|
<span class="searchresult-item__category">
|
||||||
<strong>Kategorie</strong> {hotel.category}
|
<strong>Kategorie</strong> {hotel.category}
|
||||||
</span>
|
</span>
|
||||||
</f:if>
|
</f:if>
|
||||||
{hotel.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
<div class="flex-1 px-2 text-zinc-800" data-rte-content>
|
||||||
<f:if condition="{hotel.available} != -1">
|
{hotel.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
||||||
<span class="teaserbox__price">
|
<f:if condition="{hotel.available} != -1">
|
||||||
<strong>{f:if(condition: '{hotel.available} > 0', then: 'ab {hotel.minPrice} €', else: 'aktuell nicht buchbar')}</strong>
|
<span class="teaserbox__price">
|
||||||
</span>
|
<strong>{f:if(condition: '{hotel.available} > 0', then: 'ab {hotel.minPrice} €', else: 'aktuell nicht buchbar')}</strong>
|
||||||
</f:if>
|
</span>
|
||||||
|
</f:if>
|
||||||
|
</div>
|
||||||
|
<div class="button bg-button w-full">
|
||||||
|
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="button"
|
</div>
|
||||||
class="button bg-button w-full">
|
|
||||||
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
|
|
||||||
</button>
|
|
||||||
</a>
|
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
|
|
||||||
<div class="mb-8">
|
<div class="mb-8">
|
||||||
<n:excludeDisplayedNews newsItem="{newsItem}"/>
|
<n:excludeDisplayedNews newsItem="{newsItem}"/>
|
||||||
<div class="flex flex-col md:flex-row md:space-x-8">
|
<div class="relative flex flex-col md:flex-row md:space-x-8">
|
||||||
<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}" class="mb-4 md:w-1/2">
|
<div class="mb-4 md:w-1/2">
|
||||||
<f:if condition="{newsItem.mediaPreviews}">
|
<f:if condition="{newsItem.mediaPreviews}">
|
||||||
<f:then>
|
<f:then>
|
||||||
<f:if condition="{newsItem.mediaPreviews.0}">
|
<f:if condition="{newsItem.mediaPreviews.0}">
|
||||||
@@ -26,13 +26,14 @@
|
|||||||
</f:if>
|
</f:if>
|
||||||
</f:else>
|
</f:else>
|
||||||
</f:if>
|
</f:if>
|
||||||
</n:link>
|
</div>
|
||||||
<div class="md:flex-1">
|
<div class="md:flex-1">
|
||||||
<h3 class="blog-entry__headline">
|
<a href="{f:uri.typolink(parameter: newsItem.newsLink)}" class="peer">
|
||||||
<n:link newsItem="{newsItem}" settings="{settings}">
|
<h3 class="blog-entry__headline">
|
||||||
{newsItem.title}
|
{newsItem.title}
|
||||||
</n:link>
|
</h3>
|
||||||
</h3>
|
<span class="absolute inset-0"></span>
|
||||||
|
</a>
|
||||||
<p class="text-sm italic mb-4">
|
<p class="text-sm italic mb-4">
|
||||||
<f:if condition="{newsItem.author}">{newsItem.author} am </f:if>
|
<f:if condition="{newsItem.author}">{newsItem.author} am </f:if>
|
||||||
<time datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}"><f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date></time>
|
<time datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}"><f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date></time>
|
||||||
@@ -57,9 +58,9 @@
|
|||||||
</f:if>
|
</f:if>
|
||||||
</div>
|
</div>
|
||||||
</n:removeMediaTags>
|
</n:removeMediaTags>
|
||||||
<n:link newsItem="{newsItem}" settings="{settings}" class="button bg-button button--small">
|
<div class="button bg-button button--small">
|
||||||
<f:translate key="more-link"/>
|
<f:translate key="more-link"/>
|
||||||
</n:link>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||||
|
|
||||||
<f:section name="Teaser">
|
<f:section name="Teaser">
|
||||||
<a href="{f:uri.typolink(parameter: region.detailPage)}" title="{region.name}" class="flex flex-col">
|
<div class="relative flex flex-col">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
{ep:icon(icon: 'flag-{region.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
|
{ep:icon(icon: 'flag-{region.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
|
||||||
<f:alias map="{teaserImage: region.teaserImage, defaultImage: region.images.0}">
|
<f:alias map="{teaserImage: region.teaserImage, defaultImage: region.images.0}">
|
||||||
@@ -34,17 +34,19 @@
|
|||||||
</f:if>
|
</f:if>
|
||||||
</f:alias>
|
</f:alias>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-zinc-200" data-rte-content>
|
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
|
||||||
<span class="headline--3 mb-4">
|
<a href="{f:uri.typolink(parameter: region.detailPage)}" class="px-2 peer headline--3 mb-4 no-underline">
|
||||||
{region.name}
|
{region.name}
|
||||||
</span>
|
<span class="absolute inset-0"></span>
|
||||||
{region.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
</a>
|
||||||
|
<div class="flex-1 px-2 text-zinc-800" data-rte-content>
|
||||||
|
{region.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
|
||||||
|
</div>
|
||||||
|
<div class="button bg-button w-full">
|
||||||
|
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="button"
|
</div>
|
||||||
class="button bg-button w-full">
|
|
||||||
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
|
|
||||||
</button>
|
|
||||||
</a>
|
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -4,31 +4,31 @@
|
|||||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||||
|
|
||||||
<f:section name="Teaser">
|
<f:section name="Teaser">
|
||||||
<a href="{f:uri.typolink(parameter: data.header_link)}" class="flex flex-col group">
|
<div class="relative flex flex-col">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<f:if condition="{context.country}">
|
<f:if condition="{context.country}">
|
||||||
{ep:icon(icon: 'flag-{context.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
|
{ep:icon(icon: 'flag-{context.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
|
||||||
</f:if>
|
</f:if>
|
||||||
<ep:lazyLoadImage image="{teaserImage}"
|
<ep:lazyLoadImage image="{teaserImage}"
|
||||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||||
class="block w-full h-full object-cover"
|
class="block w-full h-full object-cover"
|
||||||
width="400c"
|
width="400c"
|
||||||
height="300c"
|
height="300c"
|
||||||
alt="{teaserImage.alternative}" />
|
alt="{teaserImage.alternative}" />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-zinc-200" data-rte-content>
|
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
|
||||||
<span class="headline--3 mb-4">
|
<a href="{f:uri.typolink(parameter: data.header_link)}" class="px-2 peer headline--3 mb-4 no-underline">
|
||||||
{data.header -> f:format.nl2br()}{f:if(condition: data.subheader, then: '<br>{data.subheader}')}
|
{data.header -> f:format.nl2br()}{f:if(condition: data.subheader, then: '<br>{data.subheader}')}
|
||||||
</span>
|
<span class="absolute inset-0"></span>
|
||||||
<div class="text-zinc-800">
|
</a>
|
||||||
|
<div class="flex-1 px-2 text-zinc-800" data-rte-content>
|
||||||
{data.bodytext -> f:format.html()}
|
{data.bodytext -> f:format.html()}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="button bg-button w-full">
|
||||||
|
{data.button -> v:or(alternative: 'Details')}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="button"
|
</div>
|
||||||
class="button bg-button w-full">
|
|
||||||
{data.button -> v:or(alternative: 'Details')}
|
|
||||||
</button>
|
|
||||||
</a>
|
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -4,22 +4,24 @@
|
|||||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||||
|
|
||||||
<f:section name="Teaser">
|
<f:section name="Teaser">
|
||||||
<a href="{f:uri.typolink(parameter: data.header_link)}" class="teaserbox teaserbox--default group">
|
<div class="relative teaserbox teaserbox--default">
|
||||||
<div class="teasebox__image">
|
<div class="teasebox__image">
|
||||||
<f:render partial="TeaserImage" arguments="{image: teaserImage}"/>
|
<f:render partial="TeaserImage" arguments="{image: teaserImage}"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="teaserbox__main" data-rte-content>
|
<div class="teaserbox__main">
|
||||||
<span class="headline headline--3 headline--teaser">
|
<a href="{f:uri.typolink(parameter: data.header_link)}" class="headline headline--3 headline--teaser no-underline">
|
||||||
{data.header -> f:format.nl2br()}{f:if(condition: data.subheader, then: '<br>{data.subheader}')}
|
{data.header -> f:format.nl2br()}{f:if(condition: data.subheader, then: '<br>{data.subheader}')}
|
||||||
</span>
|
<span class="absolute inset-0"></span>
|
||||||
|
</a>
|
||||||
<hr>
|
<hr>
|
||||||
{data.bodytext -> f:format.html()}
|
<div class="text-zinc-800" data-rte-content>
|
||||||
|
{data.bodytext -> f:format.html()}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="button"
|
<div class="button bg-button button--full">
|
||||||
class="button bg-button button--full">
|
|
||||||
{data.button -> v:or(alternative: 'Details')}
|
{data.button -> v:or(alternative: 'Details')}
|
||||||
</button>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user