Chrome Autocomplete fix vs Accessibility for visual impairment

[dorogoy]

This is a global problem for Formly and can be seen using the WAVE service (http://wave.webaim.org/). Here is an example from a form on the tutorials:

http://wave.webaim.org/report#/http://output.jsbin.com/gagilo/1

As you can notice, one of the critical errors is a missing form label from the hack added to fix Chrome autocompletion:

<input autocomplete="address-level4" hidden="true">

Yes, a hack is always bad. Not being of type="hidden", accessibility is broken and I guess that an <input type="hidden"> would not fix the autocompletion problem either. Due to this problem, people with visual impairment have a bit more difficulties to use the forms from Formly.

I know where to change the code, inside the function fixChromeAutocomplete(), but don't know how to maintain the chrome hack and accessibility, both at the same time. Adding a aria-label="chromehack" would do the job for the WAVE utility of course, but looks so weird for people actually using it. What do you think can be done?

[egucciar]

Can you reproduce this in a fiddle?

What happens to the screen-reader if the CSS is display none or visibility hidden? can we hide it with CSS? I do not know much about the chrome hack , just giving my guess.