[Form][WCAG] Errors sign for people that do not see colors #26327

Nyholm · 2018-02-26T17:07:31Z

Q	A
Branch?	3.4
Bug fix?	no
New feature?	yes
BC breaks?	no
Deprecations?	no
Tests pass?	yes
Fixed tickets
License	MIT
Doc PR

According to my friend and WCAG2 expect Sandra:

The form errors is correctly encoded and works great. But visually they may be hard to see for people that do not see colors very well. Try to improve errors with an icon to make it more visual clear that an error has occurred.

fabpot · 2018-02-27T07:09:16Z

The only downside is that there is no way to easily customize the chosen icon. Would it be possible to. do the same via CSS?

Nyholm · 2018-02-27T08:58:12Z

Bootstrap 4 does not have any icons included. They do have 8 base64 images in their CSS but none that we can use.
I do not like the idea do provide a "symfony-bootstrap4" css file.

A way to customize the icon would be to introduce a twig block and let the user to override it.

javiereguiluz · 2018-02-27T09:13:55Z

Not sure if it's relevant, but in EasyAdmin we use a word (Error) translated into the user's language instead of an icon:

In any case, no matter if we use an icon or a translated text, we should wrap it with <span> or something else so people can quickly hide it, change its styles, etc.

ogizanagi · 2018-02-27T09:18:22Z

But that could be easily achieved on userland using CSS I guess. Bootstrap 4 does not showcase anything regarding this AFAIK, so if it's really a good practice recommended by the WCAG2, perhaps it should be fixed on bootstrap side rather than on our own by arbitrary choosing a way to make it more visual.

Otherwise, I do prefer the EasyAdmin way as shown by @javiereguiluz.

Nyholm · 2018-02-27T09:23:28Z

Yes, I do like that as well. Since we have that clear background and the word "error" it should be okey.

nicolas-grekas · 2018-02-27T18:14:47Z

Status: needs work

Nyholm · 2018-02-28T17:50:04Z

I've added the "error badge":

I need some guidance with where to put the translation for key "error". I would like to put it in the TwigBridge because that's where we use it. As alternative one could put it in the validator component.

I would also like to use the "validator" domain.

Any suggestions?

javiereguiluz · 2018-02-28T19:33:45Z

Another quick comment just for your consideration. In EasyAdmin, when there are multiple errors in a single field, to avoid displaying too many ERROR badges, we display a single ERRORS badge (in plural) and a <ul> of the error messages:

But maybe this is too much attention to detail for Symfony core. Not sure.

nicolas-grekas · 2018-03-01T08:45:22Z

the repeated "ERROR" label LGTM
but before merging, the composer.json of the Form component must be updated to conflict with symfony/twig-bridge <3.4.5|<4.0.5,>=4.0

nicolas-grekas · 2018-03-01T08:55:06Z

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

@@ -244,7 +244,7 @@
        <div class="{% if form is not rootform %}invalid-feedback d-block{% else %}alert alert-danger{% endif %}">
            <ul class="list-unstyled mb-0">
                {%- for error in errors -%}
-                    <li>{{ error.message }}</li>
+                    <li><span class="initialism form-error-icon badge badge-danger">{{ 'error'|trans }}</span> <span class="form-error-message">{{ error.message }}</span></li>


just a raw idea: instead of "error", we put that "X" unicode cross,
then we add a translation table where this "X" maps to "ERROR" in english, same in a few other languages,
but if we don't have the translation for the word "error", the cross is displayed instead - as it is more universal than "error", isn't it?
makes sense?

Nyholm · 2018-03-01T09:55:05Z

I've added more translations. Fabbot is a false negative.

nicolas-grekas · 2018-03-01T10:20:57Z

Thank you @Nyholm.

… (Nyholm) This PR was squashed before being merged into the 3.4 branch (closes #26327). Discussion ---------- [Form][WCAG] Errors sign for people that do not see colors | Q | A | ------------- | --- | Branch? | 3.4 | Bug fix? | no | New feature? | yes | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | | License | MIT | Doc PR | According to my friend and WCAG2 expect [Sandra](https://twitter.com/sandrability): > The form errors is correctly encoded and works great. But visually they may be hard to see for people that do not see colors very well. Try to improve errors with an icon to make it more visual clear that an error has occurred. ![screen shot 2018-02-26 at 17 42 01](https://user-images.githubusercontent.com/1275206/36802282-c81357c6-1cb4-11e8-843c-4592e3d597f9.png) Commits ------- 3f8cd05 [Form][WCAG] Errors sign for people that do not see colors

Nyholm · 2018-03-01T10:23:57Z

Great. Thank you

…o not see colors)

…that do not see colors) (mweimerskirch) This PR was submitted for the 3.4 branch but it was merged into the 2.7 branch instead (closes #26715). Discussion ---------- Added LB translation for #26327 (Errors sign for people that do not see colors) | Q | A | ------------- | --- | Branch? | 3.4 | Bug fix? | n/a | New feature? | no | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | #26327 | License | MIT Commits ------- c1fae9e Added LB translation for #26327 (Errors sign for people that do not see colors)

* 2.7: [HttpCache] Unlink tmp file on error Added LB translation for #26327 (Errors sign for people that do not see colors) [TwigBridge] Fix rendering of currency by MoneyType [HttpKernel] DumpDataCollector: do not flush when a dumper is provided

* 2.8: fixed deprecated messages in tests [HttpCache] Unlink tmp file on error Added LB translation for #26327 (Errors sign for people that do not see colors) [TwigBridge] Fix rendering of currency by MoneyType [HttpKernel] DumpDataCollector: do not flush when a dumper is provided

* 3.4: (24 commits) moved Twig runtime to proper class fixed deprecated messages in tests add PHP errors options to XML schema definition [HttpCache] Unlink tmp file on error Added LB translation for #26327 (Errors sign for people that do not see colors) [TwigBridge] Fix rendering of currency by MoneyType Import InvalidArgumentException in PdoAdapter [DI] Do not suggest writing an implementation when multiple exist [Intl] Update ICU data to 61.1 Use 3rd person verb form in command description [Validator] Add Japanese translation Support phpdbg SAPI in Debug::enable() [HttpKernel] DumpDataCollector: do not flush when a dumper is provided [DI] Fix hardcoded cache dir for warmups [Routing] fix tests [Routing] Fixed the importing of files using glob patterns that match multiple resources [Ldap] cast to string when checking empty passwords [Validator] sync validator translation id [WebProfilerBundle] use the router to resolve file links no type errors with invalid submitted data types ...

* 4.0: (24 commits) moved Twig runtime to proper class fixed deprecated messages in tests add PHP errors options to XML schema definition [HttpCache] Unlink tmp file on error Added LB translation for #26327 (Errors sign for people that do not see colors) [TwigBridge] Fix rendering of currency by MoneyType Import InvalidArgumentException in PdoAdapter [DI] Do not suggest writing an implementation when multiple exist [Intl] Update ICU data to 61.1 Use 3rd person verb form in command description [Validator] Add Japanese translation Support phpdbg SAPI in Debug::enable() [HttpKernel] DumpDataCollector: do not flush when a dumper is provided [DI] Fix hardcoded cache dir for warmups [Routing] fix tests [Routing] Fixed the importing of files using glob patterns that match multiple resources [Ldap] cast to string when checking empty passwords [Validator] sync validator translation id [WebProfilerBundle] use the router to resolve file links no type errors with invalid submitted data types ...

Adding error sign

d9ad1cc

carsonbot added Status: Needs Review Form Feature labels Feb 26, 2018

nicolas-grekas added this to the 3.4 milestone Feb 26, 2018

Fixed tests

839c2b4

fabpot closed this Feb 27, 2018

fabpot reopened this Feb 27, 2018

carsonbot added Status: Reviewed and removed Status: Needs Review labels Feb 27, 2018

fabpot approved these changes Feb 27, 2018

View reviewed changes

carsonbot added Status: Needs Work and removed Status: Reviewed labels Feb 27, 2018

Adding "error" badge

4632f79

carsonbot added Status: Reviewed and removed Status: Needs Work labels Mar 1, 2018

nicolas-grekas approved these changes Mar 1, 2018

View reviewed changes

nicolas-grekas reviewed Mar 1, 2018

View reviewed changes

Nyholm added 3 commits March 1, 2018 09:59

Updated conflicts on composer.json

e938404

Adding translations

3445665

Added some more translations

ac33927

Added more languages

ee3045c

nicolas-grekas approved these changes Mar 1, 2018

View reviewed changes

Fixed tests

b61ed78

nicolas-grekas closed this Mar 1, 2018

Nyholm deleted the 3-wcag-error branch March 1, 2018 10:24

This was referenced Mar 1, 2018

Release v3.4.5 #26362

Merged

Release v4.0.5 #26363

Merged

mweimerskirch added a commit to mweimerskirch/symfony that referenced this pull request Mar 30, 2018

Added LB translation for symfony#26327 (Errors sign for people that d…

30ade8d

…o not see colors)

mweimerskirch mentioned this pull request Mar 30, 2018

Added LB translation for #26327 (Errors sign for people that do not see colors) #26715

Merged

fabpot pushed a commit to mweimerskirch/symfony that referenced this pull request Mar 31, 2018

Added LB translation for symfony#26327 (Errors sign for people that d…

c1fae9e

…o not see colors)

MatTheCat mentioned this pull request Nov 4, 2022

Missing translation in bootstrap_4_layout.html.twig #48104

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Form][WCAG] Errors sign for people that do not see colors #26327

[Form][WCAG] Errors sign for people that do not see colors #26327

Nyholm commented Feb 26, 2018 •

edited

Loading

fabpot commented Feb 27, 2018

Nyholm commented Feb 27, 2018

javiereguiluz commented Feb 27, 2018

ogizanagi commented Feb 27, 2018

Nyholm commented Feb 27, 2018

nicolas-grekas commented Feb 27, 2018

Nyholm commented Feb 28, 2018

javiereguiluz commented Feb 28, 2018

nicolas-grekas commented Mar 1, 2018 •

edited

Loading

nicolas-grekas Mar 1, 2018 •

edited

Loading

Nyholm commented Mar 1, 2018

nicolas-grekas commented Mar 1, 2018

Nyholm commented Mar 1, 2018

[Form][WCAG] Errors sign for people that do not see colors #26327

[Form][WCAG] Errors sign for people that do not see colors #26327

Conversation

Nyholm commented Feb 26, 2018 • edited Loading

fabpot commented Feb 27, 2018

Nyholm commented Feb 27, 2018

javiereguiluz commented Feb 27, 2018

ogizanagi commented Feb 27, 2018

Nyholm commented Feb 27, 2018

nicolas-grekas commented Feb 27, 2018

Nyholm commented Feb 28, 2018

javiereguiluz commented Feb 28, 2018

nicolas-grekas commented Mar 1, 2018 • edited Loading

nicolas-grekas Mar 1, 2018 • edited Loading

Choose a reason for hiding this comment

Nyholm commented Mar 1, 2018

nicolas-grekas commented Mar 1, 2018

Nyholm commented Mar 1, 2018

Nyholm commented Feb 26, 2018 •

edited

Loading

nicolas-grekas commented Mar 1, 2018 •

edited

Loading

nicolas-grekas Mar 1, 2018 •

edited

Loading