Create rule S6842 for HTML: Non-interactive DOM elements should not h…

…ave interactive ARIA roles (#3657)

rules/S6842/common/how.adoc

@@ -0,0 +1,3 @@
+== How to fix it
+
+Ensure that non-interactive DOM elements do not use interactive ARIA roles.

rules/S6842/common/resources.adoc

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

rules/S6842/common/why.adoc

@@ -0,0 +1,9 @@
+== Why is this an issue?
+
+Non-interactive DOM elements are those that do not have built-in interactivity or do not require user interaction. Examples include `<div>`, `<p>`, `<img>`, `<h1>` to `<h6>`, and `<ul>`, among others. These elements are typically used to structure content and layout but do not have any inherent interactive behavior.
+
+Interactive ARIA roles, on the other hand, are used to make elements interactive and accessible. These roles include `button`, `link`, `checkbox`, `menuitem`, `tab`, and others. They are used to communicate the type of interaction that users can expect from an element.
+
+Non-interactive DOM elements should not use interactive ARIA roles because it can confuse assistive technologies and their users. For example, if a `<div>` (a non-interactive element) is given an interactive role like "button", assistive technologies like screen readers will announce it as a button. However, since `<div>` doesn't have the inherent behavior of a button, it can confuse users who expect it to behave like a button when interacted with.
+
+This can lead to a poor user experience and can make the website less accessible for users relying on assistive technologies. Therefore, it's important to ensure that non-interactive DOM elements are not given interactive ARIA roles.

rules/S6842/html/metadata.json

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

rules/S6842/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]
+----
+<li role="button">Foo</li> <!--Noncompliant; "li" isn't interactive, but "button" is-->
+----
+
+==== Compliant solution
+
+[source,html,diff-id=1,diff-type=compliant]
+----
+<li role="listitem">Foo</li>
+----
+
+include::../common/resources.adoc[]

rules/S6842/javascript/metadata.json

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

rules/S6842/javascript/rule.adoc

@@ -1,16 +1,6 @@
-== Why is this an issue?
+include::../common/why.adoc[]
 
-Non-interactive DOM elements are those that do not have built-in interactivity or do not require user interaction. Examples include `<div>`, `<p>`, `<img>`, `<h1>` to `<h6>`, and `<ul>`, among others. These elements are typically used to structure content and layout but do not have any inherent interactive behavior.
-
-Interactive ARIA roles, on the other hand, are used to make elements interactive and accessible. These roles include `button`, `link`, `checkbox`, `menuitem`, `tab`, and others. They are used to communicate the type of interaction that users can expect from an element.
-
-Non-interactive DOM elements should not use interactive ARIA roles because it can confuse assistive technologies and their users. For example, if a `<div>` (a non-interactive element) is given an interactive role like "button", assistive technologies like screen readers will announce it as a button. However, since `<div>` doesn't have the inherent behavior of a button, it can confuse users who expect it to behave like a button when interacted with.
-
-This can lead to a poor user experience and can make the website less accessible for users relying on assistive technologies. Therefore, it's important to ensure that non-interactive DOM elements are not given interactive ARIA roles.
-
-== How to fix it
-
-Ensure that non-interactive DOM elements do not use interactive ARIA roles.
+include::../common/how.adoc[]
 
 === Code examples
 
@@ -32,9 +22,4 @@ function myListElement() {
 }
 ----
 
-== Resources
-=== Documentation
-
-* WCAG - https://www.w3.org/WAI/WCAG21/Understanding/name-role-value[Name, Role, Value]
-* WCAG - https://www.w3.org/TR/wai-aria-1.1/#usage_intro[WAI-ARIA Roles]
-* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles[WAI-ARIA Roles]
+include::../common/resources.adoc[]

rules/S6842/metadata.json

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