no-noninteractive-element-to-interactive-role

Non-interactive HTML elements indicate content and containers in the user interface. Non-interactive elements include <main>, <area>, <h1> (,<h2>, etc), <img>, <li>, <ul> and <ol>.

Interactive HTML elements indicate controls in the user interface. Interactive elements include <a href>, <button>, <input>, <select>, <textarea>.

WAI-ARIA roles should not be used to convert a non-interactive element to an interactive element. Interactive ARIA roles include button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch and textbox.

How do I resolve this error?

Case: This element should be a control, like a button

Put the control inside the non-interactive container element.

```

  • {}} onKeyPress={() => {}}> Save

    • ```

    Or wrap the content inside your interactive element.

    ```

    {}} onKeyPress={() => {}} tabIndex="0"> Save

    ```

    References

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

    Rule details

    The recommended options for this rule allow several common interactive roles to be applied to a non-interactive element. The options are provided as an object keyed by HTML element name; the value is an array of interactive roles that are allowed on the specified element.

    { 'no-noninteractive-element-to-interactive-role': [ 'error', { ul: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'], ol: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'], li: ['menuitem', 'option', 'row', 'tab', 'treeitem'], table: ['grid'], td: ['gridcell'], }, ] }

    Under the recommended options, the following code is valid. It would be invalid under the strict rules.

    ```