Reactで<div>のonKeyDownイベントが実行されない時の対処法

TL;DR(要約)

• <div>をフォーカスを持たせるためには、tabIndex属性を使用する。
• Tabキーで<div>に到達可能にするならtabIndex={0}、到達不可にするならtabIndex={-1}を<div>に追加する。

前書き

私事ですが、Githubが提供しているOSSの Github Desktop のコントリビューターになりました。
コントリビューターになるために対応したIssue以外にも、Github DesktopのIssuesにて表示中のリストがEscキーを入力しても非表示に切り替わらない不具合が報告されていました。

コントリビューターになりましたが、ボタンのラベルを変えただけだったのでこの不具合の対処も行ってみました。

対処法

Github DesktopはReactを使用しています。
そのReactで<div>のonKeyDownイベントが実行されないという質問が stackoverflow に投稿されていました。
質問の回答では、tabIndexを使用することで解決すると書かれていたので、実行しました。

app\src\ui\toolbar\dropdown.tsx

...
        <div
          className="foldout"
          style={this.getFoldoutStyle()}
          tabIndex={-1} // 追加
          onKeyDown={this.onFoldoutKeyDown}
        >
          {this.props.dropdownContentRenderer()}
        </div>
...

実行結果は以下のGIFになります。

原因

<div>は入力要素ではないので、デフォルトではフォーカスを持てないというHTMLの仕様によるものでした。
そのため<div>にフォーカスを持たせるには、<div>に明示的にtabIndexを設定する必要があります。

例

See the Pen oOmyEL by roottool (@roottool) on CodePen.

後書き

皆さんもOSSのコントリビューターになってみませんか？

Github Help WantedというGithub上で公開されているIssueを検索出来るサイトがあります。
皆さんもhelp wantedタグがついたIssueの解決に貢献して、OSSのコントリビューターになってみてはいかがでしょうか。
各OSSに作成されているIssue内でもgood first issueタグのついたIssueは、対象のOSSに対するIssueに初めて取り組む方向けなIssueになっています。

英語でプルリクエストを書くのは難しそう

小難しい説明はGoogle翻訳で翻訳した英文、翻訳結果の英文を推敲した英文、拙い英文でも大丈夫です。
コードレビューでコードの指摘はあれど、英文については通じたのか指摘された経験はありませんでした。
不安であれば、プルリクエストを作成する対象のOSSに既に作成されているプルリクエストの文章を参考にすると良いと思います。
自分の場合は、プルリクエストの詳細を簡潔に記載している英文があればその言い回しを真似たりしています。(例：This PR fixes ~.)

最後に

Thank you for your patience and cooperation!(あなた方の忍耐と協力に感謝します！)