no-static-element-interactions.md

no-static-element-interactions

Static HTML elements do not have semantic meaning. This is clear in the case of <div> and <span>. It is less so clear in the case of elements that seem semantic, but that do not have a semantic mapping in the accessibility layer. For example <a>, <big>, <blockquote>, <footer>, <picture>, <strike> and <time> -- to name a few -- have no semantic layer mapping. They are as void of meaning as <div>.

The WAI-ARIA role attribute confers a semantic mapping to an element. The semantic value can then be expressed to a user via assistive technology.

In order to add interactivity such as a mouse or key event listener to a static element, that element must be given a role value as well.

How do I resolve this error?

Case: This element acts like a button, link, menuitem, etc.

Indicate the element's role with the role attribute:

<div
  onClick={onClickHandler}
  onKeyPress={onKeyPressHandler}
  role="button"
  tabIndex="0">
  Save
</div>

Common interactive roles include:

1. button
2. link
3. checkbox
4. menuitem
5. menuitemcheckbox
6. menuitemradio
7. option
8. radio
9. searchbox
10. switch
11. textbox

Note: Adding a role to your element does not add behavior. When a semantic HTML element like <button> is used, then it will also respond to Enter key presses when it has focus. The developer is responsible for providing the expected behavior of an element that the role suggests it would have: focusability and key press support.

Case: This element is not a button, link, menuitem, etc. It is catching bubbled events from elements that it contains

If your element is catching bubbled click or key events from descendant elements, then the proper role for this element is presentation.

<div
  onClick="onClickHandler"
  role="presentation">
  <button>Save</button>
</div>

Marking an element with the role presentation indicates to assistive technology that this element should be ignored; it exists to support the web application and is not meant for humans to interact with directly.

References

1. WAI-ARIA role attribute
2. WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets
3. Fundamental Keyboard Navigation Conventions
4. Mozilla Developer Network - ARIA Techniques

Rule details

You may configure which handler props should be taken into account when applying this rule. The recommended configuration includes the following 6 handlers.

'jsx-a11y/no-static-element-interactions': [
  'error',
  {
    handlers: [
      'onClick',
      'onMouseDown',
      'onMouseUp',
      'onKeyPress',
      'onKeyDown',
      'onKeyUp',
    ],
  },
],

Adjust the list of handler prop names in the handlers array to increase or decrease the coverage surface of this rule in your codebase.

Succeed

<button onClick={() => {}} className="foo" />
<div className="foo" onClick={() => {}} role="button" />
<input type="text" onClick={() => {}} />

Fail

<div onClick={() => {}} />