Create rule S6841: "tabIndex" values should be 0 or -1 (#3650)

* Add html to rule S6841 * Share JS description with HTML --------- Co-authored-by: yassin-kammoun-sonarsource <yassin-kammoun-sonarsource@users.noreply.github.com> Co-authored-by: yassin-kammoun-sonarsource <yassin.kammoun@sonarsource.com>
SonarSource · Feb 19, 2024 · e4fce14 · e4fce14
1 parent 4f796b7
commit e4fce14
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 37 deletions.
diff --git a/rules/S6841/how.adoc b/rules/S6841/how.adoc
@@ -0,0 +1,3 @@
+== How to fix it
+
+If you need to make an element focusable that isn't by default (like a ``++<div>++`` or ``++<span>++``), you can use ``++tabIndex="0"++``. This will add the element to the natural tab order based on its position in the HTML. Otherwise, either remove the ``++tabIndex++`` value or use ``++tabIndex="-1"++`` to remove the element from the tab order.
diff --git a/rules/S6841/html/metadata.json b/rules/S6841/html/metadata.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/rules/S6841/html/rule.adoc b/rules/S6841/html/rule.adoc
@@ -0,0 +1,30 @@
+include::../why.adoc[]
+
+include::../how.adoc[]
+
+=== Code examples
+
+==== Noncompliant code example
+
+[source,html,diff-id=1,diff-type=noncompliant]
+----
+<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,html,diff-id=1,diff-type=compliant]
+----
+<div>
+    <span tabIndex="0">foo</span>
+    <span tabIndex="-1">bar</span>
+    <span>qux</span>
+</div>
+----
+
+include::../resources.adoc[]
diff --git a/rules/S6841/javascript/metadata.json b/rules/S6841/javascript/metadata.json
@@ -1,26 +1,6 @@
 {
-  "title": "\"tabIndex\" values should be 0 or -1",
-  "type": "CODE_SMELL",
-  "status": "ready",
-  "remediation": {
-    "func": "Constant\/Issue",
-    "constantCost": "5min"
-  },
-  "tags": [
-    "accessibility",
-    "react"
-  ],
-  "defaultSeverity": "Major",
-  "ruleSpecification": "RSPEC-6841",
-  "sqKey": "S6841",
-  "scope": "All",
-  "defaultQualityProfiles": ["Sonar way"],
-  "quickfix": "infeasible",
-  "code": {
-    "impacts": {
-      "MAINTAINABILITY": "LOW",
-      "RELIABILITY": "MEDIUM"
-    },
-    "attribute": "CONVENTIONAL"
-  }
+    "tags": [
+        "accessibility",
+        "react"
+    ]
 }
diff --git a/rules/S6841/javascript/rule.adoc b/rules/S6841/javascript/rule.adoc
@@ -1,12 +1,6 @@
-== Why is this an issue?
+include::../why.adoc[]
 
-Positive ``++tabIndex++`` values can disrupt the natural tab order of the webpage. This can be confusing for screen reader users who rely on a logical tab order to navigate through the content. If the tab order doesn't match the visual or logical order of elements, users may struggle to understand the page structure.
-
-Therefore, it's recommended to avoid using positive ``++tabIndex++`` values.
-
-== How to fix it
-
-If you need to make an element focusable that isn't by default (like a ``++<div>++`` or ``++<span>++``), you can use ``++tabIndex="0"++``. This will add the element to the natural tab order based on its position in the HTML. Otherwise, either remove the ``++tabIndex++`` value or use ``++tabIndex="-1"++`` to remove the element from the tab order.
+include::../how.adoc[]
 
 === Code examples
 
@@ -42,8 +36,4 @@ function MyDiv() {
 }
 ----
 
-== Resources
-=== Documentation
-
-* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex[tabindex]
-* WCAG - https://www.w3.org/WAI/WCAG21/Understanding/focus-order[Focus Order]
+include::../resources.adoc[]
diff --git a/rules/S6841/metadata.json b/rules/S6841/metadata.json
@@ -1,2 +1,25 @@
 {
+  "title": "\"tabIndex\" values should be 0 or -1",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6841",
+  "sqKey": "S6841",
+  "scope": "All",
+  "defaultQualityProfiles": ["Sonar way"],
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "LOW",
+      "RELIABILITY": "MEDIUM"
+    },
+    "attribute": "CONVENTIONAL"
+  }
 }
diff --git a/rules/S6841/resources.adoc b/rules/S6841/resources.adoc
@@ -0,0 +1,5 @@
+== Resources
+=== Documentation
+
+* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex[tabindex]
+* WCAG - https://www.w3.org/WAI/WCAG21/Understanding/focus-order[Focus Order]
diff --git a/rules/S6841/why.adoc b/rules/S6841/why.adoc
@@ -0,0 +1,5 @@
+== Why is this an issue?
+
+Positive ``++tabIndex++`` values can disrupt the natural tab order of the webpage. This can be confusing for screen reader users who rely on a logical tab order to navigate through the content. If the tab order doesn't match the visual or logical order of elements, users may struggle to understand the page structure.
+
+Therefore, it's recommended to avoid using positive ``++tabIndex++`` values.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		== How to fix it

		If you need to make an element focusable that isn't by default (like a ``++<div>++`` or ``++<span>++``), you can use ``++tabIndex="0"++``. This will add the element to the natural tab order based on its position in the HTML. Otherwise, either remove the ``++tabIndex++`` value or use ``++tabIndex="-1"++`` to remove the element from the tab order.