Create rule S6844 (jsx-a11y/anchor-is-valid): Anchor tags should not be used as buttons

its/ruling/src/test/expected/jsts/Joust/typescript-S6844.json

@@ -0,0 +1,12 @@
+{
+"Joust:ts/components/GameWidget.tsx": [
+223
+],
+"Joust:ts/components/GameWrapper.tsx": [
+64,
+87
+],
+"Joust:ts/components/Settings.tsx": [
+22
+]
+}

its/ruling/src/test/expected/jsts/ant-design/javascript-S6844.json

@@ -0,0 +1,26 @@
+{
+"ant-design:components/breadcrumb/__tests__/router.test.js": [
+56,
+57
+],
+"ant-design:components/comment/__tests__/index.test.js": [
+15
+],
+"ant-design:components/drawer/__tests__/DrawerEvent.test.js": [
+119
+],
+"ant-design:components/dropdown/__tests__/index.test.js": [
+125
+],
+"ant-design:components/list/__tests__/Item.test.js": [
+103,
+125
+],
+"ant-design:components/locale-provider/__tests__/config.test.js": [
+31,
+34
+],
+"ant-design:components/locale-provider/__tests__/index.test.js": [
+186
+]
+}

its/ruling/src/test/expected/jsts/ant-design/typescript-S6844.json

@@ -0,0 +1,19 @@
+{
+"ant-design:components/badge/__tests__/index.test.tsx": [
+14,
+107,
+142,
+145,
+148
+],
+"ant-design:components/modal/__tests__/Modal.test.tsx": [
+39
+],
+"ant-design:components/pagination/Pagination.tsx": [
+62,
+71
+],
+"ant-design:components/typography/Base/index.tsx": [
+371
+]
+}

its/ruling/src/test/expected/jsts/courselit/typescript-S6844.json

@@ -0,0 +1,14 @@
+{
+"courselit:apps/web/components/admin/courses/course-editor/index.tsx": [
+562
+],
+"courselit:apps/web/components/public/article.tsx": [
+117
+],
+"courselit:apps/web/pages/profile/[id].tsx": [
+216
+],
+"courselit:packages/components-library/src/course-item.tsx": [
+61
+]
+}

its/ruling/src/test/expected/jsts/desktop/typescript-S6844.json

@@ -0,0 +1,11 @@
+{
+"desktop:app/src/ui/banners/banner.tsx": [
+32
+],
+"desktop:app/src/ui/dialog/header.tsx": [
+67
+],
+"desktop:app/src/ui/history/commit-summary.tsx": [
+222
+]
+}

its/ruling/src/test/expected/jsts/react-cloud-music/javascript-S6844.json

@@ -0,0 +1,6 @@
+{
+"react-cloud-music:src/application/User/Login/LoginForm/index.jsx": [
+40,
+41
+]
+}

its/ruling/src/test/expected/jsts/redux/javascript-S6844.json

@@ -0,0 +1,14 @@
+{
+"redux:examples/async/containers/App.js": [
+53
+],
+"redux:examples/real-world/containers/App.js": [
+33
+],
+"redux:examples/todomvc/components/Footer.js": [
+28
+],
+"redux:examples/todos-with-undo/components/Footer.js": [
+10
+]
+}

its/ruling/src/test/expected/jsts/sonar-web/javascript-S6844.json

@@ -0,0 +1,67 @@
+{
+"sonar-web:src/main/js/apps/background-tasks/stats.js": [
+40,
+62
+],
+"sonar-web:src/main/js/apps/background-tasks/tasks.js": [
+88
+],
+"sonar-web:src/main/js/apps/global-permissions/permission-groups.js": [
+10
+],
+"sonar-web:src/main/js/apps/global-permissions/permission-users.js": [
+10
+],
+"sonar-web:src/main/js/apps/overview/main/components.js": [
+27
+],
+"sonar-web:src/main/js/apps/permission-templates/permission-template-set-defaults.js": [
+26,
+38
+],
+"sonar-web:src/main/js/apps/permission-templates/permission-template.js": [
+77,
+85
+],
+"sonar-web:src/main/js/apps/project-permissions/permissions-footer.js": [
+17
+],
+"sonar-web:src/main/js/apps/project-permissions/project.js": [
+54,
+62
+],
+"sonar-web:src/main/js/components/shared/checkbox.js": [
+35
+],
+"sonar-web:src/main/js/components/shared/favorite.js": [
+45
+],
+"sonar-web:src/main/js/components/shared/list-footer.js": [
+31
+],
+"sonar-web:src/main/js/main/nav/component/component-nav-menu.js": [
+57,
+175
+],
+"sonar-web:src/main/js/main/nav/global/global-nav-menu.js": [
+36,
+127
+],
+"sonar-web:src/main/js/main/nav/global/global-nav-search.js": [
+77
+],
+"sonar-web:src/main/js/main/nav/global/global-nav-user.js": [
+9,
+18,
+28
+],
+"sonar-web:src/main/js/main/nav/global/global-nav.js": [
+45
+],
+"sonar-web:src/main/js/main/nav/settings/settings-nav.js": [
+20,
+32,
+45,
+55
+]
+}

sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/AnchorIsValidCheck.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;
+
+@JavaScriptRule
+@TypeScriptRule
+@Rule(key = "S6844")
+public class AnchorIsValidCheck implements EslintBasedCheck {
+
+  @Override
+  public String eslintKey() {
+    return "anchor-is-valid";
+  }
+}

sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/CheckList.java

@@ -61,6 +61,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
       AlphabeticalSortCheck.class,
       AlwaysUseCurlyBracesCheck.class,
       AnchorHasContentCheck.class,
+      AnchorIsValidCheck.class,
       AnchorPrecedenceCheck.class,
       AngleBracketTypeAssertionCheck.class,
       ArgumentTypesCheck.class,

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

@@ -0,0 +1,46 @@
+<p>The <code>&lt;a&gt;</code> 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 <code>&lt;a&gt;</code> tags as buttons, which can lead to accessibility issues and
+unexpected behavior.</p>
+<p>This rule checks that <code>&lt;a&gt;</code> tags are used correctly as hyperlinks and not misused as buttons. It verifies that each
+<code>&lt;a&gt;</code> tag has a <code>href</code> attribute, which is necessary for it to function as a hyperlink. If an <code>&lt;a&gt;</code> tag
+is used without a <code>href</code> attribute, it behaves like a button, which is not its intended use.</p>
+<p>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.</p>
+<p>Compliance with this rule will ensure that your HTML code is semantically correct, accessible, and behaves as expected.</p>
+<h2>Why is this an issue?</h2>
+<p>Misusing <code>&lt;a&gt;</code> tags as buttons can lead to several issues:</p>
+<ul>
+  <li> Accessibility: Screen readers and other assistive technologies rely on the correct use of HTML elements to interpret and interact with the
+  content. When <code>&lt;a&gt;</code> tags are used as buttons, it can confuse these technologies and make the website less accessible to users with
+  disabilities. </li>
+  <li> Usability: The behavior of <code>&lt;a&gt;</code> tags and buttons is different. For example, buttons can be triggered using the space bar,
+  while <code>&lt;a&gt;</code> tags cannot. Misusing these elements can lead to unexpected behavior and a poor user experience. </li>
+  <li> 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. </li>
+  <li> 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. </li>
+</ul>
+<h2>How to fix it</h2>
+<p>To fix this issue, you should use the appropriate HTML elements for their intended purposes. If you need to create a hyperlink, use the
+<code>&lt;a&gt;</code> tag with a <code>href</code> attribute. If you need to create a button, use the <code>&lt;button&gt;</code> tag.</p>
+<h3>Code examples</h3>
+<h4>Noncompliant code example</h4>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+&lt;a href="javascript:void(0)" onClick={foo}&gt;Perform action&lt;/a&gt;
+&lt;a href="#" onClick={foo}&gt;Perform action&lt;/a&gt;
+&lt;a onClick={foo}&gt;Perform action&lt;/a&gt;
+</pre>
+<h4>Compliant solution</h4>
+<pre data-diff-id="1" data-diff-type="compliant">
+&lt;button onClick={foo}&gt;Perform action&lt;/button&gt;
+</pre>
+<h2>Resources</h2>
+<h3>Documentation</h3>
+<ul>
+  <li> WebAIM - <a href="https://webaim.org/techniques/hypertext/">Introduction to Links and Hypertext</a> </li>
+  <li> <a href="https://marcysutton.com/links-vs-buttons-in-modern-web-applications/">Links vs. Buttons in Modern Web Applications</a> </li>
+  <li> <a
+  href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-is-valid.md#jsx-a11yanchor-is-valid:~:text=Using%20ARIA%20%2D%20Notes%20on%20ARIA%20use%20in%20HTML">Using ARIA - Notes on ARIA use in HTML</a> </li>
+</ul>
+

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

@@ -0,0 +1,30 @@
+{
+  "title": "Anchor tags should not be used as buttons",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility",
+    "react"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6844",
+  "sqKey": "S6844",
+  "scope": "All",
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "HIGH",
+      "RELIABILITY": "MEDIUM",
+      "SECURITY": "LOW"
+    },
+    "attribute": "CONVENTIONAL"
+  },
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}

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

@@ -310,6 +310,7 @@
     "S6840",
     "S6841",
     "S6842",
-    "S6843"
+    "S6843",
+    "S6844"
   ]
 }