Update rule metadata (#4410)

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

@@ -7,22 +7,45 @@ <h2>Why is this an issue?</h2>
   <li> Visually impaired users using a screen reader software </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 alternative text 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 alternative text 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
-below.</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;img&gt;</code> element has no <code>alt</code> attribute. </li>
   <li> An <code>&lt;input type="image"&gt;</code> element has no <code>alt</code>, <code>aria-label</code> or <code>aria-labelledby</code> attribute
   or they hold an empty string. </li>
   <li> An <code>&lt;area&gt;</code> element within an image map has no <code>alt</code>, <code>aria-label</code> or <code>aria-labelledby</code>
   attribute. </li>
-  <li> An <code>&lt;object&gt;</code> element has no inner text, or <code>title</code>, <code>aria-label</code> or <code>aria-labelledby</code>
-  attribute </li>
+  <li> An <code>&lt;object&gt;</code> element has no inner text, <code>title</code>, <code>aria-label</code> or <code>aria-labelledby</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;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 alternative text attribute --&gt;
 &lt;input type="image" src="bar.png" alt="" /&gt; &lt;!-- empty alternative text attribute on &lt;input&gt; --&gt;
@@ -38,8 +61,8 @@ <h3>Noncompliant code example</h3>
 
 &lt;object {...props} /&gt;  &lt;!-- missing alternative text attribute on &lt;area&gt; --&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" aria-labelledby="Textual description of bar.png" /&gt;
 
@@ -54,37 +77,18 @@ <h3>Compliant solution</h3>
 
 &lt;object&gt;My welcoming Bar&lt;/object&gt;
 </pre>
-<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;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>
-<p>See&nbsp;<a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">W3C WAI&nbsp;Web Accessibility Tutorials</a> 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-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S1077.json

@@ -1,6 +1,12 @@
 {
   "title": "Image, area, button with image and object elements should have an alternative text",
   "type": "CODE_SMELL",
+  "code": {
+    "impacts": {
+      "RELIABILITY": "LOW"
+    },
+    "attribute": "COMPLETE"
+  },
   "status": "ready",
   "remediation": {
     "func": "Constant\/Issue",
@@ -14,14 +20,8 @@
   "defaultSeverity": "Minor",
   "ruleSpecification": "RSPEC-1077",
   "sqKey": "S1077",
-  "scope": "All",
+  "scope": "Main",
   "quickfix": "infeasible",
-  "code": {
-    "impacts": {
-      "RELIABILITY": "LOW"
-    },
-    "attribute": "COMPLETE"
-  },
   "compatibleLanguages": [
     "JAVASCRIPT",
     "TYPESCRIPT"

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

@@ -5,7 +5,7 @@
     "impacts": {
       "MAINTAINABILITY": "MEDIUM"
     },
-    "attribute": "LOGICAL"
+    "attribute": "FOCUSED"
   },
   "status": "ready",
   "remediation": {

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

@@ -9,8 +9,7 @@
   },
   "status": "ready",
   "tags": [
-    "cwe",
-    "spring"
+    "cwe"
   ],
   "defaultSeverity": "Critical",
   "ruleSpecification": "RSPEC-4790",

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

@@ -14,7 +14,7 @@ <h2>Recommended Secure Coding Practices</h2>
 enabled by default.</p>
 <h2>Sensitive Code Example</h2>
 <pre>
-window.open("https://example.com/dangerous");
+window.open("https://example.com/dangerous"); // Sensitive
 </pre>
 <h2>Compliant Solution</h2>
 <pre>

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

@@ -9,15 +9,15 @@ <h2>Why is this an issue?</h2>
   componentDidMount() {
     mydatastore.subscribe(this);
   }
-  dataHandler: function() {
+  dataHandler() {
     if (this.isMounted()) { // Noncompliant: isMounted() hides the error
-        //...
+      //...
     }
   }
-  render: function() {
+  render() {
     //... calls dataHandler()
   }
-});
+};
 </pre>
 <p>Find places where <code>setState()</code> might be called after a component has unmounted, and fix them. Such situations most commonly occur due to
 callbacks, when a component is waiting for some data and gets unmounted before the data arrives. Ideally, any callbacks should be canceled in
@@ -27,7 +27,7 @@ <h2>Why is this an issue?</h2>
   componentDidMount() {
     mydatastore.subscribe(this);
   }
-  dataHandler: function() {
+  dataHandler() {
     //...
   }
   render() {

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

@@ -9,11 +9,11 @@ <h2>Why is this an issue?</h2>
 </ul>
 <pre data-diff-id="1" data-diff-type="noncompliant">
 const Hello = createReactClass({
-  componentDidMount: function() {
+  componentDidMount() {
     const component = this.refs.hello; // Noncompliant
     // ...
   },
-  render: function() {
+  render() {
     return &lt;div ref="hello"&gt;Hello, world.&lt;/div&gt;;
   }
 });
@@ -23,7 +23,7 @@ <h2>Why is this an issue?</h2>
 callback with <code>null</code>. One should return <code>undefined</code> from the <code>ref</code> callback.</p>
 <pre data-diff-id="1" data-diff-type="compliant">
 const Hello = createReactClass({
-  componentDidMount: function() {
+  componentDidMount() {
     const component = this.hello;
     // ...
   },

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

@@ -7,7 +7,18 @@ <h2>Why is this an issue?</h2>
 <p>For screen readers to operate effectively, it is imperative that the autocomplete attribute values are not only valid but also correctly
 applied.</p>
 <h2>How to fix it</h2>
-<p>Ensure the autocomplete attribute is correct and suitable for the form field it is used with.</p>
+<p>Ensure the autocomplete attribute is correct and suitable for the form field it is used with:</p>
+<ul>
+  <li> Identify the input type: The autocomplete attribute should be used with form elements like <code>&lt;input&gt;</code>,
+  <code>&lt;select&gt;</code>, and <code>&lt;textarea&gt;</code>. The type of input field should be clearly identified using the <code>type</code>
+  attribute, such as <code>type="text"</code>, <code>type="email"</code>, or <code>type="tel"</code>. </li>
+  <li> Specify the autocomplete value: The value of the autocomplete attribute should be a string that specifies what kind of input the browser should
+  autofill. For example, <code>autocomplete="name"</code> would suggest that the browser autofill the user’s full name. </li>
+  <li> Use appropriate autocomplete values: The value you use should be appropriate for the type of input. For example, for a credit card field, you
+  might use <code>autocomplete="cc-number"</code>. For a country field in an address form, you might use <code>autocomplete="country"</code>. </li>
+</ul>
+<p>For additional details, please refer to the <a
+href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete">guidelines</a> provided in the HTML standard.</p>
 <h3>Code examples</h3>
 <h4>Noncompliant code example</h4>
 <pre data-diff-id="1" data-diff-type="noncompliant">
@@ -28,5 +39,7 @@ <h3>Documentation</h3>
   <li> WCAG - <a href="https://www.w3.org/TR/WCAG21/#input-purposes">Input Purposes for User Interface Components</a> </li>
   <li> HTML Standard - <a href="https://html.spec.whatwg.org/multipage/forms.html#enabling-client-side-automatic-filling-of-form-controls">Enabling
   client-side automatic filling of form controls</a> </li>
+  <li> HTML Standard - <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete">Autofilling form
+  controls: the autocomplete attribute</a> </li>
 </ul>
 

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

@@ -7,7 +7,8 @@
     "constantCost": "5min"
   },
   "tags": [
-    "accessibility"
+    "accessibility",
+    "react"
   ],
   "defaultSeverity": "Major",
   "ruleSpecification": "RSPEC-6840",

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

@@ -4,9 +4,9 @@ <h2>Why is this an issue?</h2>
 understand the page structure.</p>
 <p>Therefore, it’s recommended to avoid using positive <code>tabIndex</code> values.</p>
 <h2>How to fix it</h2>
-<p>If you need to make an element focusable that isn’t by default (like a &lt;div&gt; or &lt;span&gt;), you can use <code>tabIndex="0"</code>. This
-will add the element to the natural tab order based on its position in the HTML. Otherwise, either remove the <code>tabIndex</code> value or use a
-negative value to remove the element from the tab order.</p>
+<p>If you need to make an element focusable that isn’t by default (like a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code>), you can use
+<code>tabIndex="0"</code>. This will add the element to the natural tab order based on its position in the HTML. Otherwise, either remove the
+<code>tabIndex</code> value or use <code>tabIndex="-1"</code> to remove the element from the tab order.</p>
 <h3>Code examples</h3>
 <h4>Noncompliant code example</h4>
 <pre data-diff-id="1" data-diff-type="noncompliant">

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

@@ -1,13 +1,14 @@
 {
-  "title": "\"tabIndex\" values should be non-positive",
+  "title": "\"tabIndex\" values should be 0 or -1",
   "type": "CODE_SMELL",
   "status": "ready",
   "remediation": {
     "func": "Constant\/Issue",
     "constantCost": "5min"
   },
   "tags": [
-    "accessibility"
+    "accessibility",
+    "react"
   ],
   "defaultSeverity": "Major",
   "ruleSpecification": "RSPEC-6841",

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

@@ -34,6 +34,7 @@ <h4>Noncompliant code example</h4>
 <h4>Compliant solution</h4>
 <pre data-diff-id="1" data-diff-type="compliant">
 &lt;button onClick={foo}&gt;Perform action&lt;/button&gt;
+&lt;a href="#section" onClick={foo} /&gt;
 </pre>
 <h2>Resources</h2>
 <h3>Documentation</h3>

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

@@ -17,9 +17,8 @@
   "quickfix": "infeasible",
   "code": {
     "impacts": {
-      "MAINTAINABILITY": "HIGH",
-      "RELIABILITY": "MEDIUM",
-      "SECURITY": "LOW"
+      "MAINTAINABILITY": "LOW",
+      "RELIABILITY": "LOW"
     },
     "attribute": "CONVENTIONAL"
   },

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

@@ -1,41 +1,28 @@
+<p>Navigation using the Tab key should be restricted to elements on the page that users can interact with.</p>
 <h2>Why is this an issue?</h2>
-<p>ARIA (Accessible Rich Internet Applications) attributes are used to enhance the accessibility of web content and web applications. These attributes
-provide additional information about an element’s role, state, properties, and values to assistive technologies like screen readers.</p>
-<p>The <code>aria-activedescendant</code> attribute is used to enhance the accessibility of composite widgets by managing focus within them. It allows
-a parent element to retain active document focus while indicating which of its child elements has secondary focus. This attribute is particularly
-useful in interactive components like search typeahead select lists, where the user can navigate through a list of options while continuing to type in
-the input field.</p>
-<p>This rule checks that DOM elements with the <code>aria-activedescendant</code> property either have an inherent tabIndex or declare one.</p>
-<h2>How to fix it in JSX</h2>
-<p>Make sure that DOM elements with the <code>aria-activedescendant</code> property have a <code>tabIndex</code> property, or use an element with an
-inherent one.</p>
+<p>The misuse of the <code>tabIndex</code> attribute can lead to several issues:</p>
+<ul>
+  <li> Navigation Confusion: It can confuse users who rely on keyboard navigation, as they might expect to tab through interactive elements like links
+  and buttons, not static content. </li>
+  <li> Accessibility Issues: It can create accessibility problems, as assistive technologies provide their own page navigation mechanisms based on the
+  HTML of the page. Adding unnecessary tabindexes can disrupt this. </li>
+  <li> Increased Tab Ring Size: It unnecessarily increases the size of the page’s tab ring, making navigation more cumbersome. </li>
+</ul>
+<h2>How to fix it</h2>
+<p>Simply remove the <code>tabIndex</code> attribute or set it to <code>"-1"</code> to fix the issue.</p>
 <h3>Code examples</h3>
 <h4>Noncompliant code example</h4>
 <pre data-diff-id="1" data-diff-type="noncompliant">
-&lt;div aria-activedescendant={descendantId}&gt;
-  {content}
-&lt;/div&gt;
+&lt;div tabIndex="0" /&gt;
 </pre>
 <h4>Compliant solution</h4>
 <pre data-diff-id="1" data-diff-type="compliant">
-&lt;div aria-activedescendant={descendantId} tabIndex={0}&gt;
-  {content}
-&lt;/div&gt;
+&lt;div /&gt;
 </pre>
 <h2>Resources</h2>
 <h3>Documentation</h3>
 <ul>
-  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">Using ARIA: Roles, states, and
-  properties</a> </li>
-  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">ARIA roles (Reference)</a> </li>
-  <li> MDN web docs - <a
-  href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant"><code>aria-activedescendant</code>
-  attribute</a> </li>
-  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"><code>tabIndex</code> attribute</a> </li>
-</ul>
-<h3>Standards</h3>
-<ul>
-  <li> W3C - <a href="https://www.w3.org/TR/wai-aria-1.2/">Accessible Rich Internet Applications (WAI-ARIA) 1.2</a> </li>
-  <li> W3C - <a href="https://www.w3.org/TR/wai-aria/#composite">Composite role</a> </li>
+  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> </li>
+  <li> The a11y project - <a href="https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/">Use the tabindex attribute</a> </li>
 </ul>
 

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

@@ -1,5 +1,5 @@
 {
-  "title": "Non interactive DOM elements should not have the `tabIndex` property",
+  "title": "Non-interactive DOM elements should not have the `tabIndex` property",
   "type": "CODE_SMELL",
   "status": "ready",
   "remediation": {

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

@@ -19,13 +19,13 @@ <h2>Why is this an issue?</h2>
   <li> Unlike the Windows environment that highlights keyboard shortcuts in menus, web pages or applications lack a standardized method to notify
   users about available <code>accesskey</code> shortcuts. </li>
 </ul>
-<p>Given these concerns, it is generally recommended to avoid using `accesskey`s.</p>
+<p>Given these concerns, it is generally recommended to avoid using <code>accesskey</code>s.</p>
 <pre data-diff-id="1" data-diff-type="noncompliant">
 function div() {
     return &lt;div accessKey="h" /&gt;;
 }
 </pre>
-<p>Do not use `accesskey`s at all.</p>
+<p>Do not use <code>accesskey</code>s at all.</p>
 <pre data-diff-id="1" data-diff-type="compliant">
 function div() {
     return &lt;div /&gt;;