​​React​HTML,Playwright,TypeScript,アクセシビリティ

Thumbnail of post image 200

​

入力欄の下に「あと○文字」を出し、上限が近づいたら色を変え、超えたら送信を止める部品を React で作りました。絵文字を1文字と数える方法、maxLength で入力を止めたときに起きること、変換中の文字の扱いを、検証環境で確かめて ...

​​React​HTML,Playwright,TypeScript,フォーム

Thumbnail of post image 192

​

開始日と終了日を選ぶ入力欄を、input type=”date” を2つ並べて React で作りました。終了日の min に開始日を渡す書き方、開始日を後ろにずらしたときの扱い、送信される値、日数の計算での夏 ...

​​React​CSS,HTML,Playwright,TypeScript,アクセシビリティ

Thumbnail of post image 198

​

星をクリックして1〜5の評価を選ぶ入力欄を、React と radio ボタンで作りました。マウスを乗せたときの見え方、矢印キーでの操作、フォームで送られる値、必須にしたときの動きを、検証環境で確かめています。

​​React​CSS,HTML,Playwright,TypeScript,useState,アクセシビリティ

Thumbnail of post image 133

​

details と summary でアコーディオンを作ると、開閉とキーボード操作はブラウザに任せられます。React の state で開閉を持つときに onToggle が要る理由、name 属性で1つだけ開く作り、三角の消し方と ...