[Form] Make sure errors are a part of the label on bootstrap 4 - this is a requirement for WCAG2
This commit is contained in:
parent
05e9682868
commit
a0b40f5c4a
@ -28,7 +28,6 @@ col-sm-2
|
||||
{{- form_label(form) -}}
|
||||
<div class="{{ block('form_group_class') }}">
|
||||
{{- form_widget(form) -}}
|
||||
{{- form_errors(form) -}}
|
||||
</div>
|
||||
{##}</div>
|
||||
{%- endif -%}
|
||||
@ -40,7 +39,6 @@ col-sm-2
|
||||
{{- form_label(form) -}}
|
||||
<div class="{{ block('form_group_class') }}">
|
||||
{{- form_widget(form) -}}
|
||||
{{- form_errors(form) -}}
|
||||
</div>
|
||||
</div>
|
||||
{##}</fieldset>
|
||||
|
@ -39,7 +39,41 @@
|
||||
{% set attr = attr|merge({class: (attr.class|default('') ~ ' form-control is-invalid')|trim}) -%}
|
||||
{% set valid = true %}
|
||||
{%- endif -%}
|
||||
{{- parent() -}}
|
||||
|
||||
{%- if widget == 'single_text' -%}
|
||||
{{- block('form_widget_simple') -}}
|
||||
{%- else -%}
|
||||
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-inline')|trim}) -%}
|
||||
<div {{ block('widget_container_attributes') }}>
|
||||
<div class="table-responsive">
|
||||
<table class="table {{ table_class|default('table-bordered table-condensed table-striped') }}">
|
||||
<thead>
|
||||
<tr>
|
||||
{%- if with_years %}<th>{{ form_label(form.years) }}</th>{% endif -%}
|
||||
{%- if with_months %}<th>{{ form_label(form.months) }}</th>{% endif -%}
|
||||
{%- if with_weeks %}<th>{{ form_label(form.weeks) }}</th>{% endif -%}
|
||||
{%- if with_days %}<th>{{ form_label(form.days) }}</th>{% endif -%}
|
||||
{%- if with_hours %}<th>{{ form_label(form.hours) }}</th>{% endif -%}
|
||||
{%- if with_minutes %}<th>{{ form_label(form.minutes) }}</th>{% endif -%}
|
||||
{%- if with_seconds %}<th>{{ form_label(form.seconds) }}</th>{% endif -%}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
{%- if with_years %}<td>{{ form_widget(form.years) }}</td>{% endif -%}
|
||||
{%- if with_months %}<td>{{ form_widget(form.months) }}</td>{% endif -%}
|
||||
{%- if with_weeks %}<td>{{ form_widget(form.weeks) }}</td>{% endif -%}
|
||||
{%- if with_days %}<td>{{ form_widget(form.days) }}</td>{% endif -%}
|
||||
{%- if with_hours %}<td>{{ form_widget(form.hours) }}</td>{% endif -%}
|
||||
{%- if with_minutes %}<td>{{ form_widget(form.minutes) }}</td>{% endif -%}
|
||||
{%- if with_seconds %}<td>{{ form_widget(form.seconds) }}</td>{% endif -%}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{%- if with_invert %}{{ form_widget(form.invert) }}{% endif -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endblock dateinterval_widget %}
|
||||
|
||||
{% block percent_widget -%}
|
||||
@ -125,13 +159,28 @@
|
||||
{# Labels #}
|
||||
|
||||
{% block form_label -%}
|
||||
{% if label is not same as(false) -%}
|
||||
{%- if compound is defined and compound -%}
|
||||
{%- set element = 'legend' -%}
|
||||
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-legend')|trim}) -%}
|
||||
{%- else -%}
|
||||
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' form-control-label')|trim}) -%}
|
||||
{%- set label_attr = label_attr|merge({for: id, class: (label_attr.class|default('') ~ ' form-control-label')|trim}) -%}
|
||||
{%- endif -%}
|
||||
{% if required -%}
|
||||
{% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' required')|trim}) %}
|
||||
{%- endif -%}
|
||||
{% if label is empty -%}
|
||||
{%- if label_format is not empty -%}
|
||||
{% set label = label_format|replace({
|
||||
'%name%': name,
|
||||
'%id%': id,
|
||||
}) %}
|
||||
{%- else -%}
|
||||
{% set label = name|humanize %}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
<{{ element|default('label') }}{% if label_attr %}{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}{% endif %}>{{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }}{% block form_label_errors %}{{- form_errors(form) -}}{% endblock form_label_errors %}</{{ element|default('label') }}>
|
||||
{%- endif -%}
|
||||
{{- parent() -}}
|
||||
{%- endblock form_label %}
|
||||
|
||||
{% block checkbox_radio_label -%}
|
||||
@ -169,7 +218,6 @@
|
||||
<{{ element|default('div') }} class="form-group">
|
||||
{{- form_label(form) -}}
|
||||
{{- form_widget(form) -}}
|
||||
{{- form_errors(form) -}}
|
||||
</{{ element|default('div') }}>
|
||||
{%- endblock form_row %}
|
||||
|
||||
|
@ -11,6 +11,8 @@
|
||||
|
||||
namespace Symfony\Component\Form\Tests;
|
||||
|
||||
use Symfony\Component\Form\FormError;
|
||||
|
||||
/**
|
||||
* Abstract class providing test cases for the Bootstrap 4 horizontal Twig form theme.
|
||||
*
|
||||
@ -18,6 +20,30 @@ namespace Symfony\Component\Form\Tests;
|
||||
*/
|
||||
abstract class AbstractBootstrap4HorizontalLayoutTest extends AbstractBootstrap4LayoutTest
|
||||
{
|
||||
public function testRow()
|
||||
{
|
||||
$form = $this->factory->createNamed('name', 'Symfony\Component\Form\Extension\Core\Type\TextType');
|
||||
$form->addError(new FormError('[trans]Error![/trans]'));
|
||||
$view = $form->createView();
|
||||
$html = $this->renderRow($view);
|
||||
|
||||
$this->assertMatchesXpath($html,
|
||||
'/div
|
||||
[
|
||||
./label[@for="name"]
|
||||
[
|
||||
./div[
|
||||
./ul
|
||||
[./li[.="[trans]Error![/trans]"]]
|
||||
[count(./li)=1]
|
||||
]
|
||||
]
|
||||
/following-sibling::div[./input[@id="name"]]
|
||||
]
|
||||
'
|
||||
);
|
||||
}
|
||||
|
||||
public function testLabelOnForm()
|
||||
{
|
||||
$form = $this->factory->createNamed('name', 'Symfony\Component\Form\Extension\Core\Type\DateType');
|
||||
|
@ -20,6 +20,30 @@ use Symfony\Component\Form\FormError;
|
||||
*/
|
||||
abstract class AbstractBootstrap4LayoutTest extends AbstractBootstrap3LayoutTest
|
||||
{
|
||||
public function testRow()
|
||||
{
|
||||
$form = $this->factory->createNamed('name', 'Symfony\Component\Form\Extension\Core\Type\TextType');
|
||||
$form->addError(new FormError('[trans]Error![/trans]'));
|
||||
$view = $form->createView();
|
||||
$html = $this->renderRow($view);
|
||||
|
||||
$this->assertMatchesXpath($html,
|
||||
'/div
|
||||
[
|
||||
./label[@for="name"]
|
||||
[
|
||||
./div[
|
||||
./ul
|
||||
[./li[.="[trans]Error![/trans]"]]
|
||||
[count(./li)=1]
|
||||
]
|
||||
]
|
||||
/following-sibling::input[@id="name"]
|
||||
]
|
||||
'
|
||||
);
|
||||
}
|
||||
|
||||
public function testLabelOnForm()
|
||||
{
|
||||
$form = $this->factory->createNamed('name', 'Symfony\Component\Form\Extension\Core\Type\DateType');
|
||||
|
Reference in New Issue
Block a user