it-swarm.com.de

Chrome Warnung "[DOM] Passwortformulare sollten (optional ausgeblendete) Benutzernamenfelder für die Barrierefreiheit enthalten" in der Konsole, auch wenn das Feld "Benutzername" ausgeblendet ist

Beim Aufrufen der Route zum Zurücksetzen des Passworts in meiner einseitigen App und Betrachten der Chrome Browser-Konsole) werde ich mit der folgenden Warnung begrüßt:

[DOM] Passwortformulare sollten (optional ausgeblendete) Benutzernamenfelder für die Barrierefreiheit enthalten: (Weitere Informationen: goo.gl/9p2vKq )

Hilfreich ist, dass der HTML-Code des betreffenden Formulars in der nächsten Zeile auch auf der Konsole ausgegeben wird und ganz klar ein verstecktes Feld für den Benutzernamen enthält :

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

Ich habe ein paar kleinere Variationen ausprobiert - das Feld für den Benutzernamen sichtbar machen, es nur lesbar markieren, es außerhalb von div verschieben - ohne die Warnung zu beeinflussen. Wie wird erwartet, dass Chrome den Nutzernamen erhalten?

Problem tritt bei Chrome 63 und 64 auf.

20
arne.b

Ich hatte das gleiche problem Nach einigem Graben stellte ich fest, dass es sich um ein input -Element vom Typ text handeln muss. Mit "optional ausgeblendet" ist gemeint, dass Sie es mit CSS ausblenden können.

Wenn Sie nur ein input mit dem Namen email oder username hinzufügen chrome), erhalten Sie eine weitere Warnung, die besagt, dass input Elemente sind sollte über Autocomplete-Attribute verfügen. Deshalb habe ich mir Folgendes ausgedacht, um diese Fehler zu beheben:

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

Sie müssen den tatsächlichen Benutzernamen oder die E-Mail-Adresse manuell in das Attribut elements value rendern.

Denken Sie auch daran, dass Inline-Stile keine sehr gute Vorgehensweise sind.

17