EP/myep
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-28 10:22:17 +02:00
parent 7bfa5f5ed7
commit 2c5152ec39
11 changed files with 79 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles/components/button.css
+5 -4
View File
@@ -1,7 +1,7 @@
.button { .button {
@apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer; @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 uppercase leading-none text-center;
@apply transition-colors outline-none focus:outline-none; @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-light;
} }
.button--small { .button--small {
@@ -13,14 +13,15 @@
} }
.bg-button { .bg-button {
@apply bg-primary-light text-white; @apply bg-none bg-primary-dark text-white;
@apply hover:bg-secondary; @apply hover:bg-badge-gradient;
} }
.bg-button--active, .bg-button--active,
.bg-button--secondary { .bg-button--secondary {
@apply bg-secondary; @apply bg-badge-gradient;
@apply hover:bg-none hover:bg-pink;
} }
.bg-button--muted { .bg-button--muted {
assets/styles/components/forms.css
+2 -2
View File
@@ -4,7 +4,7 @@ label.required:after {
} }
.form-field { .form-field {
@apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 block w-full; @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:outline-2 focus:outline-offset-2 focus:outline-primary-light mt-1 block w-full;
} }
.form-field--has-error { .form-field--has-error {
@@ -13,7 +13,7 @@ label.required:after {
.form-checkbox, .form-checkbox,
.form-radio { .form-radio {
@apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-secondary h-4 w-4; @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:outline-2 focus:outline-offset-2 focus:outline-primary-light text-primary h-4 w-4;
} }
.form-checkbox--has-error, .form-checkbox--has-error,
assets/styles/components/menu.css
+3 -3
View File
@@ -1,11 +1,11 @@
.menu--main { .menu--main {
@apply flex items-center m-0; @apply flex items-center m-0 divide-x divide-white;
} }
.menu--main a { .menu--main a {
@apply block p-2 md:p-4 text-black hover:bg-zinc-400 hover:text-zinc-800 text-sm md:text-base; @apply block py-2 px-4 text-white hover:bg-secondary hover:text-zinc-800 text-sm md:text-base;
} }
.menu--main .current a { .menu--main .current a {
@apply bg-zinc-400 text-zinc-800; @apply bg-secondary text-zinc-800;
} }
src/Menu/MenuBuilder.php
-3
View File
@@ -23,14 +23,12 @@ class MenuBuilder
$menu->addChild('Meine Daten', [ $menu->addChild('Meine Daten', [
'route' => 'app_personal_data', 'route' => 'app_personal_data',
'linkAttributes' => [ 'linkAttributes' => [
'title' => 'Persönliche Daten',
'data-action' => 'loading#toggle', 'data-action' => 'loading#toggle',
], ],
]); ]);
$menu->addChild('Meine Buchungen', [ $menu->addChild('Meine Buchungen', [
'route' => 'app_bookings', 'route' => 'app_bookings',
'linkAttributes' => [ 'linkAttributes' => [
'title' => 'Meine Buchungen',
'data-action' => 'loading#toggle', 'data-action' => 'loading#toggle',
], ],
'extras' => [ 'extras' => [
@@ -42,7 +40,6 @@ class MenuBuilder
$menu->addChild('Logout', [ $menu->addChild('Logout', [
'route' => 'app_logout', 'route' => 'app_logout',
'linkAttributes' => [ 'linkAttributes' => [
'title' => 'Logout',
'data-action' => 'loading#toggle', 'data-action' => 'loading#toggle',
], ],
]); ]);
tailwind.config.js
+1 -1
View File
@@ -21,7 +21,7 @@ module.exports = {
'primary-light': '#0080ff', 'primary-light': '#0080ff',
'primary-medium': '#165883', 'primary-medium': '#165883',
'primary-dark': '#18527b', 'primary-dark': '#18527b',
pink: '#960167', pink: '#fa1a8c',
}, },
backgroundImage: { backgroundImage: {
'badge-gradient': 'linear-gradient(120deg, rgba(150,1,103,1) 0%, rgba(158,3,106,1) 40%, rgba(250,26,140,1) 100%)', 'badge-gradient': 'linear-gradient(120deg, rgba(150,1,103,1) 0%, rgba(158,3,106,1) 40%, rgba(250,26,140,1) 100%)',
templates/booking/edit.html.twig
+17 -14
View File
@@ -18,10 +18,13 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% endif %} {% endif %}
<h1 class="text-3xl font-semibold pb-2">
Buchung bearbeiten
</h1>
<div class="flex flex-col space-y-8 pb-8" {{ stimulus_controller('booking', { 'availabilities': availabilities.items }) }} {{ stimulus_controller('iframe', { 'offsetTop': 100 }) }}> <div class="flex flex-col space-y-8 pb-8" {{ stimulus_controller('booking', { 'availabilities': availabilities.items }) }} {{ stimulus_controller('iframe', { 'offsetTop': 100 }) }}>
<div class="p-8 border border-gray-300 rounded-md" <div class="p-8 border border-gray-300 rounded-md"
{{ stimulus_controller('toggle', { 'open': true }, { 'closed': 'hidden' }) }}> {{ stimulus_controller('toggle', { 'open': true }, { 'closed': 'hidden' }) }}>
<div role="button" class="flex items-center justify-between" {{ stimulus_action('toggle', 'toggle', 'click') }}> <div role="button" tabindex="0" class="flex items-center justify-between focus:outline-2 focus:outline-offset-2 focus:outline-primary-light" {{ stimulus_action('toggle', 'toggle', 'click') | stimulus_action('toggle', 'toggle', 'keydown.space') }}>
<span class="block text-2xl font-semibold">Reisedaten</span> <span class="block text-2xl font-semibold">Reisedaten</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" {{ stimulus_target('toggle', 'icon') }}> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" {{ stimulus_target('toggle', 'icon') }}>
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
@@ -29,9 +32,9 @@
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-x-8 gap-y-4 pt-4" {{ stimulus_target('toggle', 'toggle') }}> <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-x-8 gap-y-4 pt-4" {{ stimulus_target('toggle', 'toggle') }}>
<div> <div>
<h3 class="text-lg font-semibold"> <h2 class="text-lg font-semibold">
Reise Reise
</h3> </h2>
{{ bookingData.travel }} {{ bookingData.travel }}
</div> </div>
<div> <div>
@@ -120,7 +123,7 @@
{% do child.setRendered %} {% do child.setRendered %}
{% endif %} {% endif %}
<div class="{{ html_classes('p-8 border rounded-md mb-4', { 'border-gray-300': child.vars.valid, 'border-red-700': not child.vars.valid }) }}" {{ stimulus_controller('toggle', {'open': child.vars.valid == false}, { 'closed': 'hidden' }) }}> <div class="{{ html_classes('p-8 border rounded-md mb-4', { 'border-gray-300': child.vars.valid, 'border-red-700': not child.vars.valid }) }}" {{ stimulus_controller('toggle', {'open': child.vars.valid == false}, { 'closed': 'hidden' }) }}>
<div role="button" class="flex items-center justify-between" {{ stimulus_action('toggle', 'toggle', 'click') }}> <div role="button" tabindex="0" class="flex items-center justify-between focus:outline-2 focus:outline-offset-2 focus:outline-primary-light" {{ stimulus_action('toggle', 'toggle', 'click') | stimulus_action('toggle', 'toggle', 'keydown.space') }}>
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<span class="text-2xl leading-none font-semibold">Teilnehmer:in {{ participant.index }}: {{ participant.firstName }} {{ participant.lastName }}</span> <span class="text-2xl leading-none font-semibold">Teilnehmer:in {{ participant.index }}: {{ participant.firstName }} {{ participant.lastName }}</span>
{% if participant.status == 'S' %} <span class="inline-block px-2 py-1 text-xs bg-red-700 text-white">storniert</span>{% endif %} {% if participant.status == 'S' %} <span class="inline-block px-2 py-1 text-xs bg-red-700 text-white">storniert</span>{% endif %}
@@ -160,22 +163,22 @@
} %} } %}
</div> </div>
{% endif %} {% endif %}
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4 pb-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4 pb-4">
{{ form_row(child.firstName) }} {{ form_row(child.firstName) }}
{{ form_row(child.lastName) }} {{ form_row(child.lastName) }}
{{ form_row(child.gender) }} {{ form_row(child.gender) }}
{{ form_row(child.dateOfBirth) }} {{ form_row(child.dateOfBirth) }}
{{ form_row(child.nationality) }} {{ form_row(child.nationality) }}
</fieldset> </div>
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4 pb-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4 pb-4">
{{ form_row(child.email) }} {{ form_row(child.email) }}
{{ form_row(child.mobile) }} {{ form_row(child.mobile) }}
</fieldset> </div>
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
{{ form_row(child.height) }} {{ form_row(child.height) }}
{{ form_row(child.shoeSize) }} {{ form_row(child.shoeSize) }}
{{ form_row(child.weight) }} {{ form_row(child.weight) }}
</fieldset> </div>
{% if not travelData.participantDataMutable %} {% if not travelData.participantDataMutable %}
<div class="absolute top-0 left-0 inset-0 cursor-not-allowed"></div> <div class="absolute top-0 left-0 inset-0 cursor-not-allowed"></div>
{% endif %} {% endif %}
@@ -191,7 +194,7 @@
<h3 class="text-xl font-semibold"> <h3 class="text-xl font-semibold">
Leistungen Leistungen
</h3> </h3>
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
{% if child.courses is defined %} {% if child.courses is defined %}
{{ form_row(child.courses) }} {{ form_row(child.courses) }}
{% endif %} {% endif %}
@@ -207,7 +210,7 @@
{% if child.rentals is defined %} {% if child.rentals is defined %}
{{ form_row(child.rentals) }} {{ form_row(child.rentals) }}
{% endif %} {% endif %}
</fieldset> </div>
{% if not travelData.additionalServicesMutable %} {% if not travelData.additionalServicesMutable %}
<div class="absolute inset-0 cursor-not-allowed"></div> <div class="absolute inset-0 cursor-not-allowed"></div>
{% endif %} {% endif %}
@@ -216,7 +219,7 @@
<h3 class="text-xl font-semibold"> <h3 class="text-xl font-semibold">
Hin-/Rückreise Hin-/Rückreise
</h3> </h3>
<fieldset class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4">
<div class="space-y-2" {{ stimulus_controller('select-toggle', { 'show': ['BUS'], 'visible': participant.transportationServiceTo is not null and participant.transportationServiceTo.subType == 'BUS' }, { 'hidden': 'hidden' }) }}> <div class="space-y-2" {{ stimulus_controller('select-toggle', { 'show': ['BUS'], 'visible': participant.transportationServiceTo is not null and participant.transportationServiceTo.subType == 'BUS' }, { 'hidden': 'hidden' }) }}>
{{ form_row(child.transportationServiceTo) }} {{ form_row(child.transportationServiceTo) }}
{% if child.pickup is defined %} {% if child.pickup is defined %}
@@ -226,7 +229,7 @@
{% endif %} {% endif %}
</div> </div>
{{ form_row(child.transportationServiceFro) }} {{ form_row(child.transportationServiceFro) }}
</fieldset> </div>
{% if not travelData.transportationServicesMutable %} {% if not travelData.transportationServicesMutable %}
<div class="absolute inset-0 cursor-not-allowed"></div> <div class="absolute inset-0 cursor-not-allowed"></div>
{% endif %} {% endif %}
templates/booking/index.html.twig
+10 -9
View File
@@ -1,32 +1,33 @@
{% extends 'layout.html.twig' %} {% extends 'layout.html.twig' %}
{% block content %} {% block content %}
<h2 class="text-2xl font-semibold pb-4"> <h1 class="text-2xl font-semibold pb-4">
Meine Buchungen Meine Buchungen
</h2> </h1>
{% include '_partials/_flashes.html.twig' %} {% include '_partials/_flashes.html.twig' %}
<table class="w-full mb-4 responsive"> <table class="w-full mb-4 responsive">
<thead> <thead>
<tr class="bg-zinc-200"> <tr class="bg-zinc-200">
<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">
Reise Reise
</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">
Reisedatum Reisedatum
</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">
Buchungsnummer Buchungsnummer
</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">
Reisepreis Reisepreis
</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">
offen offen
</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">
Status Status
</th> </th>
<th> <th scope="col">
<span class="sr-only">Aktionen</span>
</th> </th>
</tr> </tr>
</thead> </thead>
templates/forms.html.twig
+21 -12
View File
@@ -6,12 +6,23 @@
{%- if help is not empty -%} {%- if help is not empty -%}
{%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%} {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
{%- endif -%} {%- endif -%}
<div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}> {%- if form.vars.expanded is defined and form.vars.expanded -%}
{{- form_label(form) -}} <fieldset{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
{{- form_widget(form, widget_attr) -}} <legend class="font-semibold mb-1">
{{- form_errors(form) -}} {{- form_label(form, null, {element: 'span'}) -}}
{{- form_help(form) -}} </legend>
</div> {{- form_widget(form, widget_attr) -}}
{{- form_errors(form) -}}
{{- form_help(form) -}}
</fieldset>
{%- else -%}
<div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
{{- form_label(form) -}}
{{- form_widget(form, widget_attr) -}}
{{- form_errors(form) -}}
{{- form_help(form) -}}
</div>
{%- endif -%}
{%- endblock form_row -%} {%- endblock form_row -%}
{%- block form_label -%} {%- block form_label -%}
@@ -95,17 +106,15 @@
{%- set tooltip = form.vars.attr.tooltip -%} {%- set tooltip = form.vars.attr.tooltip -%}
{%- endif -%} {%- endif -%}
<div> <div>
<div class="{{ html_classes('relative flex items-start', { 'cursor-not-allowed': form.vars.attr.readonly is defined }) }}"{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}> <label for="{{ form.vars.id }}" class="{{ html_classes('relative flex items-start', { 'cursor-not-allowed pointer-events-none': form.vars.attr.readonly is defined }) }}"{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
<div class="flex h-6 items-center"> <div class="flex h-6 items-center">
{{ form_widget(form) }} {{ form_widget(form) }}
</div> </div>
<div class="{{ html_classes('ml-1 leading-6', { 'text-red-700': errors|length }) }}"> <div class="{{ html_classes('ml-2 leading-6', { 'text-red-700': errors|length }) }}">
<label for="{{ form.vars.id }}" class="{{ html_classes({ 'pointer-events-none': form.vars.attr.readonly is defined }) }}"> {{ form.vars.label | raw }}
{{ form.vars.label | raw }}
</label>
{{- form_errors(form) -}} {{- form_errors(form) -}}
</div> </div>
</div> </label>
</div> </div>
{% endblock %} {% endblock %}
templates/layout.html.twig
+3 -3
View File
@@ -3,11 +3,11 @@
{% block body %} {% block body %}
<div class="{{ html_classes('pb-8', { 'pt-24': is_granted('ROLE_USER') }) }}" {{ stimulus_controller('loading', [], { 'hidden': 'invisible' }) }}> <div class="{{ html_classes('pb-8', { 'pt-24': is_granted('ROLE_USER') }) }}" {{ stimulus_controller('loading', [], { 'hidden': 'invisible' }) }}>
<div class="fixed inset-x-0 top-0 z-20"> <div class="fixed inset-x-0 top-0 z-20">
<div class="max-w-screen-xl mx-auto flex items-center justify-between bg-zinc-200 "> <div class="max-w-screen-xl mx-auto flex items-center justify-between bg-primary-dark text-white">
{% if is_granted('ROLE_USER') %} {% if is_granted('ROLE_USER') %}
<nav class="w-full flex items-center relative"> <nav class="w-full flex items-center relative">
<div class="flex-1 block text-2xl px-4">My E&amp;P</div> <div class="flex-1 block text-xl px-4">My E&amp;P</div>
<div class="bg-zinc-200"> <div>
{{ knp_menu_render(knp_menu_get('main')) }} {{ knp_menu_render(knp_menu_get('main')) }}
</div> </div>
</nav> </nav>
templates/personal_data/index.html.twig
+16 -16
View File
@@ -10,44 +10,44 @@
Speichern Speichern
</button> </button>
</div> </div>
<h2 class="text-2xl font-semibold pb-2"> <h1 class="text-3xl font-semibold pb-2">
Persönliche Daten Persönliche Daten
</h2> </h1>
<div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4"> <div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
<div> <div>
<h4> <p class="text-lg font-semibold">
Vorname Vorname
</h4> </p>
{{ personalData.firstName }} {{ personalData.firstName }}
</div> </div>
<div> <div>
<h4> <p class="text-lg font-semibold">
Nachname Nachname
</h4> </p>
{{ personalData.name }} {{ personalData.name }}
</div> </div>
<div> <div>
<h4> <p class="text-lg font-semibold">
Gender Gender
</h4> </p>
{{ personalData.gender|map_gender }} {{ personalData.gender|map_gender }}
</div> </div>
<div> <div>
<h4> <p class="text-lg font-semibold">
Geburtsdatum Geburtsdatum
</h4> </p>
{{ personalData.dateOfBirth|date('d.m.Y') }} {{ personalData.dateOfBirth|date('d.m.Y') }}
</div> </div>
<div> <div>
<h4> <p class="text-lg font-semibold">
Nationaliät Nationaliät
</h4> </p>
{{ personalData.nationality|map_nationality|default('-') }} {{ personalData.nationality|map_nationality|default('-') }}
</div> </div>
</div> </div>
<h3 class="text-xl font-semibold pb-2"> <h2 class="text-xl font-semibold pb-2">
Anschrift Anschrift
</h3> </h2>
<div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4"> <div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
<div class="col-span-2"> <div class="col-span-2">
{{ form_row(personalDataForm.street) }} {{ form_row(personalDataForm.street) }}
@@ -56,9 +56,9 @@
{{ form_row(personalDataForm.city) }} {{ form_row(personalDataForm.city) }}
{{ form_row(personalDataForm.country) }} {{ form_row(personalDataForm.country) }}
</div> </div>
<h3 class="text-xl font-semibold pb-2"> <h2 class="text-xl font-semibold pb-2">
Kontakt Kontakt
</h3> </h2>
<div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4"> <div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
<div class="col-span-2"> <div class="col-span-2">
{{ form_row(personalDataForm.email) }} {{ form_row(personalDataForm.email) }}
templates/security/login.html.twig
+1 -1
View File
@@ -70,7 +70,7 @@
<p> <p>
Ein LogIn ist nur möglich wenn Eure Daten schon durch eine Buchung oder Anfrage bei uns Ein LogIn ist nur möglich wenn Eure Daten schon durch eine Buchung oder Anfrage bei uns
angelegt wurden. Wenn Ihr auch Kunde werden möchtet, dann schickt uns Eure Interessen über unser angelegt wurden. Wenn Ihr auch Kunde werden möchtet, dann schickt uns Eure Interessen über unser
<a href="https://www.ep-reisen.de/skireisen/unternehmen/kontakt/kontaktformular/" title="Kontaktformular">Kontaktformular</a>. <a href="https://www.ep-reisen.de/skireisen/unternehmen/kontakt/kontaktformular/" title="Kontaktformular" class="underline">Kontaktformular</a>.
</p> </p>
</div> </div>
</div> </div>