表の各行と見出しにチェックボックスを置き、行をまとめて選べるようにしました。選んだ行を id の Set で持つ書き方、見出しの「一部だけ選択」の表示、Shift を押したクリックでの範囲選択、選んだ行の削除を確かめています。 ...

React Routerのデータモードでは、ScrollRestorationを1つ置くだけで、戻るボタンで一覧に戻ったときに元のスクロール位置が復元され、新しいページは上から表示されます。ローダーとの関係、getKeyとpreven ...

パソコンのファイルをドラッグして置ける場所を、React と TypeScript で作りました。drop を受け取る条件、強調のちらつきを防ぐ数え方、枠の外へのドロップの止め方、ボタンからの選択を扱います。

入力に合わせて候補を出すオートコンプリートやサジェストを、↑↓・Enter・Esc で操作できるようにする方法です。React でコンボボックスを作り、フォーカスを入力欄に置いたまま aria-activedescendant で候補 ...

「保存しました」のようなトースト通知を、ライブラリを使わずにReactで作る方法です。どこからでも呼べるtoast()、一定時間で消すタイマー、マウスやフォーカスで止める処理、読み上げ用の領域、モーダルのdialogとの関係を確かめま ...

送信ボタンを続けて押しても、注文が1件だけ作られるようにする方法です。送信中にボタンを無効にする書き方、refで止める書き方、formのactionの場合と、サーバー側でIdempotency-Keyを使う方法を確かめました。 ...

メニューやドロップダウンを、外側をクリックしたら閉じるカスタムフックを TypeScript で作りました。開くボタンを内側に入れる理由、click ではなく pointerdown を待つ理由、ポータルの中の扱い、タッチ操作での動き ...

React で img に loading=”lazy” を付けて遅延読み込みし、onLoad と onError で読み込み中の表示を出す方法です。width・height、key での作り直し、ハイドレーシ ...

react-markdownは、何も設定しなければMarkdownの中のHTMLを文字のまま表示し、javascript:のリンクも消します。rehype-sanitizeの置き場所と、HTMLを使わないときの設定を確かめました。

自作のモーダルを開いている間、後ろの画面を包む要素に inert を付けると、Tab キーのフォーカスもクリックも届かなくなり、アクセシビリティツリーからも外れます。フォーカストラップを作るときは、後ろの画面へフォーカスが移らないよう ...