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.
<img> tag. If using CSS background-image is not possible, an empty alt="" is tolerated. See
+Exceptions below.
This rule raises an issue when:
<img> element has no alt attribute. <area> element within an image map has no alt, aria-label or aria-labelledby
attribute. <object> element has no inner text, or title, aria-label or aria-labelledby
- attribute <object> element has no inner text, title, aria-label or aria-labelledby
+ attribute. <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.
+Add an alternative text to the HTML element.
+<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
+<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 stringalt=""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
-alttext would repeat a nearby text. For example, images contained in links should not -duplicate the link’s text in theiraltattribute, 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
-window.open("https://example.com/dangerous");
+window.open("https://example.com/dangerous"); // Sensitive
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 @@
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:
+<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". autocomplete="name" would suggest that the browser autofill the user’s full name. 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.
@@ -28,5 +39,7 @@Documentation
Therefore, it’s recommended to avoid using positive tabIndex values.
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.
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:
+Simply remove the tabIndex attribute or set it to "-1" to fix the issue.
-<div aria-activedescendant={descendantId}>
- {content}
-</div>
+<div tabIndex="0" />
-<div aria-activedescendant={descendantId} tabIndex={0}>
- {content}
-</div>
+<div />
aria-activedescendant
- attribute tabIndex attribute 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:
-<a> tags are used as buttons, it can confuse these technologies and make the website less accessible to users with
- disabilities. <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. 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.
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.
-<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>
-<button onClick={foo}>Perform action</button>
+<html lang="en"></html>
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.
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.
-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.
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.
@@ -19,15 +18,17 @@Noncompliant code example
-<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>