Add HTML to rule S6807 (#3863)

* Add html to rule S6807

* Add S6807 HTML variant

Also restructure the resources to make the documentation modular.

* Fix the file structure to match the standard

---------

Co-authored-by: ericmorand-sonarsource <ericmorand-sonarsource@users.noreply.github.com>
Co-authored-by: Eric MORAND <eric.morand@sonarsource.com>

rules/S6807/common/how.adoc

@@ -0,0 +1,3 @@
+== How to fix it
+
+Check that each element with a defined ARIA role also has all required attributes.

rules/S6807/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/Roles[ARIA roles (Reference)]
+* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes[ARIA states and properties (Reference)]
+
+=== Standards
+
+* W3C - https://www.w3.org/TR/wai-aria-1.2/[Accessible Rich Internet Applications (WAI-ARIA) 1.2]

rules/S6807/common/why.adoc

@@ -0,0 +1,9 @@
+== Why is this an issue?
+
+include::../../../shared_content/jsts/aria-intro-1.adoc[]
+
+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 rule checks that each element with a defined ARIA role also has all required attributes.

rules/S6807/html/metadata.json

@@ -0,0 +1,5 @@
+{
+  "tags": [
+    "accessibility"
+  ]
+}

rules/S6807/html/rule.adoc

@@ -0,0 +1,17 @@
+include::../common/why.adoc[]
+
+include::../common/how.adoc[]
+
+[source,html,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,html,diff-id=1,diff-type=compliant]
+----
+<div role="checkbox" aria-checked="false">Unchecked</div>
+----
+
+include::../common/resources.adoc[]

rules/S6807/javascript/metadata.json

@@ -1,26 +1,6 @@
 {
-  "title": "DOM elements with ARIA roles should have the required properties",
-  "type": "CODE_SMELL",
-  "status": "ready",
-  "remediation": {
-    "func": "Constant\/Issue",
-    "constantCost": "5min"
-  },
   "tags": [
     "accessibility",
     "react"
-  ],
+  ]
-  "defaultSeverity": "Major",
-  "ruleSpecification": "RSPEC-6807",
-  "sqKey": "S6807",
-  "scope": "All",
-  "defaultQualityProfiles": ["Sonar way"],
-  "quickfix": "infeasible",
-  "code": {
-    "impacts": {
-      "MAINTAINABILITY": "LOW",
-      "RELIABILITY": "LOW"
-    },
-    "attribute": "CONVENTIONAL"
-  }
 }

rules/S6807/javascript/rule.adoc

@@ -1,16 +1,6 @@
-== Why is this an issue?
+include::../common/why.adoc[]
 
-include::../../../shared_content/jsts/aria-intro-1.adoc[]
+include::../common/how.adoc[]
-
-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 rule 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]
 ----
@@ -24,13 +14,4 @@ To fix the code add missing aria-* attributes.
 <div role="checkbox" aria-checked={isChecked}>Unchecked</div>
 ----
 
-== Resources
+include::../common/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)]
-* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes[ARIA states and properties (Reference)]
-
-=== Standards
-
-* W3C - https://www.w3.org/TR/wai-aria-1.2/[Accessible Rich Internet Applications (WAI-ARIA) 1.2]

rules/S6807/metadata.json

@@ -1,2 +1,23 @@
 {
+  "title": "DOM elements with ARIA roles should have the required properties",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6807",
+  "sqKey": "S6807",
+  "scope": "All",
+  "defaultQualityProfiles": ["Sonar way"],
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "LOW",
+      "RELIABILITY": "LOW"
+    },
+    "attribute": "CONVENTIONAL"
+  }
 }