Add rule S6849 (jsx-a11y/html-has-lang) and (jsx-a11y/lang): HTML…

… elements should have a valid language property (#4387)
SonarSource · Nov 15, 2023 · fdde183 · fdde183
1 parent 2be9541
commit fdde183
Show file tree

Hide file tree

Showing 13 changed files with 222 additions and 3 deletions.
diff --git a/its/ruling/src/test/expected/jsts/file-for-rules/typescript-S1451.json b/its/ruling/src/test/expected/jsts/file-for-rules/typescript-S1451.json
@@ -10,5 +10,8 @@
 ],
 "file-for-rules:S6583.ts": [
 0
+],
+"file-for-rules:S6849.tsx": [
+0
 ]
 }
diff --git a/its/ruling/src/test/expected/jsts/file-for-rules/typescript-S6849.json b/its/ruling/src/test/expected/jsts/file-for-rules/typescript-S6849.json
@@ -0,0 +1,5 @@
+{
+"file-for-rules:S6849.tsx": [
+2
+]
+}
diff --git a/its/sources/jsts/custom/S6849.tsx b/its/sources/jsts/custom/S6849.tsx
@@ -0,0 +1,3 @@
+function html() {
+  return <html></html>;
+}
diff --git a/packages/jsts/src/rules/S6849/cb.fixture.tsx b/packages/jsts/src/rules/S6849/cb.fixture.tsx
@@ -0,0 +1,2 @@
+<html></html>; // Noncompliant {{<html> elements must have the lang prop.}}
+<html lang="yolo"></html>; // Noncompliant {{lang attribute must have a valid value.}}
diff --git a/packages/jsts/src/rules/S6849/cb.test.ts b/packages/jsts/src/rules/S6849/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/S6849/index.ts b/packages/jsts/src/rules/S6849/index.ts
@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+export { rule } from './rule';
diff --git a/packages/jsts/src/rules/S6849/rule.ts b/packages/jsts/src/rules/S6849/rule.ts
@@ -0,0 +1,44 @@
+/*
+ * 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/S6849/javascript
+
+import { Rule } from 'eslint';
+import { rules as jsxA11yRules } from 'eslint-plugin-jsx-a11y';
+import { mergeRules } from '../helpers';
+
+const langRule = jsxA11yRules['lang'];
+const htmlHasLangRule = jsxA11yRules['html-has-lang'];
+
+export const rule: Rule.RuleModule = {
+  meta: {
+    hasSuggestions: true,
+    messages: {
+      ...langRule.meta!.messages,
+      ...htmlHasLangRule.meta!.messages,
+    },
+  },
+
+  create(context: Rule.RuleContext) {
+    const langListener: Rule.RuleListener = langRule.create(context);
+    const htmlHasLangListener: Rule.RuleListener = htmlHasLangRule.create(context);
+
+    return mergeRules(langListener, htmlHasLangListener);
+  },
+};
diff --git a/packages/jsts/src/rules/index.ts b/packages/jsts/src/rules/index.ts
@@ -101,6 +101,7 @@ import { rule as S1527 } from './S1527'; // future-reserved-words
 import { rule as S3531 } from './S3531'; // generator-without-yield
 import { rule as S4790 } from './S4790'; // hashing
 import { rule as S5691 } from './S5691'; // hidden-files
+import { rule as S6849 } from './S6849'; // html-has-lang
 import { rule as S3785 } from './S3785'; // in-operator-type-error
 import { rule as S3686 } from './S3686'; // inconsistent-function-call
 import { rule as S2692 } from './S2692'; // index-of-compare-to-positive-number
@@ -110,7 +111,6 @@ import { rule as S3415 } from './S3415'; // inverted-assertion-arguments
 import { rule as S6477 } from './S6477'; // jsx-key
 import { rule as S6481 } from './S6481'; // jsx-no-constructed-context-values
 import { rule as S6749 } from './S6749'; // jsx-no-useless-fragment
-import { rule as S6788 } from './S6788'; // no-find-dom-node
 import { rule as S1439 } from './S1439'; // label-position
 import { rule as S5148 } from './S5148'; // link-with-target-blank
 import { rule as S4622 } from './S4622'; // max-union-size
@@ -144,6 +144,7 @@ import { rule as S888 } from './S888'; // no-equals-in-for-termination
 import { rule as S6426 } from './S6426'; // no-exclusive-tests
 import { rule as S6643 } from './S6643'; // no-extend-native
 import { rule as S1116 } from './S1116'; // no-extra-semi
+import { rule as S6788 } from './S6788'; // no-find-dom-node
 import { rule as S4139 } from './S4139'; // no-for-in-iterable
 import { rule as S1530 } from './S1530'; // no-function-declaration-in-block
 import { rule as S2990 } from './S2990'; // no-global-this
@@ -381,6 +382,7 @@ rules['future-reserved-words'] = S1527;
 rules['generator-without-yield'] = S3531;
 rules['hashing'] = S4790;
 rules['hidden-files'] = S5691;
+rules['html-has-lang'] = S6849;
 rules['in-operator-type-error'] = S3785;
 rules['inconsistent-function-call'] = S3686;
 rules['index-of-compare-to-positive-number'] = S2692;
@@ -390,7 +392,6 @@ rules['inverted-assertion-arguments'] = S3415;
 rules['jsx-key'] = S6477;
 rules['jsx-no-constructed-context-values'] = S6481;
 rules['jsx-no-useless-fragment'] = S6749;
-rules['no-find-dom-node'] = S6788;
 rules['label-position'] = S1439;
 rules['link-with-target-blank'] = S5148;
 rules['max-union-size'] = S4622;
@@ -424,6 +425,7 @@ rules['no-equals-in-for-termination'] = S888;
 rules['no-exclusive-tests'] = S6426;
 rules['no-extend-native'] = S6643;
 rules['no-extra-semi'] = S1116;
+rules['no-find-dom-node'] = S6788;
 rules['no-for-in-iterable'] = S4139;
 rules['no-function-declaration-in-block'] = S1530;
 rules['no-global-this'] = S2990;

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
@@ -190,6 +190,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
       HashingCheck.class,
       HiddenFilesCheck.class,
       HookUseStateCheck.class,
+      HtmlHasLangCheck.class,
       IdenticalExpressionOnBinaryOperatorCheck.class,
       IdenticalFunctionsCheck.class,
       IgnoredReturnCheck.class,

diff --git a/...-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/HtmlHasLangCheck.java b/...-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/HtmlHasLangCheck.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 = "S6849")
+public class HtmlHasLangCheck implements EslintBasedCheck {
+
+  @Override
+  public String eslintKey() {
+    return "html-has-lang";
+  }
+}
diff --git a/...avascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6849.html b/...avascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6849.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>
+
diff --git a/...avascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6849.json b/...avascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6849.json
@@ -0,0 +1,28 @@
+{
+  "title": "HTML elements should have a valid language attribute",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility",
+    "react"
+  ],
+  "defaultSeverity": "Minor",
+  "ruleSpecification": "RSPEC-6849",
+  "sqKey": "S6849",
+  "scope": "All",
+  "quickfix": "targeted",
+  "code": {
+    "impacts": {
+      "RELIABILITY": "MEDIUM"
+    },
+    "attribute": "LOGICAL"
+  },
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}
diff --git a/...ecks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/Sonar_way_profile.json b/...ecks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/Sonar_way_profile.json
@@ -313,6 +313,7 @@
     "S6843",
     "S6844",
     "S6845",
-    "S6846"
+    "S6846",
+    "S6849"
   ]
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,5 +10,8 @@ @@
     ],
     "file-for-rules:S6583.ts": [
+    ],
+    "file-for-rules:S6849.tsx": [
     ]
     }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<html></html>; // Noncompliant {{<html> elements must have the lang prop.}}
		<html lang="yolo"></html>; // Noncompliant {{lang attribute must have a valid value.}}