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 12:22:19 +02:00
parent 5c8bde2e46
commit a11dd1c8a0
16 changed files with 85 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Configuration/TypoScript/Library/Breadcrumb.typoscript
+2 -3
View File
@@ -3,12 +3,11 @@ lib.breadcrumb {
special = rootline
special.range = 0|-1
1 = TMENU
1.wrap = <div class="hidden md:flex container mb-8 text-sm text-zinc-400">|</div>
1.wrap = <div class="hidden md:flex container mb-8 text-sm">|</div>
1.NO {
stdWrap.htmlSpecialChars = 1
ATagParams = class="text-zinc-400"
ATagTitle.field = nav_title // title
linkWrap = |<span class="text-zinc-400 px-1">/</span>|*||*| |
linkWrap = |<span class="px-1">/</span>|*||*| |
doNotLinkIt = |*| 0 |*| 1
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_components.scss
-1
View File
@@ -10,5 +10,4 @@
@import "components/misc";
@import "components/searchbar";
@import "components/teaser";
@import "components/tiles";
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss
+1 -1
View File
@@ -22,7 +22,7 @@ p {
}
a:not(.button):not(.rte-button):not(.rte-button--full) {
@apply text-ep-primary-dark sbw:text-sbw-primary-dark;
@apply underline text-ep-primary-dark sbw:text-sbw-primary-dark;
.bg-brand-gradient & {
@apply text-white underline;
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+2 -1
View File
@@ -1,7 +1,7 @@
.button {
@apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer;
@apply uppercase leading-none text-center;
@apply transition-colors outline-none focus:outline-none;
@apply transition-colors outline-none;
&--small {
@apply px-2 py-1 md:px-4 text-xs sm:text-sm;
@@ -20,6 +20,7 @@
@apply uch:bg-uch-secondary;
@apply ser:bg-ser-secondary;
@apply hover:bg-ep-secondary;
@apply hover:text-gray-900;
@apply sbw:hover:bg-sbw-primary-dark;
@apply snz:hover:bg-snz-primary-dark;
@apply suz:hover:bg-suz-primary-dark;
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss
-47
View File
@@ -1,47 +0,0 @@
.tiles {
@apply container lg:max-w-screen-2xl;
}
.tiles__grid {
@apply grid grid-cols-1 lg:grid-cols-12 lg:grid-rows-3 lg:grid-flow-col gap-4 lg:gap-1;
@apply lg:h-128;
@apply bg-white;
}
.tiles__tile {
@apply bg-cover bg-center h-32 lg:h-auto;
}
.tiles__link {
@apply relative w-full h-full flex items-center justify-center;
@apply leading-none text-white hover:text-white text-2xl font-bold uppercase text-shadow break-normal;
&:before {
@apply block absolute top-0 left-0 inset-0 w-full h-full z-20;
@apply border-0 border-white;
@apply transition-all;
content: "";
}
&:hover:before {
@apply mt-4 ml-4;
@apply border-2;
width: calc(100% - theme('spacing.8'));
height: calc(100% - theme('spacing.8'));
}
&:after {
@apply block absolute top-0 left-0 inset-0 w-full h-full z-10;
@apply transition-all;
content:"";
}
&:hover:after {
@apply sbw:bg-sbw-overlay/55 uch:bg-uch-overlay/55;
}
}
.tiles__label {
@apply block relative z-20;
@apply text-center;
}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
+3 -7
View File
@@ -9,7 +9,7 @@
section="Top1"
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
</f:if>
<div class="relative container grid grid-cols-2 gap-8 py-4" data-rte-content>
<div class="relative container grid grid-cols-2 gap-8 py-4">
<div class="col-span-2 md:col-span-1">
<div class="relative max-w-md mx-auto mb-8">
<f:if condition="{image}">
@@ -36,12 +36,8 @@
</div>
</div>
<div class="col-span-2 md:col-span-1">
<span class="headline--secondary font-light text-white">
{data.subheadline}
</span>
<span class="headline--secondary uppercase font-light text-white mb-4">
{data.headline}
</span>
<span class="headline--secondary font-light text-white">{data.subheadline}</span>
<span class="headline--secondary uppercase font-light text-white mb-4">{data.headline}</span>
<div class="text-white" data-rte-content>
{data.bodytext -> f:format.html()}
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/LastChance.html
+6 -2
View File
@@ -8,8 +8,12 @@
section="Top1"
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
<div class="max-w-screen-lg mx-auto" data-rte-content>
<div>{data.headline}</div>
<div>{data.text -> f:format.html()}</div>
<div>
{data.headline}
</div>
<div>
{data.text -> f:format.html()}
</div>
<div>
{data.flexForm.buttons -> v:iterator.first() -> v:variable.set(name: 'button')}
<a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Reminder.html
+6 -4
View File
@@ -4,8 +4,10 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:alias map="{button: data.flexForm.buttons.0}">
<div class="container-fluid ep-disturber-reminder" data-rte-content>
<div>{data.headline}</div>
<div class="container-fluid ep-disturber-reminder">
<div data-rte-content>
{data.headline}
</div>
<div class="col-md-6">
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
<f:if condition="{image}">
@@ -17,8 +19,8 @@
</f:if>
</a>
</div>
<div class="col-md-6 ">
<div>{data.text -> f:format.html()}</div>
<div class="col-md-6" data-rte-content>
{data.text -> f:format.html()}
</div>
<a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info">
{button.container.label -> f:format.raw()}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
+2 -4
View File
@@ -7,7 +7,7 @@
<f:render partial="Disrupter/Outlines"
section="Top1"
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{background} == 1 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
<div class="max-w-screen-lg mx-auto py-4" data-rte-content>
<div class="max-w-screen-lg mx-auto py-4">
<div class="md:flex md:items-start py-4">
<div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
<f:if condition="{image}">
@@ -20,9 +20,7 @@
</f:if>
</div>
<div class="px-16 md:px-4 md:w-5/6 md:pl-8 text-center text-white md:text-left" data-rte-content>
<span class="headline--3 text-white uppercase">
{data.headline}
</span>
<span class="headline--3 text-white uppercase">{data.headline}</span>
{data.text -> f:format.html()}
<div class="flex flex-col space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-4">
<f:for each="{data.flexForm.buttons}" as="button" iteration="iteration">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
+4 -8
View File
@@ -10,7 +10,7 @@
section="Top1"
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{background} == 1 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
</f:if>
<div class="relative container grid grid-cols-2 gap-8 py-8" data-rte-content>
<div class="relative container grid grid-cols-2 gap-8 py-8">
<div class="col-span-2 md:col-span-1">
<div class="relative max-w-md mx-auto mb-8">
<f:if condition="{teaserImage}">
@@ -36,13 +36,9 @@
</a>
</div>
</div>
<div class="col-span-2 md:col-span-1">
<span class="headline--secondary font-light text-white">
{data.subheader}
</span>
<span class="headline--secondary uppercase font-light text-white mb-4">
{data.header}
</span>
<div class="col-span-2 md:col-span-1" data-rte-content>
<span class="headline--secondary font-light text-white">{data.subheader}</span>
<span class="headline--secondary uppercase font-light text-white mb-4">{data.header}</span>
<div class="text-white" data-rte-content>
{data.bodytext -> f:format.html()}
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/LastChance.html
+10 -4
View File
@@ -3,12 +3,18 @@
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="container-fluid ep-disturber-last-chance" data-rte-content>
<div>{data.header}</div>
<div>{data.bodytext -> f:format.html()}</div>
<div class="container-fluid ep-disturber-last-chance">
<div data-rte-content>
{data.header}
</div>
<div data-rte-content>
{data.bodytext -> f:format.html()}
</div>
<div>
{data.flexForm.buttons -> v:iterator.first() -> v:variable.set(name: 'button')}
<a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info">{button.container.label -> f:format.raw()}</a>
<a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info">
{button.container.label -> f:format.raw()}
</a>
</div>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Reminder.html
+8 -4
View File
@@ -4,8 +4,10 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:alias map="{button: data.flexForm.buttons.0}">
<div class="container-fluid ep-disturber-reminder" data-rte-content>
<div>{data.header}</div>
<div class="container-fluid ep-disturber-reminder">
<div data-rte-content>
{data.header}
</div>
<div class="col-md-6">
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
<f:if condition="{teaserImage}">
@@ -17,8 +19,10 @@
</f:if>
</a>
</div>
<div class="col-md-6 ">
<div>{data.bodytext -> f:format.html()}</div>
<div class="col-md-6" data-rte-content>
<div>
{data.bodytext -> f:format.html()}
</div>
</div>
<a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info">
{button.container.label -> f:format.raw()}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
+2 -4
View File
@@ -7,7 +7,7 @@
<f:render partial="Disrupter/Outlines"
section="Top1"
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
<div class="max-w-screen-lg mx-auto" data-rte-content>
<div class="max-w-screen-lg mx-auto">
<div class="md:flex md:items-start py-4">
<div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
<f:if condition="{teaserImage}">
@@ -20,9 +20,7 @@
</f:if>
</div>
<div class="px-16 md:px-4 md:w-5/6 md:pl-8 text-center text-white md:text-left" data-rte-content>
<span class="headline--3 text-white uppercase">
{data.header}
</span>
<span class="headline--3 text-white uppercase">{data.header}</span>
{data.bodytext -> f:format.html()}
<div class="flex flex-col space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-4">
<f:for each="{data.flexForm.buttons}" as="button" iteration="iteration">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+4 -4
View File
@@ -20,12 +20,12 @@
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:translate-y-1/2">
<div class="lg:container">
<div class="p-4 bg-ep-primary-dark/80 sbw:bg-sbw-primary/80 snz:bg-snz-primary/80 suz:bg-suz-primary/80 uch:bg-uch-primary/80 ser:bg-ser-primary/80 mb-4 md:p-8 md:max-w-2xl">
<span class="block text-xl md:text-2xl text-white uppercase">
<div class="text-xl md:text-2xl text-white uppercase">
{slide.headline}
</span>
<span class="block text-2xl md:text-3xl lg:text-4xl text-white uppercase">
</div>
<div class="text-2xl md:text-3xl lg:text-4xl text-white uppercase">
{slide.subline}
</span>
</div>
<f:if condition="{slide.button}">
<f:link.typolink parameter="{slide.page_uid}"
class="button bg-button inline-block">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/LinkPanel.html
+27 -32
View File
@@ -5,61 +5,56 @@
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:section name="Content">
<div class="tiles">
<div class="tiles__grid">
<div class="container lg:max-w-screen-2xl">
<div class="grid grid-cols-1 lg:grid-cols-12 lg:grid-rows-3 lg:grid-flow-col gap-4 lg:gap-1 lg:h-128 bg-white">
<f:if condition="{images.0}">
<div class="tiles__tile lg:col-span-2 lg:row-span-1"
style="background-image:url('{f:uri.image(image: images.0)}');">
<f:link.typolink parameter="{images.0.link}"
class="tiles__link">
<span class="tiles__label">
<div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1">
<f:link.typolink parameter="{images.0.link}" class="absolute inset-0 z-20 flex items-center justify-center">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.0.title -> f:format.raw()}
</span>
</div>
</f:link.typolink>
<f:image image="{images.0}" alt="{images.0.alternative}" class="w-full h-full object-cover" />
</div>
</f:if>
<f:if condition="{images.1}">
<div class="tiles__tile lg:col-span-2 lg:row-span-1"
style="background-image:url('{f:uri.image(image: images.1)}');">
<f:link.typolink parameter="{images.1.link}"
class="tiles__link">
<span class="tiles__label">
<div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1">
<f:link.typolink parameter="{images.1.link}" class="absolute inset-0 z-20 flex items-center justify-center">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.1.title -> f:format.raw()}
</span>
</div>
</f:link.typolink>
<f:image image="{images.1}" alt="{images.1.alternative}" class="w-full h-full object-cover" />
</div>
</f:if>
<f:if condition="{images.4}">
<div class="tiles__tile lg:col-span-12 lg:row-span-1"
style="background-image:url('{f:uri.image(image: images.4)}');">
<f:link.typolink parameter="{images.4.link}"
class="tiles__link">
<span class="tiles__label">
<div class="relative h-32 lg:h-auto lg:col-span-12 lg:row-span-1">
<f:link.typolink parameter="{images.4.link}" class="absolute inset-0 z-20 flex items-center justify-center">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.4.title -> f:format.raw()}
</span>
</div>
</f:link.typolink>
<f:image image="{images.4}" alt="{images.4.alternative}" class="w-full h-full object-cover" />
</div>
</f:if>
<f:if condition="{images.2}">
<div class="tiles__tile lg:col-span-4 lg:row-span-2"
style="background-image:url('{f:uri.image(image: images.2)}');">
<f:link.typolink parameter="{images.2.link}"
class="tiles__link">
<span class="tiles__label">
<div class="relative h-32 lg:h-auto lg:col-span-4 lg:row-span-2">
<f:link.typolink parameter="{images.2.link}" class="absolute inset-0 z-20 flex items-center justify-center">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.2.title -> f:format.raw()}
</span>
</div>
</f:link.typolink>
<f:image image="{images.2}" alt="{images.2.alternative}" class="w-full h-full object-cover" />
</div>
</f:if>
<f:if condition="{images.3}">
<div class="tiles__tile lg:col-span-6 lg:row-span-2"
style="background-image:url('{f:uri.image(image: images.3)}');">
<f:link.typolink parameter="{images.3.link}"
class="tiles__link">
<span class="tiles__label">
<div class="relative h-32 lg:h-auto lg:col-span-6 lg:row-span-2">
<f:link.typolink parameter="{images.3.link}" class="absolute inset-0 z-20 w-full h-full flex items-center justify-center">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.3.title -> f:format.raw()}
</span>
</div>
</f:link.typolink>
<f:image image="{images.3}" alt="{images.3.alternative}" class="w-full h-full object-cover" />
</div>
</f:if>
</div>
tailwind.config.js
+8 -8
View File
@@ -71,15 +71,15 @@ module.exports = {
primary: '#3d8ccb',
secondary: '#f9c700',
'primary-bg': '#ebf3fa',
'primary-light': '#0080ff',
'primary-light': '#0070E0',
'primary-medium': '#165883',
'primary-dark': '#18527b',
pink: '#fa1a8c',
},
sbw: {
primary: '#f0bc44',
secondary: '#ee525a',
'primary-dark': '#c7a20c',
primary: '#B3820F',
secondary: '#E91C26',
'primary-dark': '#8D7207',
overlay: '#c20000',
},
snz: {
@@ -88,14 +88,14 @@ module.exports = {
'primary-dark': '#82c3c6',
},
uch: {
primary: '#a6c62c',
primary: '#677A1A',
secondary: '#19a3dc',
'primary-dark': '#a6c62c',
overlay: '#a6c62c',
'primary-dark': '#677A1A',
overlay: '#677A1A',
},
ser: {
primary: '#006fb6',
secondary: '#e85243',
secondary: '#DE2C1B',
'primary-light': '#04A4CC',
},
suz: {