パスワードの欄の横に目のアイコンのボタンを置き、押すたびに入力した文字を見せたり隠したりする部品を React で作りました。ボタンの type、aria-pressed の付け方、キーボードでの操作、フォーカスとカーソルの位置を、検 ...

チャットの一覧で、新しいメッセージが届いたら一番下までスクロールし、上の会話を読んでいる間は動かさずに「新着○件」のボタンを出す部品を React で作りました。下にいるかの判定のタイミング、画像の読み込み、scrollIntoVie ...

フォルダとファイルのような階層を、React でツリー表示する部品を作りました。パスの一覧から入れ子のデータを作る方法、開いているフォルダを Set で持つ理由、role=”tree” の付け方、矢印キーでの操 ...

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

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

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

指でめくると1枚ずつ止まる画像のカルーセルを、React と CSS Scroll Snap で作りました。前へ・次へのボタン、何枚目かの表示、ページが縦に動かないめくり方、画面の幅が変わったときの動きを、検証環境で確かめています。

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

タブを ←→・Home・End で切り替えられるように、React と TypeScript で作りました。Tab キーで止まるタブを1つにする tabindex の付け方、ref の配列でフォーカスを動かす書き方、Enter で切り ...

React Routerのデータモードでは、ローダーを待つあいだ前の画面が残ります。useNavigationで画面上部に読み込みバーを出す方法、NavLinkのpendingクラスとisPendingで、押したリンクの文字を灰色にし ...