How to work around jsx-a11y/no-static-element-interactions restriction?

Question

I used the following jsx to construct an entry in a FAQ table:

  <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>

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.

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

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 // eslint-disable-line jsx-a11y/no-static-element-interactions (The inline comment will be printed out to the web page)

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

Prasanna · Answer 1 · 2020-05-14T23:15:03.670

93

For those who are looking for a workaround, use role="presentation" in your tag.

edited May 14 '20 at 23:15

answered Jan 22 '20 at 20:43

Prasanna

4,125
18
41

8

Does `role="presentation"` has negative impact for A11y? – Junior Tour Aug 02 '22 at 03:16

score 14 · Answer 2 · answered Apr 18 '17 at 11:24

Here's how you could revise the markup to be semantically appropriate and get the onclick off the <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>

So with the above: the <h3> will make the titles of the FAQs easily searchable by screen reader users that are navigating by headings

placing the <button> inside of the <h3> gives you the appropriate element to attach a click event to (you want to use a button here because you're toggling state. an <a> should be used if you were going to a new page. You also don't need to add a tabindex to a button as they are inherently focusable).

There are some additional steps you'd likely want to implement, using ARIA expanded and controls attributes on the button, but the above should get you to a good base for moving beyond your error.

Sadly, this is the only right answer here. – Joris Portfolioris Jul 10 '23 at 13:06 — Joris Portfolioris, Jul 10 '23 at 13:06

score 9 · Answer 3 · answered Oct 23 '19 at 23:53

You could put eslint-disable-line in the jsx

  <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>

Another option, add 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>

score 8 · Accepted Answer · answered Apr 11 '17 at 06:52

8

One solution I can remember is to use an anchor element with 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>

answered Apr 11 '17 at 06:52

JD Hernandez

1,785
1
20
29

Thx for the answer. What is a sensible `tabIndex` number? Any integer? – Anthony Kong Apr 11 '17 at 09:33
You can probably use the index of the item if the data comes from an array. – JD Hernandez Apr 11 '17 at 14:24
1

The warning is gone because the `onClick` attribute is moved from a static/non-interactive element (i.e. `

JD Hernandez

Jun 07 '17 at 01:29

score 7 · Answer 5 · answered Apr 21 '21 at 16:19

To overcome or avoid this error in ES Lint.

You can use three things based on your needs and requirements

aria-hidden="true" - will remove the entire element from the accessibility API
role= "presentation" - The presentation role is used to remove semantic meaning from an element and any of its related child elements.
role= "none" - will remove the semantic meaning of an element while still exposing it to assistive technology.

There are limitations as well:

Hide content from assistive technology
Cannot be used on a focusable
Element cannot be used on the parent of an interactive element

score 5 · Answer 6 · answered May 25 '20 at 12:46

5

if you are trying to implement menu using li then the right solution is using role="menuitem" in your li tags. More details about it: https://w3c.github.io/aria/#menuitem

answered May 25 '20 at 12:46

ilyavysotski

109
3
5

score 2 · Answer 7 · answered Oct 19 '20 at 06:47

2

use

aria-hidden="true"

on non interactive element tag. like

<span aria-hidden="true" onClick={() => void}>Text</span>

answered Oct 19 '20 at 06:47

Suben Saha

1,778
16
21

Are you sure this is what you want to do? Prevent screen-readers from letting visually-impaired users know that the element contains "Text"? Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. (source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute) – targumon Feb 04 '21 at 10:48

score 1 · Answer 8 · answered Apr 05 '19 at 21:05

1

You can actually add the eslint override as a comment in JSX. You have to nest the comment inside of braces {}, so that it will be interpreted as JavaScript. Then, of course, since it is a JavaScript comment, it will not be rendered in the JSX.

Depending on your style preference, you can either do it on the line directly before the code

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

or, at the end of the same line

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

Check out the docs for more information on using JavaScript inside of JSX.

answered Apr 05 '19 at 21:05

Beard Of Dan

19
1
4

2

What is the point of using eslint if you re going to turn off warning this way? – Mac_W Aug 21 '19 at 10:23
2

This way only silences a single line's warning(s). ESLint has general rules that work well for the lion share of cases; but, some of those rules are opinionated (and you may have a different opinion). Also, edge-case situations exist. It's better to have the option of using a tool you may not need, than it is to be stuck with that one annoying warning for something that, in your particular case, is not actually an issue. Also, a linter should be an advisor, not a "take it or leave it" dictator. As a programmer, you should have the freedom to make decisions. – Beard Of Dan Aug 28 '19 at 14:00

score -1 · Answer 9 · answered Apr 13 '17 at 11:41

-1

Instead of rolling my implementation of faq table with collapse/expand interactive feature, I replace it with react-collapsible.

It of course gets rid of the jsx-a11y/no-static-element-interactions as a result.

answered Apr 13 '17 at 11:41

Anthony Kong

37,791
46
172
304

How to work around jsx-a11y/no-static-element-interactions restriction?

9 Answers9