How to fix warning "interaction added to non-interactive element no-invalid-interactive"

Question

I just upgraded my Ember addon from version 3.0 to version 3.8, and I get this warning now:

Interaction added to non-interactive element no-invalid-interactive

An example of this is something like:

<div class="some-class" onclick={{action "selectDate" "today"}}>
    <div> more content </div>
</div>

When you click the action, it should take you to a new route.

What are my options to fix it the right way, so that it is accessible?

Answer 1

The solution here depends on what the action should do.

Refactoring an action that triggers a transition

Since this action takes the user to a new route, it should be a link element, <a> and not a button. This gives assistive technology/screen reader users a clue that interacting will take them somewhere new in the app.

This can be refactored to a link-to in Ember, which will wrap the content in <a>:

{{#link-to someRoute}}
    <div> more content </div>
{{/link-to}}

someRoute could be a computed property if it needs to be informed by multiple pieces of data. Otherwise, it could be a string.

Refactoring an interaction that keeps you on the same page

In cases where the action does not take you to a different page, it may be appropriate to use a <button>. An example of this would be a button that expands a collapsible container or toggles a setting. However, the w3 validator tells us that you can't put divs inside of buttons. You can use Phrasing Content that is non-interactive, such as <span>.

<button class="some-class" onclick={{action "toggleSomething"}}>
    <span> more content </span>
</button>

Learn More

To catch more accessibility problems in an app, try out ember-a11y-testing which audits your app for problems and gives you a report of how to fix them.

---

This question was answered as part of "May I Ask a Question" Season 2 Episode 3. If you would like to see us discuss this answer in full you can check out the video here: https://youtu.be/nQsG1zjl8H4