いやサクッとサイト作るのにそこまで気が回ってないだけなんやけどさ

主にアクセシビリティについてたくさん小言を言われた気がする。
そんとき調べたことメモ

warning Visible, non-interactive elements with click handlers must have at least one keyboard listener

クリックだけじゃなくてkeyboardエベントでも発火できるようにねって。

javascript – How to add a keyboard listener to my onClick handler? – Stack Overflow
https://stackoverflow.com/questions/48575674/how-to-add-a-keyboard-listener-to-my-onclick-handler

Static HTML elements with event handlers require a role

aタグパーツの役割を示してねって言われた（渡しの場合はボタン）

reactjs – How to fix ‘Static HTML elements with event handlers require a role.’? – Stack Overflow
https://stackoverflow.com/questions/54274473/how-to-fix-static-html-elements-with-event-handlers-require-a-role

warning Elements with the ‘button’ interactive role must be tabbable

たばぶるってなに、って思ったらTABKeyでもフォーカス移動できるようにしてねって話だった

へえへぇすみませんねぇ・・・ javascript – How to fix ‘button’ interactive role must be focusable – Stack Overflow
https://stackoverflow.com/questions/56441825/how-to-fix-button-interactive-role-must-be-focusable

[new!]A control must be associated with a text label

aria-labelをつけなさいだって〜

javascript – A control must be associated with a text label – Stack Overflow
https://stackoverflow.com/questions/58367013/a-control-must-be-associated-with-a-text-label

<i
   role="button"
   aria-label="Mute volume"
   className={classN}
   onClick={this.muteVolume}
   onKeyDown={this.muteVolume}
 />

だって〜