diff --git a/its/ruling/src/test/expected/jsts/desktop/typescript-S6811.json b/its/ruling/src/test/expected/jsts/desktop/typescript-S6811.json new file mode 100644 index 0000000000..d7bee5fcf4 --- /dev/null +++ b/its/ruling/src/test/expected/jsts/desktop/typescript-S6811.json @@ -0,0 +1,5 @@ +{ +"desktop:app/src/ui/changes/changes-list.tsx": [ +851 +] +} diff --git a/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/CheckList.java b/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/CheckList.java index 6ae94da4fe..7d5cddd515 100644 --- a/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/CheckList.java +++ b/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/CheckList.java @@ -372,6 +372,7 @@ public static List> getAllChecks() { ReturnInSetterCheck.class, ReturnOfBooleanExpressionCheck.class, RoleHasRequiredAriaPropsCheck.class, + RoleSupportsAriaPropsCheck.class, RulesOfHooksCheck.class, SameLineConditionalCheck.class, SelfAssignmentCheck.class, diff --git a/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/RoleSupportsAriaPropsCheck.java b/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/RoleSupportsAriaPropsCheck.java new file mode 100644 index 0000000000..d590350ed5 --- /dev/null +++ b/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/RoleSupportsAriaPropsCheck.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; + +@TypeScriptRule +@JavaScriptRule +@Rule(key = "S6811") +public class RoleSupportsAriaPropsCheck implements EslintBasedCheck { + + @Override + public String eslintKey() { + return "role-supports-aria-props"; + } +} diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6811.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6811.html new file mode 100644 index 0000000000..a7f29b54ed --- /dev/null +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6811.html @@ -0,0 +1,31 @@ +

Why is this an issue?

+

ARIA properties, also known as "aria-* properties", are special attributes used in HTML to enhance the accessibility of web elements. They provide +additional semantics to help assistive technologies, like screen readers, interpret the element.

+

Roles, on the other hand, define what an element is or does in the context of a web page. Some elements have explicit roles, which are directly +defined by the developer. For example, a div element might be given a role of "button". Other elements have implicit roles, which are inferred based +on the type of the element. For example, an anchor tag <a href="#" /> has an implicit role of "link".

+

This rule ensures that the ARIA properties used on an element are ones that are supported by the role of that element. For instance, the ARIA +property aria-required is not supported by the role link. Therefore, using aria-required on an anchor tag would +violate this rule.

+

How to fix it in JSX

+

Check the spelling of the aria-* attributes and verify that they are actually supported by the element role.

+
+<div role="checkbox" aria-chekd={isChecked}>Unchecked</div> {/* Noncompliant: aria-chekd is not supported */}
+
+

To fix the code remove non-compatible attributes or replace them with the correct ones.

+
+<div role="checkbox" aria-checked={isChecked}>Unchecked</div>
+
+

Resources

+

Documentation

+ +

Standards

+ + diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6811.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6811.json new file mode 100644 index 0000000000..cf05e80826 --- /dev/null +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6811.json @@ -0,0 +1,29 @@ +{ + "title": "DOM elements with ARIA role should only have supported properties", + "type": "CODE_SMELL", + "status": "ready", + "remediation": { + "func": "Constant\/Issue", + "constantCost": "5min" + }, + "tags": [ + "a11y", + "react" + ], + "defaultSeverity": "Major", + "ruleSpecification": "RSPEC-6811", + "sqKey": "S6811", + "scope": "All", + "quickfix": "infeasible", + "code": { + "impacts": { + "MAINTAINABILITY": "LOW", + "RELIABILITY": "LOW" + }, + "attribute": "CONVENTIONAL" + }, + "compatibleLanguages": [ + "JAVASCRIPT", + "TYPESCRIPT" + ] +} diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/Sonar_way_profile.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/Sonar_way_profile.json index 1a727f8b36..62ce884272 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/Sonar_way_profile.json +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/Sonar_way_profile.json @@ -291,6 +291,7 @@ "S6772", "S6774", "S6775", - "S6807" + "S6807", + "S6811" ] }