【React】クリックできるdiv

以下のように記述するとクリック可能なdivを作成できます。

export function ClickableDiv({ children }: { children: React.ReactNode }) {
  const handleKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
    if ((ev.key === 'Enter' || ev.key === ' ') && !ev.metaKey) {
      // EnterキーまたはSpaceキーが押下された場合の処理
    }
  }

  return (
    <div
      role="button"  // スクリーンリーダーに要素がボタンであることを伝える
      tabIndex={0}  // Tabキーでフォーカスできるようにする
      onClick={() => console.log('divがクリックされました。')}
      onKeyDown={handleKeyDown}  // button　の挙動に合わせる
    >
      {children}
    </div>
  )
}