Rule: {{actions}} on non-interactive elements must have a role attribute

Bad:

<div {{action "toggleModal"}}>Open the modal</div>
<span {{action "toggleModal"}}>Open the modal</span>

Good:

<div {{action "toggleModal"}} role="button">Open the modal</div>
<span {{action "toggleModal"}} role="button">Open the modal</span>

Bestest:

<button {{action "toggleModal"}}>Open the modal</button>
<button {{action "toggleModal"}}>Open the modal</button>

Anytime you’re adding an interaction (an action) to a non-interaction HTML element you must specify an aria role. For this example you’d use the button role. This is so assistive technology can understand the element can be interacted with.

[rwjblue]

Just wanted to chime in and mention that I did a bit of work on extracting the ability to detect interactive elements from the nested-interactive rule this weekend (in https://github.com/rwjblue/ember-template-lint/pull/49 and https://github.com/rwjblue/ember-template-lint/pull/50). I’d like to land this rule (along with the one suggested in #45) on the 19th (for http://www.globalaccessibilityawarenessday.org/)…

[rwjblue]

Released in v0.5.12. We cannot add this rule to the default recommended list until the next major version, but I do intend to add to recommended once we release 0.6.0.