no-static-element-interactions制限の回避

入力不可のhtmlタグにonClickなどのイベントを登録すると、eslintのno-static-element-interactionsルール違反の警告が表示されてしまいます。

Visible, non-interactive elements should not have mouse or keyboard event listeners

回避方法

eslintの行禁止コメントを該当タグに追記します。

<dl // eslint-disable-line jsx-a11y/no-static-element-interactions
  onClick={e => this.changeType(e, '1')}
>

タップした際の半透明背景の表示禁止

AndroidやiOSでボタン及びラベルをタップした時に、半透明の背景が一瞬に表示され、ユーザにタップされたことを知らせるために、非常に有用な情報です。
ただし、dlをタップすると、dl領域ブロックがボタン押下のような表示が望ましいではない場合があります。その時は、下記のstyleを設定すればそれを無効化することができます。

<dl // eslint-disable-line jsx-a11y/no-static-element-interactions
  onClick={e => this.changeType(e, '1')}
  style={{ '-webkit-tap-highlight-color': 'rgba(0,0,0,0)' }}
              >