Create rule S6851 (jsx-a11y/img-redundant-alt): Images should have …

…a non-redundant alternate description (#4394)

its/ruling/src/test/expected/jsts/file-for-rules/javascript-S1451.json

@@ -200,6 +200,9 @@
 "file-for-rules:S6846.js": [
 0
 ],
+"file-for-rules:S6851.js": [
+0
+],
 "file-for-rules:boundOrAssignedEvalOrArguments.js": [
 0
 ]

its/ruling/src/test/expected/jsts/file-for-rules/javascript-S3798.json

@@ -74,6 +74,9 @@
 "file-for-rules:S6846.js": [
 1
 ],
+"file-for-rules:S6851.js": [
+1
+],
 "file-for-rules:boundOrAssignedEvalOrArguments.js": [
 2,
 8

its/ruling/src/test/expected/jsts/file-for-rules/javascript-S6851.json

@@ -0,0 +1,5 @@
+{
+"file-for-rules:S6851.js": [
+2
+]
+}

its/sources/jsts/custom/S6851.js

@@ -0,0 +1,3 @@
+function MyImage() {
+ return <img src="sunrise.jpg" alt="image of a sunrise" />;
+}

sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/CheckList.java

@@ -196,6 +196,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
  IdenticalExpressionOnBinaryOperatorCheck.class,
  IdenticalFunctionsCheck.class,
  IgnoredReturnCheck.class,
+ ImgRedundantAltCheck.class,
  ImmediatelyReturnedVariableCheck.class,
  ImplicitDependenciesCheck.class,
  InOperatorTypeErrorCheck.class,

sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/ImgRedundantAltCheck.java

@@ -0,0 +1,36 @@
+/**
+ * SonarQube JavaScript Plugin
+ * Copyright (C) 2011-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+package org.sonar.javascript.checks;
+
+import org.sonar.check.Rule;
+import org.sonar.plugins.javascript.api.EslintBasedCheck;
+import org.sonar.plugins.javascript.api.JavaScriptRule;
+import org.sonar.plugins.javascript.api.TypeScriptRule;
+
+@JavaScriptRule
+@TypeScriptRule
+@Rule(key = "S6851")
+public class ImgRedundantAltCheck implements EslintBasedCheck {
+
+ @Override
+ public String eslintKey() {
+ return "img-redundant-alt";
+ }
+}

sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6851.html

@@ -0,0 +1,35 @@
+<h2>Why is this an issue?</h2>
+<p><code>alt</code> attributes, also known as "alt tags" or "alt descriptions," are used to specify alternative text that is rendered when an image
+cannot be displayed. They are crucial for improving web accessibility, as they provide a text description of images for users who rely on screen
+readers.</p>
+<p>Screen readers announce the presence of an <code>img</code> element and read its <code>alt</code> attribute aloud to describe the image. If the
+<code>alt</code> attribute includes words like "image", "picture", or "photo", it leads to redundancy as the screen reader would repeat "image". For
+instance, an <code>alt</code> attribute like "image of a sunrise" would be read as "Image, image of a sunrise", unnecessarily repeating "image".</p>
+<p>Instead, the <code>alt</code> attribute should focus on describing the content of the image, not the fact that it is an image. This makes the
+browsing experience more efficient and enjoyable for users of screen readers, as they receive a concise and meaningful description of the image
+without unnecessary repetition.</p>
+<h2>How to fix it</h2>
+<p>To fix this issue, you should revise the <code>alt</code> attribute of your <code>img</code> elements to remove any instances of the words "image",
+"picture", or "photo". Instead, provide a concise and accurate description of the image content that adds value for users who cannot see the
+image.</p>
+<h3>Code examples</h3>
+<h4>Noncompliant code example</h4>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+function MyImage() {
+ return &lt;img src="sunrise.jpg" alt="image of a sunrise" /&gt;; // Noncompliant: "Image, image of a sunrise"
+}
+</pre>
+<h4>Compliant solution</h4>
+<pre data-diff-id="1" data-diff-type="compliant">
+function MyImage() {
+ return &lt;img src="sunrise.jpg" alt="a sunrise over a mountain range" /&gt;;
+}
+</pre>
+<h2>Resources</h2>
+<h3>Documentation</h3>
+<ul>
+ <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">img element</a> </li>
+ <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt">alt property</a> </li>
+ <li> WebAIM - <a href="https://webaim.org/techniques/alttext/">Alternative Text</a> </li>
+</ul>
+

sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6851.json

@@ -0,0 +1,29 @@
+{
+ "title": "Images should have a non-redundant alternate description",
+ "type": "CODE_SMELL",
+ "status": "ready",
+ "remediation": {
+ "func": "Constant\/Issue",
+ "constantCost": "5min"
+ },
+ "tags": [
+ "accessibility",
+ "react"
+ ],
+ "defaultSeverity": "Major",
+ "ruleSpecification": "RSPEC-6851",
+ "sqKey": "S6851",
+ "scope": "All",
+ "quickfix": "infeasible",
+ "code": {
+ "impacts": {
+ "MAINTAINABILITY": "LOW",
+ "RELIABILITY": "LOW"
+ },
+ "attribute": "CONVENTIONAL"
+ },
+ "compatibleLanguages": [
+ "JAVASCRIPT",
+ "TYPESCRIPT"
+ ]
+}

sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/Sonar_way_profile.json

@@ -317,6 +317,7 @@
  "S6846",
  "S6848",
  "S6849",
- "S6850"
+ "S6850",
+ "S6851"
  ]
 }