🔑

<input type=password >にはroleが無い！

ツチヤカイタ

2024/02/20に公開

はじめに

jestと@testing-library/reactを使ってinputのテストコードを書く際、パスワードの入力inputを取得する場合にgetByRole("textbox") を使うことはできません。（getByLabelTextや getByPlaceholderTextなどの他のクエリを使用する必要があります）

つまり、下記のテストコードはうまく機能しません。私はこの挙動について知った時に少し驚きました😮

const user = userEvent.setup();
const Component = () => (
  <label>
    パスワード
    <input type="password" />
  </label>
);

test("パスワード入力欄", async () => {
  render(<Component />);
  const input = screen.getByRole("textbox", { name: "パスワード" });
  const v = "password";
  await user.type(input, v);
  expect(screen.getByDisplayValue(v)).toBeInTheDocument();
});

Chromeにおける振る舞い

なぜ、input(type=password)にroleが無いことについて驚いたかと言いますと、私はテストコードを書く際にChromeのdevtoolを使って要素のroleを確認しながら書いたりします。

その際に下記のコードをdevtoolで確認すると、role=textboxとして扱われていました。

  <label>
    パスワード
    <input type="password" />
  </label>

この挙動について、Chromeの公式ドキュメントサイトなどを探してみましたが見つけることができませんでした。おそらく明確に記載されてはいないようです🫥

その他の資料における扱い

MDN:

MDNでは、input(type=password)のページの、暗黙の ARIA ロールの欄に「対応するロールなし」と記載されています。

W3C:

https://www.w3.org/ にinput(type=password)はeditable textであると記載されていました。

<input type = "password"> | editable text

日本語版:

※下記のようにも記載されているのでMDNで言う「暗黙の ARIA ロール」とは別の文脈でのroleなのかもしれません。

支援技術は、アクセシビリティ API を利用して、役割 (role)、識別名 (name)、状態 (state)、値 (value) といった適切なアクセシビリティ情報を抽出し、それらを利用者に提供している。

roleがない理由について

少し調べてみたところ https://github.com/w3c/aria などで時折議論されているようで、下記のように言及している方がいらっしゃいました。おそらくセキュリティの観点からのようです👀

Native <input type="password"> has read protection from scripts, and the charCode of the keyboard events may be protected, too. I don't believe you'd be able to fake the behavior and adequately protect the user's security with an ARIA password field.

That said, it's possible that any risk introduced would be negligible. If you can get the security & privacy interest group to sign off on the edit, I won't object.

（GPT-3.5による翻訳）

ネイティブの <input type="password"> はスクリプトからの読み取り保護があり、キーボードイベントの charCode も保護される可能性があります。ARIAパスワードフィールドでは、その振る舞いを偽造してユーザーのセキュリティを適切に保護することはできないと考えています。

ただし、導入されるリスクが無視できる可能性もあります。セキュリティ＆プライバシーの関心グループが編集に署名することができれば、私は異議を唱えません。

引用元 issue:
https://github.com/w3c/aria/issues/166

その他参考:
https://github.com/w3c/aria/issues/935

まとめ

input(type=password)をテストコード上で扱う場合はrole以外の方法で取得する必要がありますが、アクセシビリティの観点からは特にrole属性やaria属性を追加する必要はなさそうでした。

私は最近になってアクセシビリティに気を配るようになったばかりなのですが、input一つ取ってもとても奥深いですね…!🫠

間違っている点や不適切な箇所などがありましたら、（優しく）ご指摘いただけますと幸いです！すぐに修正いたします。

株式会社ZOZOPublication

ファッションEC「ZOZOTOWN」、ファッションコーディネートアプリ「WEAR」などの各種サービスの企画・開発・運営や、「ZOZOSUIT」「ZOZOMAT」「ZOZOGLASS」などの計測テクノロジーの開発・活用をおこなっています。また、カスタマーサポート、物流拠点「ZOZOBASE」を運営しています。