web-dev-qa-db-fra.com

Chrome avertissement "[DOM] Les formulaires de mot de passe doivent avoir des champs de nom d'utilisateur (éventuellement masqués) pour l'accessibilité" dans la console, même avec un champ de nom d'utilisateur caché

Lorsque je visite l'itinéraire "réinitialiser le mot de passe" de mon application d'une seule page et que je regarde la console du navigateur Chrome, je suis accueilli par l'avertissement suivant:

[DOM] Les formulaires de mot de passe doivent avoir des champs de nom d'utilisateur (éventuellement masqués) pour l'accessibilité: (Plus d'informations: goo.gl/9p2vKq )

Utilement, le code HTML du formulaire en question est également imprimé sur la console à la ligne suivante, et contient assez clairement un champ de nom d'utilisateur caché :

<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>​

J'ai essayé quelques variantes mineures - dévoiler le champ du nom d'utilisateur, le marquer en lecture seule, le déplacer en dehors du div - sans affecter l'avertissement. Comment Chrome s'attend-il à recevoir le nom d'utilisateur?

Un problème se produit avec Chrome 63 et 64.

google-chromeautocompletehidden-fieldpassword-recovery
20
arne.b

J'ai eu le même problème. Après quelques recherches, j'ai trouvé qu'il devait s'agir d'un élément input avec le type text. Par "éventuellement masqué", ils signifient que vous pouvez le masquer avec CSS.

Si vous ajoutez simplement un input avec le nom email ou username chrome vous donne un autre avertissement disant que les éléments input devrait avoir des attributs de saisie semi-automatique. Voici donc ce que j'ai trouvé pour corriger ces erreurs:

<input type="text" name="email" value="..." autocomplete="username email" style="display: none;">.

Vous devrez rendre manuellement le nom d'utilisateur ou l'e-mail réel dans l'attribut de valeur des éléments.

Gardez également à l'esprit que les styles en ligne ne sont pas une très bonne pratique.

17
Jonas Hungershausen