From 8167e5b73f06c9d6c820c9c845a1b5e5fc14271b Mon Sep 17 00:00:00 2001 From: Tibor Blenessy Date: Wed, 22 Nov 2023 16:49:07 +0100 Subject: [PATCH] Update rule metadata (#4410) --- .../javascript/rules/javascript/S1077.html | 80 ++++++++++--------- .../javascript/rules/javascript/S1077.json | 14 ++-- .../javascript/rules/javascript/S1788.json | 2 +- .../javascript/rules/javascript/S4790.json | 3 +- .../javascript/rules/javascript/S5148.html | 2 +- .../javascript/rules/javascript/S6789.html | 10 +-- .../javascript/rules/javascript/S6790.html | 6 +- .../javascript/rules/javascript/S6840.html | 15 +++- .../javascript/rules/javascript/S6840.json | 3 +- .../javascript/rules/javascript/S6841.html | 6 +- .../javascript/rules/javascript/S6841.json | 5 +- .../javascript/rules/javascript/S6844.html | 1 + .../javascript/rules/javascript/S6844.json | 5 +- .../javascript/rules/javascript/S6845.html | 43 ++++------ .../javascript/rules/javascript/S6845.json | 2 +- .../javascript/rules/javascript/S6846.html | 4 +- .../javascript/rules/javascript/S6848.html | 5 +- .../javascript/rules/javascript/S6848.json | 4 +- .../javascript/rules/javascript/S6849.html | 39 ++------- .../javascript/rules/javascript/S6851.html | 11 +-- .../javascript/rules/javascript/S6851.json | 2 +- .../javascript/rules/javascript/S6852.html | 19 ++--- .../javascript/rules/javascript/S6852.json | 4 +- .../javascript/rules/javascript/S6855.json | 2 +- sonarpedia.json | 2 +- 25 files changed, 135 insertions(+), 154 deletions(-) diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S1077.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S1077.html index a473b10723b..4f817001b22 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S1077.html +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S1077.html @@ -7,10 +7,10 @@

Why is this an issue?

  • Visually impaired users using a screen reader software
  • Image loading is disabled, to reduce data consumption on mobile phones
  • -

    It is also very important to not set an alternative text attribute to a non-informative value. For example <img ... alt="logo"> +

    It is also very important not to set an alternative text attribute to a non-informative value. For example, <img ... alt="logo"> 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 <img> tag. If using CSS background-image is not possible, an empty alt="" is tolerated. See Exceptions -below.

    +instead of an <img> tag. If using CSS background-image is not possible, an empty alt="" is tolerated. See +Exceptions below.

    This rule raises an issue when:

    -

    Noncompliant code example

    +

    Exceptions

    +

    <img> elements with an empty string alt="" attribute won’t raise any issue. However, this way should be used +in two cases only:

    +

    When the image is decorative and it is not possible to use a CSS background image. For example, when the decorative <img> is +generated via javascript with a source image coming from a database, it is better to use an <img alt=""> tag rather than generate +CSS code.

    +
    +<li *ngFor="let image of images">
    +    <img [src]="image" alt="">
    +</li>
    +
    +

    When the image is not decorative but its alt text would repeat a nearby text. For example, images contained in links should not +duplicate the link’s text in their alt attribute, as it would make the screen reader repeat the text twice.

    +<a href="flowers.html">
    +    <img src="tulip.gif" alt="" />
    +    A blooming tulip
    +</a>
    +
    +

    In all other cases you should use CSS background images.

    +

    How to fix it

    +

    Add an alternative text to the HTML element.

    +

    Code examples

    +

    Noncompliant code example

    +
     <img src="foo.png" /> <!-- missing `alt` attribute -->
     <input type="image" src="bar.png" /> <!-- missing alternative text attribute -->
     <input type="image" src="bar.png" alt="" /> <!-- empty alternative text attribute on <input> -->
    @@ -38,8 +61,8 @@ 

    Noncompliant code example

    <object {...props} /> <!-- missing alternative text attribute on <area> -->
    -

    Compliant solution

    -
    +

    Compliant solution

    +
     <img src="foo.png" alt="Some textual description of foo.png" />
     <input type="image" src="bar.png" aria-labelledby="Textual description of bar.png" />
     
    @@ -54,37 +77,18 @@ 

    Compliant solution

    <object>My welcoming Bar</object>
    -

    Exceptions

    -

    <img> elements with an empty string alt="" attribute won’t raise any issue. However, this way should be used -in two cases only:

    -

    When the image is decorative and it is not possible to use a CSS background image. For example, when the decorative <img> is -generated via javascript with a source image coming from a database, it is better to use an <img alt=""> tag rather than generate -CSS code.

    -
    -<li *ngFor="let image of images">
    -    <img [src]="image" alt="">
    -</li>
    -
    -

    When the image is not decorative but its alt text would repeat a nearby text. For example, images contained in links should not -duplicate the link’s text in their alt attribute, as it would make the screen reader repeat the text twice.

    -
    -<a href="flowers.html">
    -    <img src="tulip.gif" alt="" />
    -    A blooming tulip
    -</a>
    -
    -

    In all other cases, you should use CSS background images.

    -

    See W3C WAI Web Accessibility Tutorials for more information.

    Resources

    +

    Documentation

    diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S1077.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S1077.json index 96ee325ae31..1ae8fd24fcf 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S1077.json +++ b/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" diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S1788.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S1788.json index 236d668fdd0..f32c87b7bce 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S1788.json +++ b/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": { diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S4790.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S4790.json index 54d36cdfa3e..7626cea84e2 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S4790.json +++ b/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", diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S5148.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S5148.html index 66552b3ebd6..12bd03d4850 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S5148.html +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S5148.html @@ -14,7 +14,7 @@

    Recommended Secure Coding Practices

    enabled by default.

    Sensitive Code Example

    -window.open("https://example.com/dangerous");
    +window.open("https://example.com/dangerous"); // Sensitive
     

    Compliant Solution

    diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6789.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6789.html
    index f1dd38bf9b7..f1a2b4d97b3 100644
    --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6789.html
    +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6789.html
    @@ -9,15 +9,15 @@ 

    Why is this an issue?

    componentDidMount() { mydatastore.subscribe(this); } - dataHandler: function() { + dataHandler() { if (this.isMounted()) { // Noncompliant: isMounted() hides the error - //... + //... } } - render: function() { + render() { //... calls dataHandler() } -}); +};

    Find places where setState() 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 @@

    Why is this an issue?

    componentDidMount() { mydatastore.subscribe(this); } - dataHandler: function() { + dataHandler() { //... } render() { diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6790.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6790.html index 04a06043482..fc19e992dec 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6790.html +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6790.html @@ -9,11 +9,11 @@

    Why is this an issue?

     const Hello = createReactClass({
    -  componentDidMount: function() {
    +  componentDidMount() {
         const component = this.refs.hello; // Noncompliant
         // ...
       },
    -  render: function() {
    +  render() {
         return <div ref="hello">Hello, world.</div>;
       }
     });
    @@ -23,7 +23,7 @@ 

    Why is this an issue?

    callback with null. One should return undefined from the ref callback.

     const Hello = createReactClass({
    -  componentDidMount: function() {
    +  componentDidMount() {
         const component = this.hello;
         // ...
       },
    diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6840.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6840.html
    index 0c211dfc6f7..33a1689e246 100644
    --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6840.html
    +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6840.html
    @@ -7,7 +7,18 @@ 

    Why is this an issue?

    For screen readers to operate effectively, it is imperative that the autocomplete attribute values are not only valid but also correctly applied.

    How to fix it

    -

    Ensure the autocomplete attribute is correct and suitable for the form field it is used with.

    +

    Ensure the autocomplete attribute is correct and suitable for the form field it is used with:

    +
      +
    • Identify the input type: The autocomplete attribute should be used with form elements like <input>, + <select>, and <textarea>. The type of input field should be clearly identified using the type + attribute, such as type="text", type="email", or type="tel".
    • +
    • 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, autocomplete="name" would suggest that the browser autofill the user’s full name.
    • +
    • 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 autocomplete="cc-number". For a country field in an address form, you might use autocomplete="country".
    • +
    +

    For additional details, please refer to the guidelines provided in the HTML standard.

    Code examples

    Noncompliant code example

    @@ -28,5 +39,7 @@ 

    Documentation

  • WCAG - Input Purposes for User Interface Components
  • HTML Standard - Enabling client-side automatic filling of form controls
  • +
  • HTML Standard - Autofilling form + controls: the autocomplete attribute
  • diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6840.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6840.json index d92354a2a45..41b3bd520f9 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6840.json +++ b/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", diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6841.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6841.html index a05d4a6558b..f9cf39f269f 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6841.html +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6841.html @@ -4,9 +4,9 @@

    Why is this an issue?

    understand the page structure.

    Therefore, it’s recommended to avoid using positive tabIndex values.

    How to fix it

    -

    If you need to make an element focusable that isn’t by default (like a <div> or <span>), you can use tabIndex="0". This -will add the element to the natural tab order based on its position in the HTML. Otherwise, either remove the tabIndex value or use a -negative value to remove the element from the tab order.

    +

    If you need to make an element focusable that isn’t by default (like a <div> or <span>), you can use +tabIndex="0". This will add the element to the natural tab order based on its position in the HTML. Otherwise, either remove the +tabIndex value or use tabIndex="-1" to remove the element from the tab order.

    Code examples

    Noncompliant code example

    diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6841.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6841.json
    index 5721c50bf97..b3fbe86a79c 100644
    --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6841.json
    +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6841.json
    @@ -1,5 +1,5 @@
     {
    -  "title": "\"tabIndex\" values should be non-positive",
    +  "title": "\"tabIndex\" values should be 0 or -1",
       "type": "CODE_SMELL",
       "status": "ready",
       "remediation": {
    @@ -7,7 +7,8 @@
         "constantCost": "5min"
       },
       "tags": [
    -    "accessibility"
    +    "accessibility",
    +    "react"
       ],
       "defaultSeverity": "Major",
       "ruleSpecification": "RSPEC-6841",
    diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6844.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6844.html
    index 29f922294f7..bc8256f9d70 100644
    --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6844.html
    +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6844.html
    @@ -34,6 +34,7 @@ 

    Noncompliant code example

    Compliant solution

     <button onClick={foo}>Perform action</button>
    +<a href="#section" onClick={foo} />
     

    Resources

    Documentation

    diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6844.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6844.json index 1379f7883b8..6318e3bcbc0 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6844.json +++ b/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" }, diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6845.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6845.html index a83d561e508..c5f2f0a9e0e 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6845.html +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6845.html @@ -1,41 +1,28 @@ +

    Navigation using the Tab key should be restricted to elements on the page that users can interact with.

    Why is this an issue?

    -

    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.

    -

    The aria-activedescendant 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.

    -

    This rule checks that DOM elements with the aria-activedescendant property either have an inherent tabIndex or declare one.

    -

    How to fix it in JSX

    -

    Make sure that DOM elements with the aria-activedescendant property have a tabIndex property, or use an element with an -inherent one.

    +

    The misuse of the tabIndex attribute can lead to several issues:

    +
      +
    • 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.
    • +
    • 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.
    • +
    • Increased Tab Ring Size: It unnecessarily increases the size of the page’s tab ring, making navigation more cumbersome.
    • +
    +

    How to fix it

    +

    Simply remove the tabIndex attribute or set it to "-1" to fix the issue.

    Code examples

    Noncompliant code example

    -<div aria-activedescendant={descendantId}>
    -  {content}
    -</div>
    +<div tabIndex="0" />
     

    Compliant solution

    -<div aria-activedescendant={descendantId} tabIndex={0}>
    -  {content}
    -</div>
    +<div />
     

    Resources

    Documentation

    -

    Standards

    - diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6845.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6845.json index b0499ad70de..80d51df5d3c 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6845.json +++ b/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": { diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6846.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6846.html index 220275f2ace..26c8e7ee569 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6846.html +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6846.html @@ -19,13 +19,13 @@

    Why is this an issue?

  • Unlike the Windows environment that highlights keyboard shortcuts in menus, web pages or applications lack a standardized method to notify users about available accesskey shortcuts.
  • -

    Given these concerns, it is generally recommended to avoid using `accesskey`s.

    +

    Given these concerns, it is generally recommended to avoid using accesskeys.

     function div() {
         return <div accessKey="h" />;
     }
     
    -

    Do not use `accesskey`s at all.

    +

    Do not use accesskeys at all.

     function div() {
         return <div />;
    diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6848.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6848.html
    index 00ee788eb5f..49a329e9b92 100644
    --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6848.html
    +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6848.html
    @@ -19,9 +19,8 @@ 

    Why is this an issue?

    How to fix it

    The simplest and most recommended way is to replace the non-interactive elements with interactive ones. If for some reason you can’t replace the non-interactive element, you can add an interactive role attribute to it and manually manage its keyboard event handlers and focus. -Common interactive roles include -button,link,checkbox,menuitem,menuitemcheckbox,menuitemradio,option,radio,searchbox,switch, -and textbox.

    +Common interactive roles include button, link, checkbox, menuitem, menuitemcheckbox, +menuitemradio, option, radio, searchbox, switch, and textbox.

    Code examples

    Noncompliant code example

    diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6848.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6848.json
    index 602fa7bac16..d7e0f564548 100644
    --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6848.json
    +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6848.json
    @@ -10,11 +10,11 @@
         "accessibility",
         "react"
       ],
    -  "defaultSeverity": "Major",
    +  "defaultSeverity": "Minor",
       "ruleSpecification": "RSPEC-6848",
       "sqKey": "S6848",
       "scope": "All",
    -  "quickfix": "unknown",
    +  "quickfix": "infeasible",
       "code": {
         "impacts": {
           "MAINTAINABILITY": "LOW",
    diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6849.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6849.html
    index 29f922294f7..5a733c20e05 100644
    --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6849.html
    +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6849.html
    @@ -1,46 +1,21 @@
    -

    The <a> tag in HTML is designed to create hyperlinks, which can link to different sections of the same page, different pages, or -even different websites. However, sometimes developers misuse <a> tags as buttons, which can lead to accessibility issues and -unexpected behavior.

    -

    This rule checks that <a> tags are used correctly as hyperlinks and not misused as buttons. It verifies that each -<a> tag has a href attribute, which is necessary for it to function as a hyperlink. If an <a> tag -is used without a href attribute, it behaves like a button, which is not its intended use.

    -

    Using the correct HTML elements for their intended purpose is crucial for accessibility and usability. It ensures that the website behaves as -expected and can be used by all users, including those using assistive technologies. Misusing HTML elements can lead to a poor user experience and -potential accessibility violations.

    -

    Compliance with this rule will ensure that your HTML code is semantically correct, accessible, and behaves as expected.

    +

    HTML documents should have a valid IETF’s BCP 47 lang attribute.

    Why is this an issue?

    -

    Misusing <a> tags as buttons can lead to several issues:

    -
      -
    • Accessibility: Screen readers and other assistive technologies rely on the correct use of HTML elements to interpret and interact with the - content. When <a> tags are used as buttons, it can confuse these technologies and make the website less accessible to users with - disabilities.
    • -
    • Usability: The behavior of <a> tags and buttons is different. For example, buttons can be triggered using the space bar, - while <a> tags cannot. Misusing these elements can lead to unexpected behavior and a poor user experience.
    • -
    • Semantic correctness: Each HTML element has a specific purpose and meaning. Using elements for purposes other than their intended use can make - the code harder to understand and maintain.
    • -
    • SEO implications: Search engines use the structure and semantics of HTML to understand and rank web pages. Misusing HTML elements can - negatively impact a website’s SEO.
    • -
    +

    Screen readers require a specified language to function correctly. Without it, they default to the user’s set language, causing issues for +multilingual users. Specifying a valid language ensures correct pronunciation and a less confusing experience.

    How to fix it

    -

    To fix this issue, you should use the appropriate HTML elements for their intended purposes. If you need to create a hyperlink, use the -<a> tag with a href attribute. If you need to create a button, use the <button> tag.

    +

    Add a lang attribute with a valid IETF BCP 47 value.

    Code examples

    Noncompliant code example

    -<a href="javascript:void(0)" onClick={foo}>Perform action</a>
    -<a href="#" onClick={foo}>Perform action</a>
    -<a onClick={foo}>Perform action</a>
    +<html></html>
     

    Compliant solution

    -<button onClick={foo}>Perform action</button>
    +<html lang="en"></html>
     

    Resources

    Documentation

    diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6851.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6851.html index 580126bccad..f09335ad9e4 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6851.html +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6851.html @@ -2,15 +2,16 @@

    Why is this an issue?

    alt 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.

    -

    Screen readers announce the presence of an img element and read its alt attribute aloud to describe the image. If the -alt attribute includes words like "image", "picture", or "photo", it leads to redundancy as the screen reader would repeat "image". For -instance, an alt attribute like "image of a sunrise" would be read as "Image, image of a sunrise", unnecessarily repeating "image".

    +

    Screen readers announce the presence of an <img> element and read its alt attribute aloud to describe the image. If +the alt attribute includes words like "image", "picture", or "photo", it leads to redundancy as the screen reader would repeat "image". +For instance, an alt attribute like "image of a sunrise" would be read as "Image, image of a sunrise", unnecessarily repeating +"image".

    Instead, the alt 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.

    How to fix it

    -

    To fix this issue, you should revise the alt attribute of your img 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 +

    To fix this issue, you should revise the alt attribute of your <img> 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.

    Code examples

    Noncompliant code example

    diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6851.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6851.json index 9334cb9ffaa..7d2ee285f07 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6851.json +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6851.json @@ -10,7 +10,7 @@ "accessibility", "react" ], - "defaultSeverity": "Major", + "defaultSeverity": "Minor", "ruleSpecification": "RSPEC-6851", "sqKey": "S6851", "scope": "All", diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6852.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6852.html index af80d733ab1..687763faa0a 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6852.html +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6852.html @@ -2,12 +2,11 @@ interact effectively with the website. Without this, some users may be unable to access certain features, leading to a poor user experience and potential non-compliance with accessibility standards.

    Why is this an issue?

    -
    -Lack of focusability can hinder navigation and interaction with the website, resulting in an exclusionary user experience and possible violation of accessibility guidelines.
    -
    +

    Lack of focusability can hinder navigation and interaction with the website, resulting in an exclusionary user experience and possible violation of +accessibility guidelines.

    How to fix it

    -

    To fix this, ensure that all interactive elements on your website can receive focus. This can be achieved by using standard HTML interactive -elements, or by assigning a tabindex of "0" to custom interactive components.

    +

    Ensure that all interactive elements on your website can receive focus. This can be achieved by using standard HTML interactive elements, or by +assigning a tabindex attribute of "0" to custom interactive components.

    Code examples

    Noncompliant code example

    @@ -19,15 +18,17 @@ 

    Noncompliant code example

    Compliant solution

    -<span onClick="doSomething();" tabIndex="0" role="button">Element with mouse handler has tabIndex</span>
    +<!-- Element with mouse handler has tabIndex -->
    +<span onClick="doSomething();" tabIndex="0" role="button">Submit</span>
     
    -<a href="javascript:void(0);" onClick="doSomething();">Focusable anchor with mouse handler</a>
    +<!-- Focusable anchor with mouse handler -->
    +<a href="javascript:void(0);" onClick="doSomething();"> Next page </a>
     

    Resources

    Documentation

    diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6852.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6852.json index 637a275b915..2aa56048a36 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6852.json +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6852.json @@ -1,5 +1,5 @@ { - "title": "Elements with interactive role should support focus", + "title": "Elements with an interactive role should support focus", "type": "CODE_SMELL", "status": "ready", "remediation": { @@ -10,7 +10,7 @@ "accessibility", "react" ], - "defaultSeverity": "Major", + "defaultSeverity": "Minor", "ruleSpecification": "RSPEC-6852", "sqKey": "S6852", "scope": "All", diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6855.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6855.json index 9d4c2ab39e5..0e79af60ba4 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6855.json +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6855.json @@ -10,7 +10,7 @@ "accessibility", "react" ], - "defaultSeverity": "Major", + "defaultSeverity": "Minor", "ruleSpecification": "RSPEC-6855", "sqKey": "S6855", "scope": "All", diff --git a/sonarpedia.json b/sonarpedia.json index 72d19db5d6f..49ad2705b3d 100644 --- a/sonarpedia.json +++ b/sonarpedia.json @@ -3,7 +3,7 @@ "languages": [ "JS" ], - "latest-update": "2023-11-01T10:43:12.460400100Z", + "latest-update": "2023-11-22T14:26:39.901476Z", "options": { "no-language-in-filenames": true, "preserve-filenames": true