diff --git a/its/ruling/src/test/expected/jsts/ant-design/javascript-S6827.json b/its/ruling/src/test/expected/jsts/ant-design/javascript-S6827.json new file mode 100644 index 00000000000..ba590fdb4a4 --- /dev/null +++ b/its/ruling/src/test/expected/jsts/ant-design/javascript-S6827.json @@ -0,0 +1,5 @@ +{ +"ant-design:components/dropdown/__tests__/index.test.js": [ +125 +] +} diff --git a/its/ruling/src/test/expected/jsts/ant-design/typescript-S6827.json b/its/ruling/src/test/expected/jsts/ant-design/typescript-S6827.json new file mode 100644 index 00000000000..3b0a09983a3 --- /dev/null +++ b/its/ruling/src/test/expected/jsts/ant-design/typescript-S6827.json @@ -0,0 +1,7 @@ +{ +"ant-design:components/badge/__tests__/index.test.tsx": [ +142, +145, +148 +] +} diff --git a/its/ruling/src/test/expected/jsts/sonar-web/javascript-S6827.json b/its/ruling/src/test/expected/jsts/sonar-web/javascript-S6827.json new file mode 100644 index 00000000000..0759b7926cc --- /dev/null +++ b/its/ruling/src/test/expected/jsts/sonar-web/javascript-S6827.json @@ -0,0 +1,5 @@ +{ +"sonar-web:src/main/js/components/shared/checkbox.js": [ +35 +] +} diff --git a/package-lock.json b/package-lock.json index 931ce738566..eb972768d10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -65,6 +65,7 @@ "express": "4.18.2", "functional-red-black-tree": "1.0.1", "htmlparser2": "9.0.0", + "jsx-ast-utils": "^3.3.5", "lodash.clone": "4.5.0", "module-alias": "2.2.3", "postcss-html": "0.36.0", @@ -8828,8 +8829,9 @@ }, "node_modules/jsx-ast-utils": { "version": "3.3.5", + "resolved": "https://repox.jfrog.io/repox/api/npm/npm/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", + "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==", "inBundle": true, - "license": "MIT", "dependencies": { "array-includes": "^3.1.6", "array.prototype.flat": "^1.3.1", @@ -17561,6 +17563,8 @@ }, "jsx-ast-utils": { "version": "3.3.5", + "resolved": "https://repox.jfrog.io/repox/api/npm/npm/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", + "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==", "requires": { "array-includes": "^3.1.6", "array.prototype.flat": "^1.3.1", diff --git a/package.json b/package.json index 76325d5ff62..1867092919c 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "express": "4.18.2", "functional-red-black-tree": "1.0.1", "htmlparser2": "9.0.0", + "jsx-ast-utils": "3.3.5", "lodash.clone": "4.5.0", "module-alias": "2.2.3", "postcss-html": "0.36.0", @@ -124,6 +125,7 @@ "express", "functional-red-black-tree", "htmlparser2", + "jsx-ast-utils", "lodash.clone", "module-alias", "postcss-html", diff --git a/packages/jsts/src/rules/S6827/cb.fixture.jsx b/packages/jsts/src/rules/S6827/cb.fixture.jsx new file mode 100644 index 00000000000..a0112300199 --- /dev/null +++ b/packages/jsts/src/rules/S6827/cb.fixture.jsx @@ -0,0 +1,3 @@ + +; +; // Noncompliant diff --git a/packages/jsts/src/rules/S6827/cb.test.ts b/packages/jsts/src/rules/S6827/cb.test.ts new file mode 100644 index 00000000000..e6f8f7cbf08 --- /dev/null +++ b/packages/jsts/src/rules/S6827/cb.test.ts @@ -0,0 +1,28 @@ +/* + * 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. + */ +import { check } from '../tools'; +import { rule } from '.'; +import path from 'path'; + +const sonarId = path.basename(__dirname); + +describe(`Rule ${sonarId}`, () => { + check(sonarId, rule, __dirname); +}); diff --git a/packages/jsts/src/rules/S6827/decorator.ts b/packages/jsts/src/rules/S6827/decorator.ts new file mode 100644 index 00000000000..a15ef5e25ae --- /dev/null +++ b/packages/jsts/src/rules/S6827/decorator.ts @@ -0,0 +1,45 @@ +/* + * 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. + */ +import { Rule } from 'eslint'; +import { interceptReport } from '../helpers'; +import { hasAnyProp } from 'jsx-ast-utils'; +import { TSESTree } from '@typescript-eslint/experimental-utils'; + +/** + * This fix was introduced in eslint-plugin-jsx-a11y e6bfd5cb7c, + * but the last release is almost a year old, so it doesn't include this. + * When we update the dependency, we can remove this decorator. + * + * This will include the removal of: + * - the `jsx-ast-utils` dependency + * - its type definition `typings/jsx-ast-utils/index.d.ts` + * - all files in the `rules/S6827/` directory + */ +export function decorate(rule: Rule.RuleModule): Rule.RuleModule { + rule.meta!.hasSuggestions = true; + return interceptReport(rule, (context, reportDescriptor) => { + const node = (reportDescriptor as any).node as TSESTree.JSXOpeningElement; + + if (hasAnyProp(node.attributes, ['title', 'aria-label'])) { + return; + } + context.report({ ...reportDescriptor }); + }); +} diff --git a/packages/jsts/src/rules/S6827/index.ts b/packages/jsts/src/rules/S6827/index.ts new file mode 100644 index 00000000000..06cfd8ed074 --- /dev/null +++ b/packages/jsts/src/rules/S6827/index.ts @@ -0,0 +1,25 @@ +/* + * 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. + */ +// https://sonarsource.github.io/rspec/#/rspec/S6727/javascript + +import { rules as jsxA11yRules } from 'eslint-plugin-jsx-a11y'; +import { decorate } from './decorator'; + +export const rule = decorate(jsxA11yRules['anchor-has-content']); diff --git a/packages/jsts/src/rules/index.ts b/packages/jsts/src/rules/index.ts index ee687c914b6..f6288b931f5 100644 --- a/packages/jsts/src/rules/index.ts +++ b/packages/jsts/src/rules/index.ts @@ -20,6 +20,7 @@ import { Rule } from 'eslint'; import { rule as S2376 } from './S2376'; // accessor-pairs +import { rule as S6827 } from './S6827'; // anchor-has-content import { rule as S5850 } from './S5850'; // anchor-precedence import { rule as S3782 } from './S3782'; // argument-type import { rule as S2234 } from './S2234'; // arguments-order @@ -294,6 +295,7 @@ import { rule as S4817 } from './S4817'; // xpath const rules: { [key: string]: Rule.RuleModule } = {}; rules['accessor-pairs'] = S2376; +rules['anchor-has-content'] = S6827; rules['anchor-precedence'] = S5850; rules['argument-type'] = S3782; rules['arguments-order'] = S2234; diff --git a/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/AnchorHasContentCheck.java b/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/AnchorHasContentCheck.java new file mode 100644 index 00000000000..1e6db957b81 --- /dev/null +++ b/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/AnchorHasContentCheck.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 = "S6827") +public class AnchorHasContentCheck implements EslintBasedCheck { + + @Override + public String eslintKey() { + return "anchor-has-content"; + } +} 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 6615756d190..25860fb018b 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 @@ -60,6 +60,7 @@ public static List> getAllChecks() { AlertUseCheck.class, AlphabeticalSortCheck.class, AlwaysUseCurlyBracesCheck.class, + AnchorHasContentCheck.class, AnchorPrecedenceCheck.class, AngleBracketTypeAssertionCheck.class, ArgumentTypesCheck.class, diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6827.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6827.html new file mode 100644 index 00000000000..35a5a50e684 --- /dev/null +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6827.html @@ -0,0 +1,33 @@ +

Why is this an issue?

+

ARIA (Accessible Rich Internet Applications) is a set of attributes that define ways to make web content and web applications more accessible to +people with disabilities. The 'aria-hidden' attribute is used to indicate that an element and all of its descendants are not visible or perceivable to +any user as implemented by assistive technologies.

+

However, when 'aria-hidden' is used on a focusable element, it can create a confusing and inaccessible experience for screen reader users. This is +because the element will still be included in the tab order, so a screen reader user can navigate to it, but it will not be announced by the screen +reader due to the 'aria-hidden' attribute.

+

This rule ensures that focusable elements are not hidden from screen readers using the 'aria-hidden' attribute.

+

How to fix it

+

Check if the element is focusable. Focusable elements should not have 'aria-hidden' attribute.

+

Code examples

+

Noncompliant code example

+
+<button aria-hidden="true">Click me</button>
+
+

Remove 'aria-hidden' attribute.

+

Compliant solution

+
+<button>Click me</button>
+
+

Resources

+

Documentation

+ +

Standards

+ + diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6827.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6827.json new file mode 100644 index 00000000000..f2d80f5cf68 --- /dev/null +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6827.json @@ -0,0 +1,30 @@ +{ + "title": "Anchors should contain accessible content", + "type": "CODE_SMELL", + "status": "ready", + "remediation": { + "func": "Constant\/Issue", + "constantCost": "5min" + }, + "tags": [ + "react", + "accessibility" + ], + "defaultSeverity": "Minor", + "ruleSpecification": "RSPEC-6827", + "sqKey": "S6827", + "scope": "All", + "defaultQualityProfiles": ["Sonar way"], + "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 69a681f8421..45ead7c2f7c 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 @@ -299,6 +299,7 @@ "S6822", "S6823", "S6824", - "S6825" + "S6825", + "S6827" ] } diff --git a/typings/jsx-ast-utils/index.d.ts b/typings/jsx-ast-utils/index.d.ts new file mode 100644 index 00000000000..8d5a9e17382 --- /dev/null +++ b/typings/jsx-ast-utils/index.d.ts @@ -0,0 +1,3 @@ +declare module 'jsx-ast-utils' { + export const hasAnyProp: (any, any) => boolean; +}