Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Chrome warning: Password forms should have (optionally hidden) username fields for accessibility

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>
like image 930
Mrinal Jain Avatar asked Jan 31 '18 06:01

Mrinal Jain


2 Answers

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">
like image 149
Gibin Ealias Avatar answered Oct 24 '22 08:10

Gibin Ealias


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>
like image 38
wtorsi Avatar answered Oct 24 '22 06:10

wtorsi