Material [Violation] warning / WCAG 2.0 check

[stekontar]

I'm submitting a

[] Bug / Regression
[ ] Feature Request / Proposal
[x] Question

I'm using

NG Dynamic Forms Version: `5.0.2`

[ ] Basic UI
[ ] Bootstrap UI  
[ ] Foundation UI
[ ] Ionic UI
[ ] Kendo UI
[x] Material  
[ ] NG Bootstrap
[ ] Prime NG

Description

Hi @udos86

I am facing 2 issues

1. I was using material version 5.0.0-rc.0, I tried to update it to 5.0.1 but the following error was occurred
   [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. angular/components#4221
   have you done anything about this? as I cannot see any "warnings" while I am running your version.
   please notice that despite is appeared as warning is very critical because it slows down a lot the hole application. (2-3 sec to render a simple form)

2. I want my application to pass WCAG 2.0
   https://www.w3.org/TR/2008/REC-WCAG20-20081211/
   but I am facing an issue with the label of input text. Currently there is an dynamicId that sets the id of the input type But the label "for=" attribute is pointing to something else.
   The issue appeared also in your demo
   (copy outer html from developer tools past it in https://achecker.ca/checker/index.php and check it)
   If I remove the [dynamicId] attribute the error is not persist any more. Any suggestions?

Regards,
S.

[udos86]

@stekontar Hi!

have you done anything about this?

Nothing I'm aware of. Actually I've never seen this warning to date.

But the label "for=" attribute is pointing to something else.

Could you be a bit more specific? Where exactly are those WCAG violations located in the template file?

[stekontar]

Good Morning
This is a warning message that appears only in chrome. ( I am using linux mint 18.1)
some references :

1. Chrome is logging [Violation] errors in verbose console mode plotly/plotly.js#1795
2. https://github.com/Microsoft/PowerBI-JavaScript/issues/236

About WCAG

if you are going to your live material example and inspect the "First Name" field you will see that input has "id=firstName" but the attribute "for" of its label is "for=mat-input-3"
which means that the label is pointing to "undefined" input.

here you can check the rules for WCAG
https://www.w3.org/TR/2008/REC-WCAG20-20081211/

and here you can test your site
https://achecker.ca/checker/index.php
(please follow the "Paste HTML Markup" option)

Regards,
S.

[udos86]

@stekontar

Thanks for pointing that out!

I'll deliver major improvements on this in 5.3.1 patch version.

Initially I had to introduce the dynamic id to avoid duplicate ids when using form arrays.