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 {
@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 focus:outline-2 focus:outline-offset-2 focus:outline-primary-light;
}
.button--small {
@@ -13,14 +13,15 @@
}
.bg-button {
@apply bg-primary-light text-white;
@apply hover:bg-secondary;
@apply bg-none bg-primary-dark text-white;
@apply hover:bg-badge-gradient;
}
.bg-button--active,
.bg-button--secondary {
@apply bg-secondary;
@apply bg-badge-gradient;
@apply hover:bg-none hover:bg-pink;
}
.bg-button--muted {
assets/styles/components/forms.css
+2 -2
View File
@@ -4,7 +4,7 @@ label.required:after {
}
.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 {
@@ -13,7 +13,7 @@ label.required:after {
.form-checkbox,
.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,
assets/styles/components/menu.css
+3 -3
View File
@@ -1,11 +1,11 @@
.menu--main {
@apply flex items-center m-0;
@apply flex items-center m-0 divide-x divide-white;
}
.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 {
@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', [
'route' => 'app_personal_data',
'linkAttributes' => [
'title' => 'Persönliche Daten',
'data-action' => 'loading#toggle',
],
]);
$menu->addChild('Meine Buchungen', [
'route' => 'app_bookings',
'linkAttributes' => [
'title' => 'Meine Buchungen',
'data-action' => 'loading#toggle',
],
'extras' => [
@@ -42,7 +40,6 @@ class MenuBuilder
$menu->addChild('Logout', [
'route' => 'app_logout',
'linkAttributes' => [
'title' => 'Logout',
'data-action' => 'loading#toggle',
],
]);
tailwind.config.js
+1 -1
View File
@@ -21,7 +21,7 @@ module.exports = {
'primary-light': '#0080ff',
'primary-medium': '#165883',
'primary-dark': '#18527b',
pink: '#960167',
pink: '#fa1a8c',
},
backgroundImage: {
'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 %}
{% endfor %}
{% 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="p-8 border border-gray-300 rounded-md"
{{ 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>
<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" />
@@ -29,9 +32,9 @@
</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>
<h3 class="text-lg font-semibold">
<h2 class="text-lg font-semibold">
Reise
</h3>
</h2>
{{ bookingData.travel }}
</div>
<div>
@@ -120,7 +123,7 @@
{% do child.setRendered %}
{% 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 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">
<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 %}
@@ -160,22 +163,22 @@
} %}
</div>
{% 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.lastName) }}
{{ form_row(child.gender) }}
{{ form_row(child.dateOfBirth) }}
{{ form_row(child.nationality) }}
</fieldset>
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4 pb-4">
</div>
<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.mobile) }}
</fieldset>
<fieldset class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
</div>
<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.shoeSize) }}
{{ form_row(child.weight) }}
</fieldset>
</div>
{% if not travelData.participantDataMutable %}
<div class="absolute top-0 left-0 inset-0 cursor-not-allowed"></div>
{% endif %}
@@ -191,7 +194,7 @@
<h3 class="text-xl font-semibold">
Leistungen
</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 %}
{{ form_row(child.courses) }}
{% endif %}
@@ -207,7 +210,7 @@
{% if child.rentals is defined %}
{{ form_row(child.rentals) }}
{% endif %}
</fieldset>
</div>
{% if not travelData.additionalServicesMutable %}
<div class="absolute inset-0 cursor-not-allowed"></div>
{% endif %}
@@ -216,7 +219,7 @@
<h3 class="text-xl font-semibold">
Hin-/Rückreise
</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' }) }}>
{{ form_row(child.transportationServiceTo) }}
{% if child.pickup is defined %}
@@ -226,7 +229,7 @@
{% endif %}
</div>
{{ form_row(child.transportationServiceFro) }}
</fieldset>
</div>
{% if not travelData.transportationServicesMutable %}
<div class="absolute inset-0 cursor-not-allowed"></div>
{% endif %}
templates/booking/index.html.twig
+10 -9
View File
@@ -1,32 +1,33 @@
{% extends 'layout.html.twig' %}
{% block content %}
<h2 class="text-2xl font-semibold pb-4">
<h1 class="text-2xl font-semibold pb-4">
Meine Buchungen
</h2>
</h1>
{% include '_partials/_flashes.html.twig' %}
<table class="w-full mb-4 responsive">
<thead>
<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
</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
</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
</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
</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
</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
</th>
<th>
<th scope="col">
<span class="sr-only">Aktionen</span>
</th>
</tr>
</thead>
templates/forms.html.twig
+21 -12
View File
@@ -6,12 +6,23 @@
{%- if help is not empty -%}
{%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
{%- endif -%}
<div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
{{- form_label(form) -}}
{{- form_widget(form, widget_attr) -}}
{{- form_errors(form) -}}
{{- form_help(form) -}}
</div>
{%- if form.vars.expanded is defined and form.vars.expanded -%}
<fieldset{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
<legend class="font-semibold mb-1">
{{- form_label(form, null, {element: 'span'}) -}}
</legend>
{{- 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 -%}
{%- block form_label -%}
@@ -95,17 +106,15 @@
{%- set tooltip = form.vars.attr.tooltip -%}
{%- endif -%}
<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">
{{ form_widget(form) }}
</div>
<div class="{{ html_classes('ml-1 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 }}
</label>
<div class="{{ html_classes('ml-2 leading-6', { 'text-red-700': errors|length }) }}">
{{ form.vars.label | raw }}
{{- form_errors(form) -}}
</div>
</div>
</label>
</div>
{% endblock %}
templates/layout.html.twig
+3 -3
View File
@@ -3,11 +3,11 @@
{% block body %}
<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="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') %}
<nav class="w-full flex items-center relative">
<div class="flex-1 block text-2xl px-4">My E&amp;P</div>
<div class="bg-zinc-200">
<div class="flex-1 block text-xl px-4">My E&amp;P</div>
<div>
{{ knp_menu_render(knp_menu_get('main')) }}
</div>
</nav>
templates/personal_data/index.html.twig
+16 -16
View File
@@ -10,44 +10,44 @@
Speichern
</button>
</div>
<h2 class="text-2xl font-semibold pb-2">
<h1 class="text-3xl font-semibold pb-2">
Persönliche Daten
</h2>
</h1>
<div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
<div>
<h4>
<p class="text-lg font-semibold">
Vorname
</h4>
</p>
{{ personalData.firstName }}
</div>
<div>
<h4>
<p class="text-lg font-semibold">
Nachname
</h4>
</p>
{{ personalData.name }}
</div>
<div>
<h4>
<p class="text-lg font-semibold">
Gender
</h4>
</p>
{{ personalData.gender|map_gender }}
</div>
<div>
<h4>
<p class="text-lg font-semibold">
Geburtsdatum
</h4>
</p>
{{ personalData.dateOfBirth|date('d.m.Y') }}
</div>
<div>
<h4>
<p class="text-lg font-semibold">
Nationaliät
</h4>
</p>
{{ personalData.nationality|map_nationality|default('-') }}
</div>
</div>
<h3 class="text-xl font-semibold pb-2">
<h2 class="text-xl font-semibold pb-2">
Anschrift
</h3>
</h2>
<div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
<div class="col-span-2">
{{ form_row(personalDataForm.street) }}
@@ -56,9 +56,9 @@
{{ form_row(personalDataForm.city) }}
{{ form_row(personalDataForm.country) }}
</div>
<h3 class="text-xl font-semibold pb-2">
<h2 class="text-xl font-semibold pb-2">
Kontakt
</h3>
</h2>
<div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
<div class="col-span-2">
{{ form_row(personalDataForm.email) }}
templates/security/login.html.twig
+1 -1
View File
@@ -70,7 +70,7 @@
<p>
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
<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>
</div>
</div>