Address comment

rules/S6821/common/resources/resources.adoc

@@ -0,0 +1,9 @@
+== 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/Roles[ARIA roles (Reference)]
+
+=== Standards
+
+* W3C - https://www.w3.org/TR/wai-aria-1.2/[Accessible Rich Internet Applications (WAI-ARIA) 1.2]

rules/S6821/fix.adoc

@@ -0,0 +1,3 @@
+== How to fix it
+
+Check that each element with a defined ARIA role has a valid non-abstract value.

rules/S6821/html/metadata.json

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

rules/S6821/html/rule.adoc

@@ -0,0 +1,21 @@
+include::../rationale.adoc[]
+
+include::../fix.adoc[]
+
+[source,html,diff-id=1,diff-type=noncompliant]
+----
+<div role="meth" aria-label="a^{2} + b^{2} = c^{2}">
+  a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
+</div>
+----
+
+To fix the code use a valid value for the ARIA role attribute.
+
+[source,html,diff-id=1,diff-type=compliant]
+----
+<div role="math" aria-label="a^{2} + b^{2} = c^{2}">
+  a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
+</div>
+----
+
+include::../common/resources/resources.adoc[]

rules/S6821/javascript/metadata.json

@@ -1,26 +1,2 @@
 {
-  "title": "DOM elements with ARIA roles should have a valid non-abstract role",
-  "type": "CODE_SMELL",
-  "status": "ready",
-  "remediation": {
-    "func": "Constant\/Issue",
-    "constantCost": "5min"
-  },
-  "tags": [
-    "react",
-    "accessibility"
-  ],
-  "defaultSeverity": "Major",
-  "ruleSpecification": "RSPEC-6821",
-  "sqKey": "S6821",
-  "scope": "All",
-  "defaultQualityProfiles": ["Sonar way"],
-  "quickfix": "infeasible",
-  "code": {
-    "impacts": {
-      "MAINTAINABILITY": "LOW",
-      "RELIABILITY": "MEDIUM"
-    },
-    "attribute": "LOGICAL"
-  }
 }

rules/S6821/javascript/rule.adoc

@@ -1,14 +1,8 @@
-== Why is this an issue?
+include::../rationale.adoc[]
-
-include::../../../shared_content/jsts/aria-intro-1.adoc[]
-
-This rule checks that when using the `role` property in DOM elements, its value is a valid non-abstract ARIA role.
 
 This rule does not cover non-DOM elements, such as custom components.
 
-== How to fix it in JSX
+include::../fix.adoc[]
-
-Check that each element with a defined ARIA role has a valid non-abstract value.
 
 [source,javascript,diff-id=1,diff-type=noncompliant]
 ----
@@ -26,12 +20,4 @@ To fix the code use a valid value for the ARIA role attribute.
 </div>
 ----
 
-== Resources
+include::../common/resources/resources.adoc[]
-=== 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/Roles[ARIA roles (Reference)]
-
-=== Standards
-
-* W3C - https://www.w3.org/TR/wai-aria-1.2/[Accessible Rich Internet Applications (WAI-ARIA) 1.2]

rules/S6821/metadata.json

@@ -1,2 +1,26 @@
 {
+  "title": "DOM elements with ARIA roles should have a valid non-abstract role",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "react",
+    "accessibility"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6821",
+  "sqKey": "S6821",
+  "scope": "All",
+  "defaultQualityProfiles": ["Sonar way"],
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "LOW",
+      "RELIABILITY": "MEDIUM"
+    },
+    "attribute": "LOGICAL"
+  }
 }

rules/S6821/rationale.adoc

@@ -0,0 +1,5 @@
+== Why is this an issue?
+
+include::../../shared_content/jsts/aria-intro-1.adoc[]
+
+This rule checks that when using the `role` property in DOM elements, its value is a valid non-abstract ARIA role.