# no-noninteractive-element-interactions Non-interactive HTML elements and non-interactive ARIA roles indicate _content_ and _containers_ in the user interface. A non-interactive element does not support event handlers (mouse and key handlers). Non-interactive elements include `
`, ``, `

` (,`

`, etc), `

`, ``, `

  • `, `
  • ``` ### Case: This element is a table cell Table cells (and tables in general) are meant to contain data. ARIA provides us with a construct called a [Grid](https://w3c.github.io/aria-practices/#grid) that is essentially a 2 dimensional logical container for content and interactive elements. You have two options in this case. #### Option 1, move the interactive content inside the table cells For instance, move the button inside the cell: ```jsx
    ``` This preserves the table cell semantics and the button semantics; the two are not conflated on the cell. #### Option 2, convert the table into an ARIA grid If your user interface has a table-like layout, but is filled with interactive components in the cells, consider converting the table into a grid. ```jsx
    Sort
    ``` You can also put the interactive content inside the grid cell. This maintains the semantic distinction between the cell and the interaction content, although a grid cell can be interactive. ## 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. ```javascript 'jsx-a11y/no-noninteractive-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 ```jsx
    void 0} role="button" />
    void 0} role="presentation" /> void 0} /> // Interactive element does not require role.