Reactのフォームで、バリデーションのエラーを入力中は出さず、欄を離れたら出し、直した瞬間に消したいときの方法です。エラーの代わりに「欄に触れたか」と「送信したか」をstateに持ちます。画面がずれてボタンが押せなくなる問題の対策も ...

自作のモーダルを閉じると、フォーカスはページの先頭に飛びます。開く前の要素を覚えて、閉じたときに戻すフックの書き方と、autoFocus で覚える要素がずれる落とし穴、元のボタンが消えたときの戻し先を、検証環境で確かめて紹介します。

aria-liveやrole=”status”の付いた領域は、中身が変わるとスクリーンリーダーに伝わります。Reactでは、領域を最初から置いておき、中の文だけを変えるのが基本です。同じ文が続くときの対処も、C ...

見出しのクリックで表を昇順・降順にソートしたいときの、TanStack Table の getSortedRowModel の使い方です。クリックごとの並び方の切り替わり、Shift を押して複数の列で並べる方法、日本語の名前の比べ方 ...

dialog要素をshowModal()で開くと、Escキーで閉じる、後ろを操作できなくする、フォーカスを戻すといった処理をブラウザが受け持ちます。Reactのstateとずれないようにつなぐ書き方を、検証環境で確かめて紹介します。

dnd-kit の @dnd-kit/sortable で、ドラッグで並べ替えられる一覧を TypeScript で作りました。やることリストのように、ドラッグ＆ドロップで順番を入れ替える縦の一覧に使えます。マウスとキーボードでの並べ ...

入力欄の部品で id を決め打ちにすると、同じ部品を2つ置いたときに id が重なり、2つ目のラベルを押しても1つ目の入力欄にフォーカスが移ります。useId で部品ごとに id を作り、ラベルや説明文と結びつける書き方と、数を数えて ...