From b7c2c63f95fa76275472b93c1addcdd369ed5a13 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 12 Oct 2023 14:31:32 +0200
Subject: [PATCH] Create rule S6811: DOM elements with ARIA role should only
 have supported properties (#3244)

https://github.com/SonarSource/SonarJS/issues/4244
---
 rules/S6811/javascript/metadata.json | 26 +++++++++++++++++++++
 rules/S6811/javascript/rule.adoc     | 34 ++++++++++++++++++++++++++++
 rules/S6811/metadata.json            |  2 ++
 3 files changed, 62 insertions(+)
 create mode 100644 rules/S6811/javascript/metadata.json
 create mode 100644 rules/S6811/javascript/rule.adoc
 create mode 100644 rules/S6811/metadata.json

diff --git a/rules/S6811/javascript/metadata.json b/rules/S6811/javascript/metadata.json
new file mode 100644
index 00000000000..cb8ba148941
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/rules/S6811/javascript/rule.adoc b/rules/S6811/javascript/rule.adoc
new file mode 100644
index 00000000000..ab3d76bfe8c
--- /dev/null
+++ b/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]
diff --git a/rules/S6811/metadata.json b/rules/S6811/metadata.json
new file mode 100644
index 00000000000..2c63c085104
--- /dev/null
+++ b/rules/S6811/metadata.json
@@ -0,0 +1,2 @@
+{
+}