web-dev-qa-db-ja.com

jsx-a11y / no-static-element-interactions制限を回避する方法は？

次のjsxを使用して、FAQテーブルにエントリを作成しました。

  <li key={faqKey} className={styles.entry} onClick={handleExpandFn}>
    <div>
      <span className={`icon-next ${questionClassname}`} />
      <span className={styles['question-text']}>{faqEntry.question}</span>
    </div>
    {faqEntry.answer}
  </li>

アイデアは、ユーザーがエントリをクリックすると、エントリの開いた状態を切り替えるというものです。言い換えると、ユーザーが開いているFAQエントリをクリックすると、それが閉じられます。それ以外の場合は開かれます。

ただし、liタグはこのエスリント違反を引き起こします：Visible, non-interactive elements should not have mouse or keyboard event listeners jsx-a11y/no-static-element-interactions

残念ながら、上記のHTMLマークアップに代わる方法はないと思います。 jsxであるため、// eslint-disable-line jsx-a11y/no-static-element-interactionsなどのオーバーライドも許可されていません（インラインコメントはWebページに出力されます）

それで、どうすればそれを回避できますか？別のjsxマークアップまたはjsx eslintオーバーライドを使用して満足

react-jsxeslinteslint-config-airbnb
8
Anthony Kong

私が覚えている1つの解決策は、tab-indexを持つアンカー要素を使用することです。

<a style={{display: 'list-item'}} tabIndex={-42} key={faqKey} className={styles.entry} onClick={handleExpandFn}>
  <div>
    <span className={`icon-next ${questionClassname}`} />
    <span className={styles['question-text']}>{faqEntry.question}</span>
  </div>
  {faqEntry.answer}
</a>
4
JD Hernandez

意味的に適切になるようにマークアップを修正して、オンクリックを<li>から外す方法は次のとおりです。

<li key={faqKey} className={styles.entry}>
  <h3>
    <button type='button' onClick={handleExpandFn}>
      <span className={`icon-next ${questionClassname}`} />
      <span className={styles['question-text']}>{faqEntry.question}</span>
    </button>
  </h3>
  <div className='add_a_panel_class_name_here'>
    {faqEntry.answer}
  </div>
</li>

したがって、上記の場合：<h3>は、FAQのタイトルを、見出しで移動しているスクリーンリーダーユーザーが簡単に検索できるようにします。

<button>を<h3>内に配置すると、クリックイベントをアタッチする適切な要素が得られます（状態を切り替えるため、ここでボタンを使用します。<a>を使用する必要があります。新しいページに移動する場合は、ボタンにtabindexを追加する必要はありません。

ボタンのARIA展開属性とコントロール属性を使用して実装する可能性のある追加の手順がいくつかありますが、上記により、エラーを回避するための適切なベースが得られます。

4
scottohara

あなたはjsXにeslint-disable-lineを置くことができます

  <li // eslint-disable-line jsx-a11y/no-static-element-interactions
    key={faqKey} 
    className={styles.entry} 
    onClick={handleExpandFn}
   >
    <div>
      <span className={`icon-next ${questionClassname}`} />
      <span className={styles['question-text']}>{faqEntry.question}</span>
    </div>
    {faqEntry.answer}
  </li>

別のオプション、role='presentation'を追加

  <li 
    key={faqKey} 
    className={styles.entry} 
    onClick={handleExpandFn} 
    role='presentation'
  >
    <div>
      <span className={`icon-next ${questionClassname}`} />
      <span className={styles['question-text']}>{faqEntry.question}</span>
    </div>
    {faqEntry.answer}
  </li>
0
Mark Swardstrom

実際には、eslintオーバーライドをコメントとしてJSXに追加できます。中括弧{}の内側にコメントをネストして、JavaScriptとして解釈されるようにする必要があります。そしてもちろん、これはJavaScriptコメントであるため、JSXではレンダリングされません。

スタイル設定に応じて、コードの直前の行で行うことができます

{/* eslint-disable-next-line */}
<li key={faqKey} className={styles.entry} onClick={handleExpandFn}>

または、同じ行の終わりに

<li key={faqKey} className={styles.entry} onClick={handleExpandFn}> {/* eslint-disable-line */}

JSX内でJavaScriptを使用する方法の詳細については、 docs を確認してください。

0
Beard Of Dan

対話型の折りたたみ/展開機能を備えたfaqテーブルの実装をロールする代わりに、react-collapsibleに置き換えます。

もちろん、結果としてjsx-a11y/no-static-element-interactionsは取り除かれます。

0
Anthony Kong