Create rule S6845: Non-interactive DOM elements should not have the tabIndex property (#3667)

* Add html to rule S6845

* Share documentation 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>

rules/S6845/common/rule.adoc

@@ -0,0 +1,34 @@
+Navigation using the Tab key should be restricted to elements on the page that users can interact with.
+
+== Why is this an issue?
+
+The misuse of the `tabIndex` attribute can lead to several issues:
+
+- Navigation Confusion: It can confuse users who rely on keyboard navigation, as they might expect to tab through interactive elements like links and buttons, not static content.
+- Accessibility Issues: It can create accessibility problems, as assistive technologies provide their own page navigation mechanisms based on the HTML of the page. Adding unnecessary tabindexes can disrupt this.
+- Increased Tab Ring Size: It unnecessarily increases the size of the page's tab ring, making navigation more cumbersome.
+
+== How to fix it
+
+Simply remove the `tabIndex` attribute or set it to `"-1"` to fix the issue.
+
+=== Code examples
+
+==== Noncompliant code example
+
+[source,html,diff-id=1,diff-type=noncompliant]
+----
+<div tabIndex="0" />
+----
+
+==== Compliant solution
+
+[source,html,diff-id=1,diff-type=compliant]
+----
+<div />
+----
+
+== Resources
+=== Documentation
+- MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex[tabindex]
+- The a11y project - https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/[Use the tabindex attribute]

rules/S6845/html/metadata.json

@@ -0,0 +1,2 @@
+{
+}

rules/S6845/html/rule.adoc

@@ -0,0 +1 @@
+include::../common/rule.adoc[]

rules/S6845/javascript/metadata.json

@@ -1,26 +1,6 @@
 {
-  "title": "Non-interactive DOM elements should not have the `tabIndex` property",
-  "type": "CODE_SMELL",
-  "status": "ready",
-  "remediation": {
-    "func": "Constant\/Issue",
-    "constantCost": "5min"
-  },
-  "tags": [
-    "accessibility",
-    "react"
-  ],
-  "defaultSeverity": "Minor",
-  "ruleSpecification": "RSPEC-6845",
-  "sqKey": "S6845",
-  "scope": "All",
-  "defaultQualityProfiles": ["Sonar way"],
-  "quickfix": "targeted",
-  "code": {
-    "impacts": {
-      "MAINTAINABILITY": "LOW",
-      "RELIABILITY": "MEDIUM"
-    },
-    "attribute": "CONVENTIONAL"
-  }
+    "tags": [
+        "accessibility",
+        "react"
+    ]
 }

rules/S6845/javascript/rule.adoc

@@ -1,34 +1 @@
-Navigation using the Tab key should be restricted to elements on the page that users can interact with.
-
-== Why is this an issue?
-
-The misuse of the `tabIndex` attribute can lead to several issues:
-
-- Navigation Confusion: It can confuse users who rely on keyboard navigation, as they might expect to tab through interactive elements like links and buttons, not static content.
-- Accessibility Issues: It can create accessibility problems, as assistive technologies provide their own page navigation mechanisms based on the HTML of the page. Adding unnecessary tabindexes can disrupt this.
-- Increased Tab Ring Size: It unnecessarily increases the size of the page's tab ring, making navigation more cumbersome.
-
-== How to fix it
-
-Simply remove the `tabIndex` attribute or set it to `"-1"` to fix the issue.
-
-=== Code examples
-
-==== Noncompliant code example
-
-[source,html,diff-id=1,diff-type=noncompliant]
-----
-<div tabIndex="0" />
-----
-
-==== Compliant solution
-
-[source,html,diff-id=1,diff-type=compliant]
-----
-<div />
-----
-
-== Resources
-=== Documentation
-- MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex[tabindex]
-- The a11y project - https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/[Use the tabindex attribute]
+include::../common/rule.adoc[]

rules/S6845/metadata.json

@@ -1,2 +1,25 @@
 {
+  "title": "Non-interactive DOM elements should not have the `tabIndex` property",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility"
+  ],
+  "defaultSeverity": "Minor",
+  "ruleSpecification": "RSPEC-6845",
+  "sqKey": "S6845",
+  "scope": "All",
+  "defaultQualityProfiles": ["Sonar way"],
+  "quickfix": "targeted",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "LOW",
+      "RELIABILITY": "MEDIUM"
+    },
+    "attribute": "CONVENTIONAL"
+  }
 }