When visiting the "reset password" route of my single-page app and looking at the Chrome browser console, I am greeted with the following warning:
[DOM] Password forms should have (optionally hidden) username fields for accessibility: (More info: goo.gl/9p2vKq)
<form class="searchAccount_form animated fadeIn form-tabular ng-pristine ng-valid ng-scope ng-hide" ng-show="isSet(6)" aria-hidden="true">
<h5>Choose a new password</h5>
<hr class="mt-0">
<p>A strong password is a combination of letters and punctuation marks. It must be at least 6 characters long.</p>
<div class="form-group row">
<label class="col-form-label col-4">New Password</label>
<div class="col-7">
<input autocomplete="new-password" class="form-control ng-pristine ng-untouched ng-valid ng-empty" type="password" ng-model="$parent.new_pass" name="password" ng-attr-type="{{ showPassword ? 'text':'password'}}" aria-invalid="false">
</div>
</div>
<div class="form-group">
<input type="hidden" name="username" value="craig.francis" autocomplete="off" readonly="readonly">
<input type="hidden" name="csrf" value="tr6Gj6w6LczH98" autocomplete="off">
<button type="button" class="btn btn-primary" name="button" ng-click="reset_password()">Continue</button>
<button type="button" class="btn btn-link" name="button" ng-click="setTab(2)">Skip</button>
</div>
</form>
If your question is about getting rid of this warning, you may add a hidden text-box as mentioned in the warning message.
<input type="text" autocomplete="username" ng-hide="true">
You should add text
or email
input type with autocomplete="username"
attribute before all password inputs. It can be disabled
or readonly
.
<form method="post">
<input type="text" autocomplete="username" value="{{username}}">
or
<input type="email" autocomplete="username email" value="{{username}}">
<input type="password" name="password">
</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