[Form] Make sure errors are a part of the label on bootstrap 4 - this is a requirement for WCAG2 #24435

Nyholm · 2017-10-05T10:53:46Z

Q	A
Branch?	master
Bug fix?	no
New feature?	yes
BC breaks?	no
Deprecations?	no
Tests pass?	yes
Fixed tickets
License	MIT
Doc PR	symfony/symfony-docs#...

I recently let Europe's leading accessibility experts (Funkanu.se) review a site of mine, they gave me (among other) the feedback that errors should be a part of the label.

They said that it makes no sense for blind users to read label, read input and then read errors.

I know the implementation might look strange. But I wish something like this would be merged. That would be great for accessibility for all apps using Symfony.

We could also make sure it prints something like:

<label for=”name”>Name: <span class=”hidden”>Error message</span></label>
<input id=”name” type=”text”>
<span aria-hidden=”true”>Error message</span>

fabpot · 2017-10-05T11:57:14Z

Is it really something that we could only implement for Bootstrap 4? Wouldn't it make sense to make the change to the other themes? Also, for Bootstrap 4, it should be done on 3.4, not master.

ostrolucky · 2017-10-08T14:03:56Z

Wouldn't changing this in older themes be BC break?
Bootstrap 4 theme has been added in Symfony 3.4 so it's ok to do this there.

fabpot · 2017-10-08T14:51:23Z

@ostrolucky I know that, but it's kind of weird to fix a real issue only for one theme.

nicolas-grekas · 2017-10-08T16:48:17Z

@Nyholm rebase on 3.4 needed (I already retargeted on github)

nicolas-grekas · 2017-10-12T16:16:05Z

@Nyholm I just rebased on 3.4. Can you please review other comments?

Nyholm · 2017-10-12T21:03:03Z

Thank you for reviews and comments. I'll take care of this tonight. //Tobias Nyholm Skickat på språng

…

On 12 Oct 2017, at 09:16, Nicolas Grekas ***@***.***> wrote: @Nyholm I just rebased on 3.4. Can you please review other comments? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

Nyholm · 2017-10-13T04:04:23Z

I've updated all the themes.
Please note that the design (depending on CSS) might break with these fixes.

If we are happy with the implementation I'll try to write a paragraph or two in the docs about this and how to remove the error from the label.

xabbuh · 2017-10-13T06:50:32Z

tests seem to need an update too

Nyholm · 2017-10-17T04:26:44Z

I updated some tests. It passes locally. Travis is not all happy, did I do it correctly?

nicolas-grekas · 2017-11-12T16:23:43Z

@Nyholm could you rebase + check tests please?

Nyholm · 2017-11-26T08:57:10Z

I've rebased and fixed one test.. I cannot figure out how to fix AbstractTableLayoutTest::testNestedFormError. Where is the documentation of DomCrawler?

Nyholm · 2017-11-26T08:58:04Z

src/Symfony/Component/Form/Tests/AbstractTableLayoutTest.php

@@ -327,7 +331,7 @@ public function testNestedFormError()
        $this->assertWidgetMatchesXpath($form->createView(), array(),
 '/table
    [
-        ./tr/td/ul[./li[.="[trans]Error![/trans]"]]
+        ./tr/td/label/ul[./li[.="[trans]Error![/trans]"]]
        /following-sibling::table[@id="name_child"]


This line is wrong. I cannot figure out how to make it right. It should match:

<table id="my&id" class="my&class"> <tr> <td><label class="required">[trans]Child[/trans]<ul><li>[trans]Error![/trans]</li></ul></label></td> <td><table id="name_child"> <tr> <td><label class="required">[trans]Grand child[/trans]</label></td> <td><table id="name_child_grandChild"> </table></td> </tr> </table></td> </tr> <tr style="display: none"> <td colspan="2"><input type="hidden" id="name__token" name="name[_token]"></td> </tr> </table>

xabbuh · 2017-11-26T15:51:07Z

@Nyholm Tests for the TwigBridge are green now. But it looks like you need to update some PHP templates too (see the failing FrameworkBundle tests).

Nyholm · 2017-11-26T20:01:15Z

Tests are green except for low/high. Also, Fabbot is a false negative

Tobion · 2017-11-30T16:03:43Z

src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig

@@ -125,8 +125,8 @@
        {%- 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}) -%}
-    {%- endif -%}
+    {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' form-control-label')|trim}) -%}


the indention is broken

Tobion · 2017-11-30T16:05:12Z

Don't merge such a bc break in a minor version

nicolas-grekas · 2018-01-16T19:22:00Z

@Nyholm how could we move forward here?

ostrolucky · 2018-01-16T20:26:36Z

I think this is still ok to go into bootstrap 4 theme, since that one needs to be changed in BC breaking way anyway to support newer bootstrap 4 release

nicolas-grekas · 2018-01-22T08:14:05Z

@Nyholm because we cannot break BC, except on bootstrap 4 because it was not even stable before, what about focusing this PR only on bootstrap 4? That'd be a nice step. Would you have some time to make it before next release? (ie this week would be great)

Nyholm · 2018-01-22T08:19:59Z

Hey. Sorry for the delay. I will make sure to only change the bootstrap theme this week.

Nyholm · 2018-01-28T15:47:21Z

There we go. The PR does only edit bootstrap 4 and added some tests to make sure it works.

I've also rebased on branch 3.4. But I guess it should be changed to master, right?

nicolas-grekas · 2018-01-28T16:03:41Z

This should really go to 3.4 as bug fix. Later would mean BC breaks. Doing now is also a BC break, but matches the fact that BS4 just when out of beta.

Nyholm · 2018-01-28T16:14:28Z

Great great great. Then Im done with this PR. Im ready for a review.

nicolas-grekas

(with minor nitpicking comments)

nicolas-grekas · 2018-01-29T07:31:48Z

src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig

+            {%- if with_invert %}{{ form_widget(form.invert) }}{% endif -%}
+        </div>
+    {%- endif -%}
+{%- endblock dateinterval_widget -%}


the last dash could be removed, just to remove an unneeded change in the patch

nicolas-grekas · 2018-01-29T07:32:49Z

src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig

+            {%- 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({'for': id, class: (label_attr.class|default('') ~ ' form-control-label')|trim}) -%}


no need for quotes around key (same below)

Nyholm · 2018-01-29T08:15:17Z

Thank you

… is a requirement for WCAG2

nicolas-grekas · 2018-02-04T15:33:17Z

Thank you @Nyholm.

…ap 4 - this is a requirement for WCAG2 (Nyholm) This PR was merged into the 3.4 branch. Discussion ---------- [Form] Make sure errors are a part of the label on bootstrap 4 - this is a requirement for WCAG2 | Q | A | ------------- | --- | Branch? | master | Bug fix? | no | New feature? | yes | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | | License | MIT | Doc PR | symfony/symfony-docs#...  I recently let Europe's leading accessibility experts (Funkanu.se) review a site of mine, they gave me (among other) the feedback that errors should be a part of the label. They said that it makes no sense for blind users to read label, read input and then read errors. I know the implementation might look strange. But I wish something like this would be merged. That would be great for accessibility for all apps using Symfony. We *could* also make sure it prints something like: ``` <label for=”name”>Name: <span class=”hidden”>Error message</span></label> <input id=”name” type=”text”> <span aria-hidden=”true”>Error message</span> ``` Commits ------- a0b40f5 [Form] Make sure errors are a part of the label on bootstrap 4 - this is a requirement for WCAG2

Nyholm · 2018-02-04T15:34:48Z

Thank you for merging.

…le (mpiot, Nyholm) This PR was merged into the 3.4 branch. Discussion ---------- [TwigBridge] Apply some changes to support Bootstrap4-stable | Q | A | ------------- | --- | Branch? | 3.4 | Bug fix? | yes | New feature? | no | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | #25655 #25635 #24435 | License | MIT | Doc PR | - Follow up of #25715, see discussion there. This fixes the following errors: - Delete form-control-label, don't used in Bootstrap 4 - Replace col-form-legend by col-form-label - Separate the label and input (before the input was in the label) - Use form-check-inline to put radio and/or checkboxes inline - Add support of custom form for radio and checkboxes - Fix input-group: MoneyType (Issue #25655), PercentType - Remove form-control duplication (Issue #25635) - Fix Errors in label (#24435) Commits ------- 14e2282 Fixed broken tests cf4e956 [TwigBridge] Apply some changes to support Bootstrap4-stable

carsonbot added Status: Needs Review Form Feature labels Oct 5, 2017

nicolas-grekas changed the base branch from master to 3.4 October 8, 2017 16:47

nicolas-grekas added this to the 3.4 milestone Oct 8, 2017

nicolas-grekas force-pushed the form-wcag-error branch from 7ef748d to 485c929 Compare October 12, 2017 16:15

Nyholm force-pushed the form-wcag-error branch from c83df27 to f1a62fe Compare November 26, 2017 08:31

Nyholm commented Nov 26, 2017

View reviewed changes

Tobion reviewed Nov 30, 2017

View reviewed changes

Nyholm force-pushed the form-wcag-error branch 2 times, most recently from 82ee2da to 3eb9e41 Compare January 28, 2018 15:33

carsonbot added Status: Reviewed and removed Status: Needs Review labels Jan 29, 2018

nicolas-grekas approved these changes Jan 29, 2018

View reviewed changes

fabpot approved these changes Jan 29, 2018

View reviewed changes

[Form] Make sure errors are a part of the label on bootstrap 4 - this…

a0b40f5

… is a requirement for WCAG2

nicolas-grekas force-pushed the form-wcag-error branch from cee6a52 to a0b40f5 Compare February 4, 2018 15:29

nicolas-grekas changed the title ~~[Form] Make sure errors is a part of the label. This is a requirement for WCAG2~~ [Form] Make sure errors are a part of the label on bootstrap 4 - this is a requirement for WCAG2 Feb 4, 2018

nicolas-grekas merged commit a0b40f5 into symfony:3.4 Feb 4, 2018

Nyholm deleted the form-wcag-error branch February 4, 2018 15:34

nicolas-grekas mentioned this pull request Feb 4, 2018

[TwigBridge] Apply some changes to support Bootstrap4-stable #25715

Closed

nicolas-grekas mentioned this pull request Feb 13, 2018

[TwigBridge] Apply some changes to support Bootstrap4-stable #26167

Merged

This was referenced Mar 1, 2018

Release v3.4.5 #26362

Merged

Release v4.0.5 #26363

Merged

Nyholm mentioned this pull request Mar 5, 2018

Readd 'form_label_errors' block to disable errors on form labels #26408

Merged

apfelbox mentioned this pull request Jul 7, 2018

[Form] Render form errors at the correct position in Bootstrap 4 horizontal layout #27892

Closed

ro0NL mentioned this pull request Nov 12, 2018

[BUG-Fix] issue#29187 Duplication of form_errors field #29188

Closed

stof mentioned this pull request Jan 26, 2019

[Twig][Bootstrap 4 Theme]: Displaying errors like in official docs #29986

Closed

ro0NL mentioned this pull request Apr 15, 2019

Not render Bootstrap radio label when false #31090

Closed

norkunas mentioned this pull request Oct 31, 2023

[TwigBridge] Fix Bootstrap 4 form error layout #52373

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Form] Make sure errors are a part of the label on bootstrap 4 - this is a requirement for WCAG2 #24435

[Form] Make sure errors are a part of the label on bootstrap 4 - this is a requirement for WCAG2 #24435

Nyholm commented Oct 5, 2017

fabpot commented Oct 5, 2017

ostrolucky commented Oct 8, 2017

fabpot commented Oct 8, 2017

nicolas-grekas commented Oct 8, 2017

nicolas-grekas commented Oct 12, 2017

Nyholm commented Oct 12, 2017 via email

Nyholm commented Oct 13, 2017

xabbuh commented Oct 13, 2017

Nyholm commented Oct 17, 2017

nicolas-grekas commented Nov 12, 2017 •

edited

Loading

Nyholm commented Nov 26, 2017

Nyholm Nov 26, 2017

xabbuh commented Nov 26, 2017

Nyholm commented Nov 26, 2017

Tobion Nov 30, 2017

Tobion commented Nov 30, 2017

nicolas-grekas commented Jan 16, 2018

ostrolucky commented Jan 16, 2018

nicolas-grekas commented Jan 22, 2018

Nyholm commented Jan 22, 2018

Nyholm commented Jan 28, 2018

nicolas-grekas commented Jan 28, 2018 •

edited

Loading

Nyholm commented Jan 28, 2018

nicolas-grekas left a comment

nicolas-grekas Jan 29, 2018

nicolas-grekas Jan 29, 2018

Nyholm commented Jan 29, 2018

nicolas-grekas commented Feb 4, 2018

Nyholm commented Feb 4, 2018

[Form] Make sure errors are a part of the label on bootstrap 4 - this is a requirement for WCAG2 #24435

[Form] Make sure errors are a part of the label on bootstrap 4 - this is a requirement for WCAG2 #24435

Conversation

Nyholm commented Oct 5, 2017

fabpot commented Oct 5, 2017

ostrolucky commented Oct 8, 2017

fabpot commented Oct 8, 2017

nicolas-grekas commented Oct 8, 2017

nicolas-grekas commented Oct 12, 2017

Nyholm commented Oct 12, 2017 via email

Nyholm commented Oct 13, 2017

xabbuh commented Oct 13, 2017

Nyholm commented Oct 17, 2017

nicolas-grekas commented Nov 12, 2017 • edited Loading

Nyholm commented Nov 26, 2017

Nyholm Nov 26, 2017

Choose a reason for hiding this comment

xabbuh commented Nov 26, 2017

Nyholm commented Nov 26, 2017

Tobion Nov 30, 2017

Choose a reason for hiding this comment

Tobion commented Nov 30, 2017

nicolas-grekas commented Jan 16, 2018

ostrolucky commented Jan 16, 2018

nicolas-grekas commented Jan 22, 2018

Nyholm commented Jan 22, 2018

Nyholm commented Jan 28, 2018

nicolas-grekas commented Jan 28, 2018 • edited Loading

Nyholm commented Jan 28, 2018

nicolas-grekas left a comment

Choose a reason for hiding this comment

nicolas-grekas Jan 29, 2018

Choose a reason for hiding this comment

nicolas-grekas Jan 29, 2018

Choose a reason for hiding this comment

Nyholm commented Jan 29, 2018

nicolas-grekas commented Feb 4, 2018

Nyholm commented Feb 4, 2018

nicolas-grekas commented Nov 12, 2017 •

edited

Loading

nicolas-grekas commented Jan 28, 2018 •

edited

Loading