feat: various a11y improvements
This commit is contained in:
+21
-12
@@ -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 %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user