diff --git a/rules/S6811/common/how.adoc b/rules/S6811/common/how.adoc
new file mode 100644
index 00000000000..9cf2d696d4c
--- /dev/null
+++ b/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.
diff --git a/rules/S6811/common/resources.adoc b/rules/S6811/common/resources.adoc
new file mode 100644
index 00000000000..6d299506cbd
--- /dev/null
+++ b/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]
diff --git a/rules/S6811/common/why.adoc b/rules/S6811/common/why.adoc
new file mode 100644
index 00000000000..b8cceea187c
--- /dev/null
+++ b/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 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.
\ No newline at end of file
diff --git a/rules/S6811/html/metadata.json b/rules/S6811/html/metadata.json
new file mode 100644
index 00000000000..7a73a41bfdf
--- /dev/null
+++ b/rules/S6811/html/metadata.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/rules/S6811/html/rule.adoc b/rules/S6811/html/rule.adoc
new file mode 100644
index 00000000000..892c620926a
--- /dev/null
+++ b/rules/S6811/html/rule.adoc
@@ -0,0 +1,15 @@
+include::../common/why.adoc[]
+
+[source,html,diff-id=1,diff-type=noncompliant]
+----
+
Unchecked
{/* Noncompliant: aria-chekd is not supported */}
+----
+
+include::../common/how.adoc[]
+
+[source,html,diff-id=1,diff-type=compliant]
+----
+Unchecked
+----
+
+include::../common/resources.adoc[]
\ No newline at end of file
diff --git a/rules/S6811/javascript/metadata.json b/rules/S6811/javascript/metadata.json
index 3575b94f1d1..f4c37c6761b 100644
--- a/rules/S6811/javascript/metadata.json
+++ b/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"
+ ]
}
diff --git a/rules/S6811/javascript/rule.adoc b/rules/S6811/javascript/rule.adoc
index 3ca1bae7deb..6cf1762a8da 100644
--- a/rules/S6811/javascript/rule.adoc
+++ b/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 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]
----
Unchecked
{/* 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]
----
Unchecked
----
-== 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[]
\ No newline at end of file
diff --git a/rules/S6811/metadata.json b/rules/S6811/metadata.json
index 2c63c085104..9a66edf369e 100644
--- a/rules/S6811/metadata.json
+++ b/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"
+ }
}