Dark Mode を入れたときに、Lint にいろいろ怒られたのでメモします。
Warning なのでしばらくほっといたんだけど、いい加減うざくなった・・・。
怒られた箇所
ナビゲーションバーの右端に Dark Mode のトグルを置いたので、ファイルはその場所です。
src\components\navbar.js
return (
<div
style={{ cursor: `pointer` }}
onClick={() =>
toggleTheme(theme === 'dark' ? 'light' : 'dark')
}
>
{theme === 'dark' ? '🌞' : '🌙'}
</div>
)Warning その 1
warning Visible, non-interactive elements with click handlers must have at least one keyboard listener
私訳：キーボードでも発火できるようにしてね！
ほほう・・
Warning その 2
warning Static HTML elements with event handlers require a role
私訳：role を使え！（役割はちゃんと指定しろや）
Warning その 3
warning Elements with the ‘button’ interactive role must be tabbable
role をとりあえず突っ込んだ後に指摘されたのがこれ。
私訳：tabbable もよろ
最終的にこうなった
とてもやっつけ仕事感あふれるアフター。疲れたので寝ます。
src\components\navbar.js
...
return (
<div
role="button"
tabIndex={0}
style={{ cursor: `pointer` }}
onClick={() =>
toggleTheme(theme === 'dark' ? 'light' : 'dark')
}
onKeyDown={() =>
toggleTheme(theme === 'dark' ? 'light' : 'dark')
}
>
{theme === 'dark' ? '🌞' : '🌙'}
</div>
)
...