include::../common/why.adoc[]

include::../common/how.adoc[]

=== Code examples

==== Noncompliant code example

[source,js,diff-id=1,diff-type=noncompliant]
----
<li onClick={() => void 0} />
<div onClick={() => void 0} role="listitem" />
----

==== Compliant solution

[source,js,diff-id=1,diff-type=compliant]
----
<div onClick={() => void 0} role="button" />
<div onClick={() => void 0} role="presentation" />
<input type="text" onClick={() => void 0} /> // Interactive element does not require role.
<button onClick={() => void 0} className="foo" /> // button is interactive.
<div onClick={() => void 0} role="button" aria-hidden /> // This is hidden from the screenreader.
----


include::../common/resources.adoc[]