Create rule S6850 (jsx-a11y/heading-has-content): Header elements should have accessible content

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

@@ -0,0 +1,5 @@
+{
+"ant-design:components/skeleton/Title.tsx": [
+13
+]
+}

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

@@ -188,6 +188,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
       GratuitousConditionCheck.class,
       HardcodedCredentialsCheck.class,
       HashingCheck.class,
+      HeadingHasContentCheck.class,
       HiddenFilesCheck.class,
       HookUseStateCheck.class,
       HtmlHasLangCheck.class,

sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/HeadingHasContentCheck.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 = "S6850")
+public class HeadingHasContentCheck implements EslintBasedCheck {
+
+  @Override
+  public String eslintKey() {
+    return "heading-has-content";
+  }
+}

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

@@ -0,0 +1,68 @@
+<h2>Why is this an issue?</h2>
+<p>Header elements are represented by the tags <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, with <code>&lt;h1&gt;</code> being the highest
+level and <code>&lt;h6&gt;</code> being the lowest. These elements are used to structure the content of the page and create a hierarchical outline
+that can be followed by users and search engines alike.</p>
+<p>In the context of accessibility, header elements play a crucial role. They provide a way for users, especially those using assistive technologies
+like screen readers, to navigate through the content of a webpage. By reading out the headers, screen readers can give users an overview of the
+content and allow them to jump to the section they’re interested in.</p>
+<p>If a header element is empty, it can lead to confusion as it doesn’t provide any information about the content that follows. This can make
+navigation difficult for users relying on screen readers, resulting in a poor user experience and making the website less accessible for people with
+visual impairments.</p>
+<p>Therefore, to ensure your website is accessible to all users, it’s important to always include meaningful content in your header elements.</p>
+<h2>How to fix it</h2>
+<p>Do not leave empty your header elements.</p>
+<h3>Code examples</h3>
+<h4>Noncompliant code example</h4>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+function JavaScript101() {
+    return (
+        &lt;&gt;
+            &lt;h1&gt;JavaScript Programming Guide&lt;/h1&gt;
+            &lt;p&gt;An introduction to JavaScript programming and its applications.&lt;/p&gt;
+
+            &lt;h2&gt;JavaScript Basics&lt;/h2&gt;
+            &lt;p&gt;Understanding the basic concepts in JavaScript programming.&lt;/p&gt;
+
+            &lt;h3&gt;Variables&lt;/h3&gt;
+            &lt;p&gt;Explanation of what variables are and how to declare them in JavaScript.&lt;/p&gt;
+
+            &lt;h3 aria-hidden&gt;Data Types&lt;/h3&gt; // Noncompliant
+            &lt;p&gt;Overview of the different data types in JavaScript.&lt;/p&gt;
+
+            &lt;h3 /&gt; // Noncompliant
+            &lt;p&gt;Understanding how to declare and use functions in JavaScript.&lt;/p&gt;
+        &lt;/&gt;
+    );
+}
+</pre>
+<h4>Compliant solution</h4>
+<pre data-diff-id="1" data-diff-type="compliant">
+function JavaScript101() {
+    return (
+        &lt;&gt;
+            &lt;h1&gt;JavaScript Programming Guide&lt;/h1&gt;
+            &lt;p&gt;An introduction to JavaScript programming and its applications.&lt;/p&gt;
+
+            &lt;h2&gt;JavaScript Basics&lt;/h2&gt;
+            &lt;p&gt;Understanding the basic concepts in JavaScript programming.&lt;/p&gt;
+
+            &lt;h3&gt;Variables&lt;/h3&gt;
+            &lt;p&gt;Explanation of what variables are and how to declare them in JavaScript.&lt;/p&gt;
+
+            &lt;h3&gt;Data Types&lt;/h3&gt;
+            &lt;p&gt;Overview of the different data types in JavaScript.&lt;/p&gt;
+
+            &lt;h3&gt;Functions&lt;/h3&gt;
+            &lt;p&gt;Understanding how to declare and use functions in JavaScript.&lt;/p&gt;
+        &lt;/&gt;
+    );
+}
+</pre>
+<h2>Resources</h2>
+<h3>Documentation</h3>
+<ul>
+  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements">Heading elements</a> </li>
+  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden">aria-hidden</a> </li>
+  <li> WCAG - <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Headings and Labels</a> </li>
+</ul>
+

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

@@ -0,0 +1,29 @@
+{
+  "title": "Header elements should have accessible content",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility",
+    "react"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6850",
+  "sqKey": "S6850",
+  "scope": "All",
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "LOW",
+      "RELIABILITY": "MEDIUM"
+    },
+    "attribute": "CONVENTIONAL"
+  },
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}

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

@@ -314,6 +314,7 @@
     "S6844",
     "S6845",
     "S6846",
-    "S6849"
+    "S6849",
+    "S6850"
   ]
 }