How to work around jsx-a11y/no-static-element-interactions restriction? : <p>I used the following jsx to construct an entry in a FAQ table:</p>

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

<p>The idea is that when a user click on the entry, it will toggle the open state of the entry. In the other word, when a user clicks on an open FAQ entry, it will close it. Otherwise it will open it.</p>

<p>However the <code>li</code> tag triggers this eslint violation: <code>Visible, non-interactive elements should not have mouse or keyboard event listeners  jsx-a11y/no-static-element-interactions</code></p>

<p>Unfortunately I don't think there is alternative way to the above html markup. 
 Since it is jsx, it also does not allow override such as <code>// eslint-disable-line jsx-a11y/no-static-element-interactions</code>  (The inline comment will be printed out to the web page)</p>

<p>So how I can work around it? Happy to use different jsx markup or jsx eslint override </p>
