Add rule info for S5255

rules/S5255/html/metadata.json

@@ -1,35 +1,2 @@
 {
-  "title": "\"aria-label\" or \"aria-labelledby\" attributes should be used to differentiate similar elements",
-  "type": "CODE_SMELL",
-  "code": {
-    "impacts": {
-      "MAINTAINABILITY": "MEDIUM"
-    },
-    "attribute": "COMPLETE"
-  },
-  "status": "ready",
-  "remediation": {
-    "func": "Constant\/Issue",
-    "constantCost": "5min"
-  },
-  "tags": [
-    "accessibility",
-    "wcag2-a"
-  ],
-  "extra": {
-    "replacementRules": [
-
-    ],
-    "legacyKeys": [
-
-    ]
-  },
-  "defaultSeverity": "Major",
-  "ruleSpecification": "RSPEC-5255",
-  "sqKey": "S5255",
-  "scope": "Main",
-  "defaultQualityProfiles": [
-    "Sonar way"
-  ],
-  "quickfix": "unknown"
 }

rules/S5255/html/rule.adoc

@@ -1,13 +1,4 @@
-== Why is this an issue?
+include::../why.adoc[]
-
-If a page contains multiple ``++<nav>++`` or ``++<aside>++`` elements, each one should have an ``++aria-label++`` or ``++aria-labelledby++`` attribute so that they can be differentiated. The same rule applies when multiple elements have a ``++role++`` attribute with the same "landmark" value.
-
-
-Landmark roles are: ``++banner++``, ``++complementary++``, ``++contentinfo++``, ``++form++``, ``++main++``, ``++navigation++``, ``++search++``, ``++application++``. 
-
-
-The use of ARIA markup helps users of screen readers navigate across blocks of content. For example it makes groups of links easier to locate or skip.
-
 
 === Noncompliant code example
 
@@ -80,27 +71,4 @@ Repeated "landmark" role ``++"navigation"++``
 ----
 
 
-== Resources
+include::../resources.adoc[]
-
-* https://www.w3.org/TR/WCAG20-TECHS/ARIA11.html[WCAG2, ARIA11] - Using ARIA landmarks to identify regions of a page
-* https://www.w3.org/TR/WCAG20-TECHS/H97.html[WCAG2, H97] - Grouping related links using the nav element
-* https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&showtechniques=131#qr-content-structure-separation-programmatic[WCAG2 1.3.1] Info and Relationships
-
-
-ifdef::env-github,rspecator-view[]
-
-'''
-== Implementation Specification
-(visible only on this page)
-
-=== Message
-
-Add an “aria-label” or “aria-labbelledby” attribute to this element
-
-
-=== Highlighting
-
-Highlight the HTML element that needs to provide the attribute. <nav> or <div> for example
-
-
-endif::env-github,rspecator-view[]

rules/S5255/javascript/metadata.json

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

rules/S5255/javascript/rule.adoc

@@ -0,0 +1,74 @@
+include::../why.adoc[]
+
+=== Noncompliant code example
+
+Multiple ``++<nav>++`` element
+
+[source,javascript]
+----
+<nav> <!-- Noncompliant -->
+    <ul>
+        <li>A list of navigation links</li>
+    </ul>
+</nav>
+
+<article>
+    <nav> <!-- Noncompliant -->
+        Another list of navigation links
+    </nav>
+</article>
+----
+Repeated "landmark" role ``++"navigation"++``
+
+[source,javascript]
+----
+<div id="mainnav" role="navigation"> <!-- Noncompliant -->
+    <h2 id="mainnavheading">Site Navigation</h2>
+    <ul>
+       <li>List of links</li> 
+    </ul>
+</div>
+<div id="secondarynav" role="navigation"> <!-- Noncompliant -->
+    <h2 id="secondarynavheading">Related links</h2>
+    <ul>
+       <li>List of links</li>
+    </ul>
+</div>
+----
+
+
+=== Compliant solution
+
+[source,javascript]
+----
+<nav aria-label="Site menu">
+    <ul>
+        <li>A list of navigation links</li>
+    </ul>
+</nav>
+
+<article>
+    <nav aria-label="Related links">
+        Another list of navigation links
+    </nav>
+</article>
+----
+
+[source,javascript]
+----
+<div id="mainnav" role="navigation" aria-labelledby="mainnavheading">
+    <h2 id="mainnavheading">Site Navigation</h2>
+    <ul>
+       <li>List of links</li> 
+    </ul>
+</div>
+<div id="secondarynav" role="navigation" aria-labelledby="secondarynavheading">
+    <h2 id="secondarynavheading">Related links</h2>
+    <ul>
+       <li>List of links</li>
+    </ul>
+</div>
+----
+
+
+include::../resources.adoc[]

rules/S5255/metadata.json

@@ -1,2 +1,35 @@
 {
+  "title": "\"aria-label\" or \"aria-labelledby\" attributes should be used to differentiate similar elements",
+  "type": "CODE_SMELL",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "MEDIUM"
+    },
+    "attribute": "COMPLETE"
+  },
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility",
+    "wcag2-a"
+  ],
+  "extra": {
+    "replacementRules": [
+
+    ],
+    "legacyKeys": [
+
+    ]
+  },
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-5255",
+  "sqKey": "S5255",
+  "scope": "Main",
+  "defaultQualityProfiles": [
+    "Sonar way"
+  ],
+  "quickfix": "unknown"
 }

rules/S5255/resources.adoc

@@ -0,0 +1,24 @@
+== Resources
+
+* https://www.w3.org/TR/WCAG20-TECHS/ARIA11.html[WCAG2, ARIA11] - Using ARIA landmarks to identify regions of a page
+* https://www.w3.org/TR/WCAG20-TECHS/H97.html[WCAG2, H97] - Grouping related links using the nav element
+* https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&showtechniques=131#qr-content-structure-separation-programmatic[WCAG2 1.3.1] Info and Relationships
+
+
+ifdef::env-github,rspecator-view[]
+
+'''
+== Implementation Specification
+(visible only on this page)
+
+=== Message
+
+Add an “aria-label” or “aria-labbelledby” attribute to this element
+
+
+=== Highlighting
+
+Highlight the HTML element that needs to provide the attribute. <nav> or <div> for example
+
+
+endif::env-github,rspecator-view[]

rules/S5255/why.adoc

@@ -0,0 +1,9 @@
+== Why is this an issue?
+
+If a page contains multiple ``++<nav>++`` or ``++<aside>++`` elements, each one should have an ``++aria-label++`` or ``++aria-labelledby++`` attribute so that they can be differentiated. The same rule applies when multiple elements have a ``++role++`` attribute with the same "landmark" value.
+
+
+Landmark roles are: ``++banner++``, ``++complementary++``, ``++contentinfo++``, ``++form++``, ``++main++``, ``++navigation++``, ``++search++``, ``++application++``. 
+
+
+The use of ARIA markup helps users of screen readers navigate across blocks of content. For example it makes groups of links easier to locate or skip.