diogo/symfony
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bug #26325 [Form][WCAG] Add hidden labels on date and time fields (Nyholm)

Browse Source 
This PR was squashed before being merged into the 3.4 branch (closes #26325).

Discussion
----------

[Form][WCAG] Add hidden labels on date and time fields

| Q             | A
| ------------- | ---
| Branch?       | 3.4
| Bug fix?      | yes
| New feature?  | no
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes    <!-- please add some, will be required by reviewers -->
| Fixed tickets |
| License       | MIT
| Doc PR        |

According to my friend and WCAG2 expect [Sandra](https://twitter.com/sandrability):

> "Guidance texts" (my translation) on DateType and DateTimeType etc are missing. It is great that they are grouped with a "fieldset" but it will be more clear if there was a label on each select. Especially since different countries have different time and date formats. The time form is read like "00 00" and you have no idea if it is seconds, minutes or hours. You may do "guidance texts" visually hidden if you do not want to change the looks of the form. But since "month" is shorten to "Jan" instead of "January" you may want to have clear and visual guidance texts.

Commits
-------

14978e905c [Form][WCAG] Add hidden labels on date and time fields
This commit is contained in:
Fabien Potencier 2018-02-28 13:47:15 -08:00
commit 18beaeedfd
1 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_base_layout.html.twig
View File

@ -40,6 +40,16 @@
<div {{ block('widget_container_attributes') }}>
{{- form_errors(form.date) -}}
{{- form_errors(form.time) -}}
<div class="sr-only">
{%- if form.date.year is defined %}{{ form_label(form.date.year) }}{% endif -%}
{%- if form.date.month is defined %}{{ form_label(form.date.month) }}{% endif -%}
{%- if form.date.day is defined %}{{ form_label(form.date.day) }}{% endif -%}
{%- if form.time.hour is defined %}{{ form_label(form.time.hour) }}{% endif -%}
{%- if form.time.minute is defined %}{{ form_label(form.time.minute) }}{% endif -%}
{%- if form.time.second is defined %}{{ form_label(form.time.second) }}{% endif -%}
</div>
{{- form_widget(form.date, { datetime: true } ) -}}
{{- form_widget(form.time, { datetime: true } ) -}}
</div>
@ -54,6 +64,12 @@
{%- if datetime is not defined or not datetime -%}
<div {{ block('widget_container_attributes') -}}>
{%- endif %}
<div class="sr-only">
{{ form_label(form.year) }}
{{ form_label(form.month) }}
{{ form_label(form.day) }}
</div>
{{- date_pattern|replace({
'{{ year }}': form_widget(form.year),
'{{ month }}': form_widget(form.month),
@ -73,7 +89,10 @@
{%- if datetime is not defined or false == datetime -%}
<div {{ block('widget_container_attributes') -}}>
{%- endif -%}
{{- form_widget(form.hour) }}{% if with_minutes %}:{{ form_widget(form.minute) }}{% endif %}{% if with_seconds %}:{{ form_widget(form.second) }}{% endif %}
<div class="sr-only">{{ form_label(form.hour) }}</div>
{{- form_widget(form.hour) -}}
{%- if with_minutes -%}:<div class="sr-only">{{ form_label(form.minute) }}</div>{{ form_widget(form.minute) }}{%- endif -%}
{%- if with_seconds -%}:<div class="sr-only">{{ form_label(form.second) }}</div>{{ form_widget(form.second) }}{%- endif -%}
{%- if datetime is not defined or false == datetime -%}
</div>
{%- endif -%}