Skip to content

Commit

Permalink
Update metadata (#262)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yassin-kammoun-sonarsource
yassin-kammoun-sonarsource committed Jan 26, 2024
1 parent 3f031e5 commit 380c7b2
Show file tree
Hide file tree
Showing 16 changed files with 253 additions and 100 deletions.
5 changes: 3 additions & 2 deletions ...ml-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/AvoidCommentedOutCodeCheck.html
View file
Original file line number Diff line number Diff line change
@@ -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>

6 changes: 3 additions & 3 deletions sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/AvoidHtmlCommentCheck.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

7 changes: 4 additions & 3 deletions sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/AvoidHtmlCommentCheck.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -21,5 +21,6 @@
"OWASP": [
"A3"
]
}
},
"quickfix": "unknown"
}
97 changes: 50 additions & 47 deletions sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/ImgWithoutAltCheck.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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>

6 changes: 3 additions & 3 deletions sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/ImgWithoutAltCheck.json
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -20,5 +20,5 @@
"ruleSpecification": "RSPEC-1077",
"sqKey": "ImgWithoutAltCheck",
"scope": "Main",
"quickfix": "unknown"
"quickfix": "infeasible"
}
2 changes: 1 addition & 1 deletion sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/LongJavaScriptCheck.json
View file
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
2 changes: 1 addition & 1 deletion sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/S1134.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

4 changes: 2 additions & 2 deletions sonar-html-plugin/src/main/resources/org/sonar/l10n/web/rules/Web/S1135.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>

Loading

0 comments on commit 380c7b2

Please sign in to comment.