Create rule S6848 for HTML: Non-interactive DOM elements should not have an interactive handler (#3664)

rules/S6848/common/how.adoc

@@ -0,0 +1,4 @@
+== How to fix it
+
+The simplest and most recommended way is to replace the non-interactive elements with interactive ones. If for some reason you can't replace the non-interactive element, you can add an interactive ``++role++`` attribute to it and manually manage its keyboard event handlers and focus. Common interactive roles include
+``++button++``, ``++link++``, ``++checkbox++``, ``++menuitem++``, ``++menuitemcheckbox++``, ``++menuitemradio++``, ``++option++``, ``++radio++``, ``++searchbox++``, ``++switch++``, and ``++textbox++``.

rules/S6848/common/resources.adoc

@@ -0,0 +1,5 @@
+== Resources
+=== Documentation
+
+* WCAG - https://www.w3.org/WAI/WCAG21/Understanding/name-role-value[Name, Role, Value]
+* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles[WAI-ARIA Roles]

rules/S6848/common/why.adoc

@@ -0,0 +1,15 @@
+== Why is this an issue?
+
+Non-interactive DOM elements are HTML elements that are not designed to be interacted with by the user, for instance ``++<div>++``, ``++<span>++``, and ``++<footer>++``, etc. They are typically used to structure content and do not have built-in interactivity or keyboard accessibility.
+
+Interactive handlers, on the other hand, are event handlers that respond to user interactions. These include handlers like ``++onClick++``, ``++onKeyDown++``, ``++onMouseUp++``, and more. When these handlers are added to an HTML element, they make the element respond to the specified user interaction.
+
+When non-interactive elements have interactive handlers, it can lead to several problems:
+
+* Unexpected behavior: Non-interactive elements are not designed to be interactive, so adding interactive handlers can cause unexpected behavior. For example, non-interactive elements do not naturally receive keyboard focus, so keyboard users might not be able to activate the handler.
+
+* Confusing for assistive technologies: Assistive technologies might not announce non-interactive elements with interactive handlers correctly. This can make it difficult for users to understand how to interact with the content.
+
+* Violation of HTML standards: Using interactive handlers on non-interactive elements can be seen as a misuse of HTML, as it goes against the intended use of these elements.
+
+By enforcing that interactive handlers are only used on interactive elements, this rule helps create a more predictable and user-friendly experience for all users, and ensures that web content adheres to accessibility standards and best practices.

rules/S6848/html/metadata.json

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

rules/S6848/html/rule.adoc

@@ -0,0 +1,21 @@
+include::../common/why.adoc[]
+
+include::../common/how.adoc[]
+
+=== Code examples
+
+==== Noncompliant code example
+
+[source,html,diff-id=1,diff-type=noncompliant]
+----
+<div onClick="showMessage('Hello')" /> <!-- Noncompliant -->
+----
+
+==== Compliant solution
+
+[source,html,diff-id=1,diff-type=compliant]
+----
+<div onClick="showMessage('Hello')" role="button" />
+----
+
+include::../common/resources.adoc[]

rules/S6848/javascript/metadata.json

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

rules/S6848/javascript/rule.adoc

@@ -1,23 +1,6 @@
-== Why is this an issue?
+include::../common/why.adoc[]
 
-Non-interactive DOM elements are HTML elements that are not designed to be interacted with by the user, for instance ``++<div>++``, ``++<span>++``, and ``++<footer>++``, etc. They are typically used to structure content and do not have built-in interactivity or keyboard accessibility.
-
-Interactive handlers, on the other hand, are event handlers that respond to user interactions. These include handlers like ``++onClick++``, ``++onKeyDown++``, ``++onMouseUp++``, and more. When these handlers are added to an HTML element, they make the element respond to the specified user interaction.
-
-When non-interactive elements have interactive handlers, it can lead to several problems:
-
-* Unexpected behavior: Non-interactive elements are not designed to be interactive, so adding interactive handlers can cause unexpected behavior. For example, non-interactive elements do not naturally receive keyboard focus, so keyboard users might not be able to activate the handler.
-
-* Confusing for assistive technologies: Assistive technologies might not announce non-interactive elements with interactive handlers correctly. This can make it difficult for users to understand how to interact with the content.
-
-* Violation of HTML standards: Using interactive handlers on non-interactive elements can be seen as a misuse of HTML, as it goes against the intended use of these elements.
-
-By enforcing that interactive handlers are only used on interactive elements, this rule helps create a more predictable and user-friendly experience for all users, and ensures that web content adheres to accessibility standards and best practices.
-
-== How to fix it
-
-The simplest and most recommended way is to replace the non-interactive elements with interactive ones. If for some reason you can't replace the non-interactive element, you can add an interactive ``++role++`` attribute to it and manually manage its keyboard event handlers and focus. Common interactive roles include
-``++button++``, ``++link++``, ``++checkbox++``, ``++menuitem++``, ``++menuitemcheckbox++``, ``++menuitemradio++``, ``++option++``, ``++radio++``, ``++searchbox++``, ``++switch++``, and ``++textbox++``.
+include::../common/how.adoc[]
 
 === Code examples
 
@@ -35,8 +18,4 @@ The simplest and most recommended way is to replace the non-interactive elements
 <div onClick={() => {}} role="button" />;
 ----
 
-== Resources
-=== Documentation
-
-* WCAG - https://www.w3.org/WAI/WCAG21/Understanding/name-role-value[Name, Role, Value]
-* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles[WAI-ARIA Roles]
+include::../common/resources.adoc[]

rules/S6848/metadata.json

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