diff --git a/docs/header_names/allowed_framework_names.adoc b/docs/header_names/allowed_framework_names.adoc
index 1e26f3f83c..e79826464e 100644
--- a/docs/header_names/allowed_framework_names.adoc
+++ b/docs/header_names/allowed_framework_names.adoc
@@ -64,6 +64,7 @@
 * Passport
 * TypeScript
 * PropTypes
+* JSX
 // PHP
 * Core PHP
 * Guzzle
diff --git a/rules/S6807/javascript/metadata.json b/rules/S6807/javascript/metadata.json
new file mode 100644
index 0000000000..3d261e3ac3
--- /dev/null
+++ b/rules/S6807/javascript/metadata.json
@@ -0,0 +1,26 @@
+{
+  "title": "DOM elements with ARIA roles should have the required properties",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "a11y",
+    "react"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6807",
+  "sqKey": "S6807",
+  "scope": "All",
+  "defaultQualityProfiles": ["Sonar way"],
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "LOW",
+      "RELIABILITY": "LOW"
+    },
+    "attribute": "CONVENTIONAL"
+  }
+}
diff --git a/rules/S6807/javascript/rule.adoc b/rules/S6807/javascript/rule.adoc
new file mode 100644
index 0000000000..f3fc245919
--- /dev/null
+++ b/rules/S6807/javascript/rule.adoc
@@ -0,0 +1,36 @@
+== Why is this an issue?
+
+ARIA (Accessible Rich Internet Applications) attributes are used to enhance the accessibility of web content and web applications. These attributes provide additional information about an element's role, state, properties, and values to assistive technologies like screen readers.
+
+Each role in ARIA has a set of required attributes that must be included for the role to be properly understood by assistive technologies. These attributes are known as "required aria-* properties".
+
+For example, if an element has a role of "checkbox", it must also include the aria-checked property. This property indicates whether the checkbox is checked (true), unchecked (false), or in a mixed state (mixed).
+
+This rules checks that each element with a defined ARIA role also has all required attributes.
+
+== How to fix it in JSX
+
+Check that each element with a defined ARIA role also has all required attributes.
+
+[source,javascript,diff-id=1,diff-type=noncompliant]
+----
+<div role="checkbox">Unchecked</div> {/* Noncompliant: aria-checked is missing */}
+----
+
+To fix the code add missing aria-* attributes.
+
+[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/Roles[MDN - ARIA roles (Reference)]
+* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes[MDN - ARIA states and properties (Reference)]
+
+=== Standards
+
+* https://www.w3.org/TR/wai-aria-1.2/[W3C - Accessible Rich Internet Applications (WAI-ARIA) 1.2]
diff --git a/rules/S6807/metadata.json b/rules/S6807/metadata.json
new file mode 100644
index 0000000000..2c63c08510
--- /dev/null
+++ b/rules/S6807/metadata.json
@@ -0,0 +1,2 @@
+{
+}