Create rule S6848: Non-interactive DOM elements should not have an in…

…teractive handler (#3437)

* Create rule S6848

* Update metadata and description

* Update rules/S6848/javascript/rule.adoc

Co-authored-by: Ilia Kebets <104737176+ilia-kebets-sonarsource@users.noreply.github.com>

* Update rules/S6848/javascript/metadata.json

Co-authored-by: Ilia Kebets <104737176+ilia-kebets-sonarsource@users.noreply.github.com>

* Update rules/S6848/javascript/metadata.json

---------

Co-authored-by: yassin-kammoun-sonarsource <yassin-kammoun-sonarsource@users.noreply.github.com>
Co-authored-by: yassin-kammoun-sonarsource <yassin.kammoun@sonarsource.com>
Co-authored-by: Yassin Kammoun <52890329+yassin-kammoun-sonarsource@users.noreply.github.com>
Co-authored-by: Ilia Kebets <104737176+ilia-kebets-sonarsource@users.noreply.github.com>

rules/S6848/javascript/metadata.json

@@ -0,0 +1,26 @@
+{
+  "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

@@ -0,0 +1,42 @@
+== 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.
+
+== 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++``.
+
+=== Code examples
+
+==== Noncompliant code example
+
+[source,javascript,diff-id=1,diff-type=noncompliant]
+----
+<div onClick={() => {}} />; // Noncompliant
+----
+
+==== Compliant solution
+
+[source,javascript,diff-id=1,diff-type=compliant]
+----
+<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]

rules/S6848/metadata.json

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