label で input[type="file"] を装飾するな

input[type="file"] な要素を装飾する方法を検索したときに、次のような間違った label 要素の使い方を紹介する記事ばかりヒットするのが気になったので書きました。label 要素を使っても問題ない場合もありますが、間違った使い方をしている（しようとしている）人に届きやすいようにこのような表題にしています。 何が問題か 上記の方法は input 要素を display: none で非表示にし、label 要素を使ってヒット領域を拡大させて「ファイルを選択」ボタンを表現するという方法ですが、この方法ではフォーカスが当たりません。また、tabindex 属性に非負の値を設定しフォーカスを当てられるようにしても label は clickable な要素ではないので Space / Enter キーで click イベントを発火することができません。 どうするべきか butto

[sgo2]

注意深く見ればタグで分かるのだけど、何に関する話だと前置きしないのは、アクセシビリティの観点で良くない。

[kvx]

ドロップのみだとそれこそアクセシビリティ的にNGになる。クリック、タップ、キーボードで操作できないとね。

[umai_bow]

JS書きたくない…これinputを透明にするのじゃダメなんだっけ

[Rishatang]

「:focus + label」でも確かにできるけど、for属性指定しないといけないのめんどいので:focus-within使うのが一番ラクだと思う

[ejointjp]

2022年にもなってinput要素の装飾が未だに不便すぎるのってどういうことなんだろう。

[cartman0]

inputそのものを装飾できないのはなんでなんだっけ？そっちのほうが手っ取り早いのに

[vamview]

昔やった時はこの方法だと上手くいかなかった記憶があってセキュリティ的にもまぁそうだろうなと思ってたけど、最近のブラウザは許してくれるようになったのかな

[sugarte]

type="file"を装飾するときはクリッカブルにするためにbutoon要素を使うといい

[otchy210]

「CSS だけで実装できる」がこの問題とされる実装のモチベーションだと思うので、a11y と同時にそっちもクリアできる実装じゃないと普及しないかも？

[mayumayu_nimolove]

dqnの記事

[xll]

“button 要素を使い、クリック時に input 要素の click イベントを発火させましょう。”

[Shinwiki]

ドロップしか受けたくないんだけど

[razokulover]

たしかに

[t_motooka]

これはごもっとも。

[newnakashima]

JSを書かずに済ますためにlabel使ってるのかと思ってた