When visiting the "reset password" route of my single-page app and looking at the Chrome browser console, I am greeted with the follwing warning:
[DOM] Password forms should have (optionally hidden) username fields for accessibility: (More info: goo.gl/9p2vKq)
Helpfully, the html of the form in question is also printed to the console in the next line, and quite clearly contains a hidden username field:
<form data-ember-action data-ember-action-436="436">
<div class="form-group">
<label for="newpasswordone">Password</label>
<input type="password" autocomplete="new-password" placeholder="Enter your new password" id="ember437" class="form-control ember-text-field ember-view" data-op-id="0">
<label for="newpasswordtwo">Password (again)</label>
<input type="password" autocomplete="new-password" placeholder="Re-enter your new password" id="ember438" class="form-control ember-text-field ember-view" data-op-id="1">
<input type="hidden" name="username" autocomplete="username" value="a_b">
</div>
<button disabled type="submit" class="btn btn-default">Reset password</button>
</form>
I tried some minor variations -- unhiding the username field, marking it readonly, moving it outside the div
-- without affecting the warning.
How does Chrome expect to be served the username?
Problem occurs with Chrome 63 and 64.
I had the same problem. After some digging, I found that it needs to be an input
element with the type text
. By "optionally hidden" they mean that you may hide it with CSS.
If you just add an input
with the name email
or username
chrome gives you another warning saying that input
elements should have autocomplete attributes. So this is what I came up with to fix these errors:
<input
type="text"
name="email"
value="..."
autocomplete="username email"
style="display: none;"
>
You will need to manually render the actual username or email into the elements value attribute.
Also, keep in mind that inline styles are not a very good practice.
Use the hidden
attribute instead of type="hidden"
<input hidden type="text" autocomplete="username" value="{{...}}">
I had this same situation. Everything seemed be ok but I still got this verbose.
On my case helped me a relocate this userName input from end of form to begin of that.
It was my code before my changes:
<form id="changePass">
<div class='modal-dialog'>
<input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>
<div class="modal-footer">
<button type="button" id="change-password-ok-button">Ok</button>
<button type ="button" data-dismiss="modal">Close</button>
</div>
</div>
<input id="userName" name="username" autocomplete="username" value="">
</form>
And this is current code:
<form id="changePass">
<input id="userName" name="username" autocomplete="username" value="">
<div class='modal-dialog'>
<input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>
<div class="modal-footer">
<button type="button" id="change-password-ok-button">Ok</button>
<button type ="button" data-dismiss="modal">Close</button>
</div>
</div>
</form>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With