web-dev-qa-db-ja.com

Chrome警告「[DOM]パスワードフォームには、アクセシビリティのために（オプションで非表示）ユーザー名フィールドを表示する必要があります」）

単一ページアプリの「パスワードのリセット」ルートにアクセスしてChromeブラウザコンソールを見ると、次の警告が表示されます。

[DOM]パスワードフォームには、アクセシビリティのために（オプションで非表示の）ユーザー名フィールドが必要です：（詳細： goo.gl/9p2vKq ）

助けになるのは、問題のフォームのhtmlもコンソールの次の行に出力されることです。そして、非常に明確に非表示のユーザー名フィールドが含まれています：

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

警告に影響を与えずに、ユーザー名フィールドを非表示にし、読み取り専用としてマークし、divの外側に移動するなど、いくつかの小さなバリエーションを試しました。どのようにChrome=はユーザー名の提供を期待しますか？

Chrome 63および64で問題が発生します。

google-chromeautocompletehidden-fieldpassword-recovery
20
arne.b

同じ問題がありました。少し掘り下げてみると、input型のtext要素である必要があることがわかりました。 「オプションで非表示」とは、CSSで非表示にできることを意味します。

inputまたはemailという名前のusernameを追加した場合、chromeはinput要素という別の警告を表示しますオートコンプリート属性が必要です。だから、これは私がこれらのエラーを修正するために思いついたものです：

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

実際のユーザー名または電子メールを要素のvalue属性に手動でレンダリングする必要があります。

また、インラインスタイルはあまり良い方法ではないことに注意してください。

17
Jonas Hungershausen