title: How to work around jsx-a11y/no-static-element-interactions restriction?
body: <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>