Create rule S6811 (#3858)

* Add html to rule S6811

* add html to rule S6811

---------

Co-authored-by: vdiez <[email protected]>
Co-authored-by: Victor <[email protected]>

rules/S6811/common/how.adoc

@@ -0,0 +1,3 @@
+== How to fix it
+
+Check the spelling of the aria-* attributes and verify that they are actually supported by the element role. Remove non-compatible attributes or replace them with the correct ones.

rules/S6811/common/resources.adoc

@@ -0,0 +1,10 @@
+== Resources
+=== Documentation
+
+* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques[Using ARIA: Roles, states, and properties]
+* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes[ARIA states and properties (Reference)]
+* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles[ARIA roles (Reference)]
+
+=== Standards
+
+* W3C - https://www.w3.org/TR/wai-aria-1.2/[Accessible Rich Internet Applications (WAI-ARIA) 1.2]

rules/S6811/common/why.adoc

@@ -0,0 +1,7 @@
+== Why is this an issue?
+
+ARIA properties, also known as "aria-* properties", are special attributes used in HTML to enhance the accessibility of web elements. They provide additional semantics to help assistive technologies, like screen readers, interpret the element.
+
+Roles, on the other hand, define what an element is or does in the context of a web page. Some elements have explicit roles, which are directly defined by the developer. For example, a div element might be given a role of "button". Other elements have implicit roles, which are inferred based on the type of the element. For example, an anchor tag <a href="#" /> has an implicit role of "link".
+
+This rule ensures that the ARIA properties used on an element are ones that are supported by the role of that element. For instance, the ARIA property `aria-required` is not supported by the role `link`. Therefore, using `aria-required` on an anchor tag would violate this rule.

rules/S6811/html/metadata.json

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

rules/S6811/html/rule.adoc

@@ -0,0 +1,15 @@
+include::../common/why.adoc[]
+
+[source,html,diff-id=1,diff-type=noncompliant]
+----
+<div role="checkbox" aria-chekd="true">Unchecked</div> {/* Noncompliant: aria-chekd is not supported */}
+----
+
+include::../common/how.adoc[]
+
+[source,html,diff-id=1,diff-type=compliant]
+----
+<div role="checkbox" aria-checked="true">Unchecked</div>
+----
+
+include::../common/resources.adoc[]

rules/S6811/javascript/metadata.json

@@ -1,26 +1,6 @@
 {
-  "title": "DOM elements with ARIA role should only have supported properties",
-  "type": "CODE_SMELL",
-  "status": "ready",
-  "remediation": {
-    "func": "Constant\/Issue",
-    "constantCost": "5min"
-  },
-  "tags": [
-    "accessibility",
-    "react"
-  ],
-  "defaultSeverity": "Major",
-  "ruleSpecification": "RSPEC-6811",
-  "sqKey": "S6811",
-  "scope": "All",
-  "defaultQualityProfiles": ["Sonar way"],
-  "quickfix": "infeasible",
-  "code": {
-    "impacts": {
-      "MAINTAINABILITY": "LOW",
-      "RELIABILITY": "LOW"
-    },
-    "attribute": "CONVENTIONAL"
-  }
+    "tags": [
+      "accessibility",
+      "react"
+    ]
 }

rules/S6811/javascript/rule.adoc

@@ -1,34 +1,15 @@
-== Why is this an issue?
-
-ARIA properties, also known as "aria-* properties", are special attributes used in HTML to enhance the accessibility of web elements. They provide additional semantics to help assistive technologies, like screen readers, interpret the element.
-
-Roles, on the other hand, define what an element is or does in the context of a web page. Some elements have explicit roles, which are directly defined by the developer. For example, a div element might be given a role of "button". Other elements have implicit roles, which are inferred based on the type of the element. For example, an anchor tag <a href="#" /> has an implicit role of "link".
-
-This rule ensures that the ARIA properties used on an element are ones that are supported by the role of that element. For instance, the ARIA property `aria-required` is not supported by the role `link`. Therefore, using `aria-required` on an anchor tag would violate this rule.
-
-== How to fix it in JSX
-
-Check the spelling of the aria-* attributes and verify that they are actually supported by the element role.
+include::../common/why.adoc[]
 
 [source,javascript,diff-id=1,diff-type=noncompliant]
 ----
 <div role="checkbox" aria-chekd={isChecked}>Unchecked</div> {/* Noncompliant: aria-chekd is not supported */}
 ----
 
-To fix the code remove non-compatible attributes or replace them with the correct ones.
+include::../common/how.adoc[]
 
 [source,javascript,diff-id=1,diff-type=compliant]
 ----
 <div role="checkbox" aria-checked={isChecked}>Unchecked</div>
 ----
 
-== Resources
-=== Documentation
-
-* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques[Using ARIA: Roles, states, and properties]
-* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes[ARIA states and properties (Reference)]
-* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles[ARIA roles (Reference)]
-
-=== Standards
-
-* W3C - https://www.w3.org/TR/wai-aria-1.2/[Accessible Rich Internet Applications (WAI-ARIA) 1.2]
+include::../common/resources.adoc[]

rules/S6811/metadata.json

@@ -1,2 +1,25 @@
 {
+  "title": "DOM elements with ARIA role should only have supported properties",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6811",
+  "sqKey": "S6811",
+  "scope": "All",
+  "defaultQualityProfiles": ["Sonar way"],
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "LOW",
+      "RELIABILITY": "LOW"
+    },
+    "attribute": "CONVENTIONAL"
+  }
 }