2024-02-23 12:55:57 +01:00
|
|
|
include::../common/why.adoc[]
|
2023-11-09 11:08:04 +01:00
|
|
|
|
2024-02-23 12:55:57 +01:00
|
|
|
include::../common/how.adoc[]
|
2023-11-09 11:08:04 +01:00
|
|
|
|
|
|
|
=== Code examples
|
|
|
|
|
|
|
|
==== Noncompliant code example
|
|
|
|
|
|
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
|
|
|
----
|
|
|
|
function MyDiv() {
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<span tabIndex="5">foo</span> // Noncompliant
|
|
|
|
<span tabIndex="3">bar</span> // Noncompliant
|
|
|
|
<span tabIndex="1">baz</span> // Noncompliant
|
|
|
|
<span tabIndex="2">qux</span> // Noncompliant
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
----
|
|
|
|
|
|
|
|
==== Compliant solution
|
|
|
|
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
|
|
----
|
|
|
|
function MyDiv() {
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<span tabIndex="0">foo</span>
|
|
|
|
<span tabIndex="-1">bar</span>
|
|
|
|
<span tabIndex={0}>baz</span>
|
|
|
|
<span>qux</span>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
----
|
|
|
|
|
2024-02-23 12:55:57 +01:00
|
|
|
include::../common/resources.adoc[]
|