• HTMLのグローバル属性で、ページ読み込み時に要素にフォーカスを当てる
• どの要素にも付与できる（フォーカス可能な要素でのみ効果あり）
• 複数の要素に付与することができるが、フォーカスは最初のものに当たる

<input type="text" autofocus />

• ESLintのエラーなので、単純にautofocusを消すこともできた
• でも知らなかった属性だったので、ちゃんと調べてみた

ページ読み込み時に意図しない場所へフォーカスが飛ぶ

• MDN - autofocus
• MDN - dialog
• W3C APG - Dialog (Modal) Pattern
• W3C APG - Alert Dialog Example

• autofocusはユーザーの操作に応じて表示される要素で使うべき
  • ダイアログ / モーダル
  • ポップオーバー
  • ドロワー
• ページの初期読み込み時には使わない
• 「ユーザーがアクションを起こした結果、フォーカスが移る」のが正しい

• ユーザーが能動的にダイアログを開いている
• フォーカスがダイアログ内に移ることは期待される動作
• スクリーンリーダーでも自然な流れになる
• フォーカストラップと組み合わせるとさらに良い

ユーザーの操作でダイアログが開き、入力欄にフォーカス

不可逆な操作ではキャンセルにフォーカスを置き、誤操作を防ぐ

• 最近チームでデザインシステムを構築中
• チームメンバーがDialogコンポーネントを実装
• レビュー時に「フォーカス制御あるかな？」と確認したら…あった！

• Dialog.Content に onOpenAutoFocus propがある
• HTML autofocus を使わずにフォーカス制御ができる → Linterにも怒られない

<Dialog.Content
  onOpenAutoFocus={(event) => {
    event.preventDefault();
    cancelButtonRef.current?.focus();
  }}
>
  ...
</Dialog.Content>

• onCloseAutoFocus で閉じた後のフォーカス先も制御できる

HTML autofocusなしで、Linterにも怒られない

• Base UIのDialogには initialFocus propがある
• Radix UI: onOpenAutoFocus / Base UI: initialFocus — アプローチは違うが同じことができる
• shadcn/uiはどちらのプリミティブにも対応しているので、いい感じにフォーカス制御できる

• autofocusはどの要素にも付けられるグローバル属性
• Linterが警告するのはa11y的にユーザーを混乱させる可能性がある
• ダイアログやモーダル内での使用が正しいパターン
• UIライブラリにもフォーカス制御の仕組みが用意されている
• ESLintのエラーを「消す」のではなく「調べた」ことで正しい知識を得られた