Update metadata (#262)

Author: yassin-kammoun-sonarsource

sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/AvoidCommentedOutCodeCheck.html

@@ -1,4 +1,5 @@
 <h2>Why is this an issue?</h2>
-<p>Programmers should not comment out code as it bloats programs and reduces readability.</p>
-<p>Unused code should be deleted and can be retrieved from source control history if required.</p>
+<p>Commented-out code distracts the focus from the actual executed code. It creates a noise that increases maintenance code. And because it is never
+executed, it quickly becomes out of date and invalid.</p>
+<p>Commented-out code should be deleted and can be retrieved from source control history if required.</p>
 

sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/AvoidHtmlCommentCheck.html

@@ -34,8 +34,8 @@ <h2>Compliant Solution</h2>
 </pre>
 <h2>See</h2>
 <ul>
-  <li> <a href="https://www.owasp.org/www-project-top-ten/2017/A3_2017-Sensitive_Data_Exposure">OWASP Top 10 2017 Category A3</a> - Sensitive Data
-  Exposure </li>
-  <li> <a href="https://cwe.mitre.org/data/definitions/615">MITRE, CWE-615</a> - Information Exposure Through Comments </li>
+  <li> OWASP - <a href="https://owasp.org/www-project-top-ten/2017/A3_2017-Sensitive_Data_Exposure">Top 10 2017 Category A3 - Sensitive Data
+  Exposure</a> </li>
+  <li> CWE - <a href="https://cwe.mitre.org/data/definitions/615">CWE-615 - Information Exposure Through Comments</a> </li>
 </ul>
 

sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/AvoidHtmlCommentCheck.json

@@ -1,6 +1,6 @@
 {
-  "title": "Using HTML comments is security-sensitive",
-  "type": "SECURITY_HOTSPOT",
+  "title": "HTML comments should be removed",
+  "type": "CODE_SMELL",
   "status": "ready",
   "remediation": {
     "func": "Constant\/Issue",
@@ -21,5 +21,6 @@
     "OWASP": [
       "A3"
     ]
-  }
+  },
+  "quickfix": "unknown"
 }

sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/ImgWithoutAltCheck.html

@@ -5,35 +5,58 @@ <h2>Why is this an issue?</h2>
 <ul>
   <li> The image can no longer be found </li>
   <li> Visually impaired users using a screen reader software </li>
-  <li> Images loading is disabled, to reduce data consumption on mobile phones </li>
+  <li> Image loading is disabled, to reduce data consumption on mobile phones </li>
 </ul>
-<p>It is also very important to not set an <code>alt</code> attribute to a non-informative value. For example <code>&lt;img ... alt="logo"&gt;</code>
+<p>It is also very important not to set an <code>alt</code> attribute to a non-informative value. For example, <code>&lt;img ... alt="logo"&gt;</code>
 is useless as it doesn’t give any information to the user. In this case, as for any other decorative image, it is better to use a CSS background image
-instead of an <code>&lt;img&gt;</code> tag. If using CSS background-image is not possible, an empty <code>alt=""</code> is tolerated. See Exceptions
-bellow.</p>
-<p>This rule raises an issue when</p>
+instead of an <code>&lt;img&gt;</code> tag. If using CSS <code>background-image</code> is not possible, an empty <code>alt=""</code> is tolerated. See
+Exceptions below.</p>
+<p>This rule raises an issue when:</p>
 <ul>
-  <li> an <code>&lt;input type="image"&gt;</code> tag or an <code>&lt;area&gt;</code> tag have no <code>alt</code> attribute or their
-  <code>alt</code>&nbsp;attribute has an empty string value. </li>
-  <li> an <code>&lt;img&gt;</code> tag has no <code>alt</code> attribute. </li>
+  <li> An <code>&lt;input type="image"&gt;</code> or <code>&lt;area&gt;</code> element has no <code>alt</code> attribute or it holds an empty string
+  value. </li>
+  <li> An <code>&lt;img&gt;</code> element has no <code>alt</code> attribute. </li>
 </ul>
-<h3>Noncompliant code example</h3>
+<h3>Exceptions</h3>
+<p><code>&lt;img&gt;</code> elements with an empty string&nbsp;<code>alt=""</code> attribute won’t raise any issue. However, this way should be used
+in two cases only:</p>
+<p>When the image is decorative and it is not possible to use a CSS background image. For example, when the decorative <code>&lt;img&gt;</code> is
+generated via javascript with a source image coming from a database, it is better to use an <code>&lt;img alt=""&gt;</code> tag rather than generate
+CSS code.</p>
 <pre>
-&lt;img src="foo.png" /&gt; &lt;!-- Noncompliant --&gt;
-&lt;input type="image" src="bar.png" /&gt; &lt;!-- Noncompliant --&gt;
-&lt;input type="image" src="bar.png" alt="" /&gt; &lt;!-- Noncompliant --&gt;
+&lt;li *ngFor="let image of images"&gt;
+    &lt;img [src]="image" alt=""&gt;
+&lt;/li&gt;
+</pre>
+<p>When the image is not decorative but its <code>alt</code> text would repeat a nearby text. For example, images contained in links should not
+duplicate the link’s text in their <code>alt</code> attribute, as it would make the screen reader repeat the text twice.</p>
+<pre>
+&lt;a href="flowers.html"&gt;
+    &lt;img src="tulip.gif" alt="" /&gt;
+    A blooming tulip
+&lt;/a&gt;
+</pre>
+<p>In all other cases you should use CSS background images.</p>
+<h2>How to fix it</h2>
+<p>Add an alternative text to the HTML element.</p>
+<h3>Code examples</h3>
+<h4>Noncompliant code example</h4>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+&lt;img src="foo.png" /&gt; &lt;!-- missing `alt` attribute --&gt;
+&lt;input type="image" src="bar.png" /&gt; &lt;!-- missing `alt` attribute --&gt;
+&lt;input type="image" src="bar.png" alt="" /&gt; &lt;!-- empty `alt` attribute on &lt;input&gt; --&gt;
 
 &lt;img src="house.gif" usemap="#map1"
     alt="rooms of the house." /&gt;
 &lt;map id="map1" name="map1"&gt;
   &lt;area shape="rect" coords="0,0,42,42"
-    href="bedroom.html"/&gt; &lt;!-- Noncompliant --&gt;
+    href="bedroom.html"/&gt; &lt;!-- missing `alt` attribute --&gt;
   &lt;area shape="rect" coords="0,0,21,21"
-    href="lounge.html" alt=""/&gt; &lt;!-- Noncompliant --&gt;
+    href="lounge.html" alt=""/&gt; &lt;!-- empty `alt` attribute on &lt;area&gt; --&gt;
 &lt;/map&gt;
 </pre>
-<h3>Compliant solution</h3>
-<pre>
+<h4>Compliant solution</h4>
+<pre data-diff-id="1" data-diff-type="compliant">
 &lt;img src="foo.png" alt="Some textual description of foo.png" /&gt;
 &lt;input type="image" src="bar.png" alt="Textual description of bar.png" /&gt;
 
@@ -46,38 +69,18 @@ <h3>Compliant solution</h3>
     href="lounge.html" alt="Lounge"/&gt;
 &lt;/map&gt;
 </pre>
-<h3>Exceptions</h3>
-<p><code>&lt;img&gt;</code> tags with empty string&nbsp;<code>alt=""</code> attributes won’t raise any issue. However this technic should be used in
-two cases only:</p>
-<p>When the image is decorative and it is not possible to use a CSS background image. For example, when the decorative <code>&lt;img&gt;</code> is
-generated via javascript with a source image coming from a database, it is better to use an <code>&lt;img alt=""&gt;</code> tag rather than generate
-CSS code.</p>
-<pre>
-&lt;li *ngFor="let image of images"&gt;
-    &lt;img [src]="image" alt=""&gt;
-&lt;/li&gt;
-</pre>
-<p>When the image is not decorative but it’s <code>alt</code> text would repeat a nearby text. For example, images contained in links should not
-duplicate the link’s text in their <code>alt</code> attribute, as it would make the screen reader repeat the text twice.</p>
-<pre>
-&lt;a href="flowers.html"&gt;
-    &lt;img src="tulip.gif" alt="" /&gt;
-    A blooming tulip
-&lt;/a&gt;
-</pre>
-<p>In all other cases you should use CSS background images.</p>
-<p>See&nbsp;<a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">W3C WAI&nbsp;Web Accessibility Tutorials</a>&nbsp;for more
-information.</p>
 <h2>Resources</h2>
+<h3>Documentation</h3>
 <ul>
-  <li> <a href="https://www.w3.org/TR/WCAG20-TECHS/H24.html">WCAG2, H24</a> - Providing text alternatives for the area elements of image maps </li>
-  <li> <a href="https://www.w3.org/TR/WCAG20-TECHS/H36.html">WCAG2, H36</a> - Using alt attributes on images used as submit buttons </li>
-  <li> <a href="https://www.w3.org/TR/WCAG20-TECHS/H37.html">WCAG2, H37</a> - Using alt attributes on img elements </li>
-  <li> <a href="https://www.w3.org/TR/WCAG20-TECHS/H67.html">WCAG2, H67</a> - Using null alt text and no title attribute on img elements for images
-  that AT should ignore </li>
-  <li> <a href="https://www.w3.org/TR/WCAG20-TECHS/H2.html">WCAG2, H2</a> - Combining adjacent image and text links for the same resource </li>
-  <li> <a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-text-equiv-all">WCAG2, 1.1.1</a> - Non-text Content </li>
-  <li> <a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-navigation-mechanisms-refs">WCAG2, 2.4.4</a> - Link Purpose (In Context) </li>
-  <li> <a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-navigation-mechanisms-link">WCAG2, 2.4.9</a> - Link Purpose (Link Only) </li>
+  <li> W3C - <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">W3C WAI&nbsp;Web Accessibility Tutorials</a> </li>
+  <li> W3C - <a href="https://www.w3.org/TR/WCAG20-TECHS/H24.html">Providing text alternatives for the area elements of image maps</a> </li>
+  <li> W3C - <a href="https://www.w3.org/TR/WCAG20-TECHS/H36.html">Using alt attributes on images used as submit buttons</a> </li>
+  <li> W3C - <a href="https://www.w3.org/TR/WCAG20-TECHS/H37.html">Using alt attributes on img elements</a> </li>
+  <li> W3C - <a href="https://www.w3.org/TR/WCAG20-TECHS/H67.html">Using null alt text and no title attribute on img elements for images that AT
+  should ignore</a> </li>
+  <li> W3C - <a href="https://www.w3.org/TR/WCAG20-TECHS/H2.html">Combining adjacent image and text links for the same resource</a> </li>
+  <li> W3C - <a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-text-equiv-all">Non-text Content</a> </li>
+  <li> W3C - <a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-navigation-mechanisms-refs">Link Purpose (In Context)</a> </li>
+  <li> W3C - <a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-navigation-mechanisms-link">Link Purpose (Link Only)</a> </li>
 </ul>
 

sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/ImgWithoutAltCheck.json

@@ -1,6 +1,6 @@
 {
-  "title": "Image, area and button with image tags should have an \"alt\" attribute",
-  "type": "BUG",
+  "title": "Image, area and button with image elements should have an \"alt\" attribute",
+  "type": "CODE_SMELL",
   "code": {
     "impacts": {
       "RELIABILITY": "LOW"
@@ -20,5 +20,5 @@
   "ruleSpecification": "RSPEC-1077",
   "sqKey": "ImgWithoutAltCheck",
   "scope": "Main",
-  "quickfix": "unknown"
+  "quickfix": "infeasible"
 }

sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/LongJavaScriptCheck.json

@@ -1,5 +1,5 @@
 {
-  "title": "Javascript scriptlets should not have too many lines of code",
+  "title": "JavaScript scriptlets should not have too many lines of code",
   "type": "CODE_SMELL",
   "code": {
     "impacts": {

sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/S1134.html

@@ -11,6 +11,6 @@ <h2>Why is this an issue?</h2>
 <h2>Resources</h2>
 <h3>Documentation</h3>
 <ul>
-  <li> <a href="https://cwe.mitre.org/data/definitions/546">MITRE, CWE-546 - Suspicious Comment</a> </li>
+  <li> CWE - <a href="https://cwe.mitre.org/data/definitions/546">CWE-546 - Suspicious Comment</a> </li>
 </ul>
 

sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/S1135.html

@@ -1,5 +1,5 @@
 <h2>Why is this an issue?</h2>
-<p>Developers often use <code>TOOO</code> tags to mark areas in the code where additional work or improvements are needed but are not implemented
+<p>Developers often use <code>TODO</code> tags to mark areas in the code where additional work or improvements are needed but are not implemented
 immediately. However, these <code>TODO</code> tags sometimes get overlooked or forgotten, leading to incomplete or unfinished code. This code smell
 class aims to identify and address such unattended <code>TODO</code> tags to ensure a clean and maintainable codebase. This description will explore
 why this is a problem and how it can be fixed to improve the overall code quality.</p>
@@ -24,6 +24,6 @@ <h3>Noncompliant code example</h3>
 </pre>
 <h2>Resources</h2>
 <ul>
-  <li> <a href="https://cwe.mitre.org/data/definitions/546">MITRE, CWE-546</a> - Suspicious Comment </li>
+  <li> CWE - <a href="https://cwe.mitre.org/data/definitions/546">CWE-546 - Suspicious Comment</a> </li>
 </ul>