Create rule S6811: DOM elements with ARIA role should only have suppo…

…rted properties (#3244)

SonarSource/SonarJS#4244

rules/S6811/javascript/metadata.json

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

rules/S6811/javascript/rule.adoc

@@ -0,0 +1,34 @@
+== 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.
+
+[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.
+
+[source,javascript,diff-id=1,diff-type=compliant]
+----
+<div role="checkbox" aria-checked={isChecked}>Unchecked</div>
+----
+
+== Resources
+=== Documentation
+
+* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques[MDN - Using ARIA: Roles, states, and properties]
+* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes[MDN - ARIA states and properties (Reference)]
+* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles[MDN - ARIA roles (Reference)]
+
+=== Standards
+
+* https://www.w3.org/TR/wai-aria-1.2/[W3C - Accessible Rich Internet Applications (WAI-ARIA) 1.2]

rules/S6811/metadata.json

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