feat: various a11y improvements

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
+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 %}