2024-02-23 09:00:34 +00:00
|
|
|
include::../common/why.adoc[]
|
2023-11-16 14:28:11 +01:00
|
|
|
|
2024-02-23 09:00:34 +00:00
|
|
|
include::../common/how.adoc[]
|
2023-11-16 14:28:11 +01:00
|
|
|
|
|
|
|
=== Code examples
|
|
|
|
|
|
|
|
==== Noncompliant code example
|
|
|
|
|
2024-02-23 09:00:34 +00:00
|
|
|
[source,js,diff-id=1,diff-type=noncompliant]
|
2023-11-16 14:28:11 +01:00
|
|
|
----
|
|
|
|
<li onClick={() => void 0} />
|
|
|
|
<div onClick={() => void 0} role="listitem" />
|
|
|
|
----
|
|
|
|
|
|
|
|
==== Compliant solution
|
|
|
|
|
2024-02-23 09:00:34 +00:00
|
|
|
[source,js,diff-id=1,diff-type=compliant]
|
2023-11-16 14:28:11 +01:00
|
|
|
----
|
|
|
|
<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.
|
|
|
|
----
|
|
|
|
|
|
|
|
|
2024-02-23 09:00:34 +00:00
|
|
|
include::../common/resources.adoc[]
|