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