Create rule S6854 (jsx-a11y/iframe-has-title): iFrames must have a title

its/ruling/src/test/expected/jsts/console/typescript-S6854.json

@@ -0,0 +1,5 @@
+{
+"console:src/views/CLIAuthView/CLIAuthSuccessInitView/Left.tsx": [
+70
+]
+}

its/ruling/src/test/expected/jsts/courselit/javascript-S6854.json

@@ -0,0 +1,5 @@
+{
+"courselit:packages/rich-text/src/Decorators/YouTube.js": [
+52
+]
+}

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

@@ -0,0 +1,5 @@
+{
+"courselit:apps/web/components/public/lesson-viewer.tsx": [
+214
+]
+}

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

@@ -0,0 +1,5 @@
+{
+"desktop:app/src/ui/lib/sandboxed-markdown.tsx": [
+369
+]
+}

its/ruling/src/test/expected/jsts/searchkit/javascript-S6854.json

@@ -0,0 +1,5 @@
+{
+"searchkit:docs/src/pages/index.js": [
+398
+]
+}

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

@@ -195,6 +195,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
       HtmlHasLangCheck.class,
       IdenticalExpressionOnBinaryOperatorCheck.class,
       IdenticalFunctionsCheck.class,
+      IframeHasTitleCheck.class,
       IgnoredReturnCheck.class,
       ImgRedundantAltCheck.class,
       ImmediatelyReturnedVariableCheck.class,
@@ -205,8 +206,8 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
       IndexOfCompareToPositiveNumberCheck.class,
       InsecureCookieCheck.class,
       InsecureJwtTokenCheck.class,
-      InteractiveElementsShouldBeFocusableCheck.class,
       InstanceofInMisuseCheck.class,
+      InteractiveElementsShouldBeFocusableCheck.class,
       IntrusivePermissionsCheck.class,
       InvariantReturnCheck.class,
       InvertedAssertionArgumentsCheck.class,
@@ -299,9 +300,9 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
       NoNestedSwitchCheck.class,
       NoNestedTemplateLiteralsCheck.class,
       NoNewNativeNonconstructorCheck.class,
+      NoNonInteractiveElementsWithHandlersCheck.class,
       NoNonNullAssertionCheck.class,
       NoNoninteractiveElementToInteractiveRoleCheck.class,
-      NoNonInteractiveElementsWithHandlersCheck.class,
       NoNoninteractiveTabindexCheck.class,
       NoOctalEscapeCheck.class,
       NoOneIterationLoopCheck.class,

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

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

@@ -0,0 +1,34 @@
+<h2>Why is this an issue?</h2>
+<p>An iframe, or inline frame, is an HTML document embedded inside another HTML document on a website. The iframe HTML element is often used to insert
+content from another source, such as an advertisement, into a web page.</p>
+<p>In the context of web accessibility, <code>&lt;iframe&gt;</code>'s should have a <code>title</code> attribute. This is because screen readers for
+the visually impaired use this title to help users understand the content of the iframe.</p>
+<p>Without a title, it can be difficult for these users to understand the context or purpose of the iframe’s content.</p>
+<h2>How to fix it</h2>
+<p>To fix missing iframe titles, you simply need to add a <code>title</code> attribute to your <code>&lt;iframe&gt;</code> element. The value of this
+attribute should be a brief description of the iframe’s content.</p>
+<h3>Code examples</h3>
+<h4>Noncompliant code example</h4>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+function iframe() {
+    return (
+        &lt;iframe src="https://openweathermap.org"&gt;&lt;/iframe&gt; // Noncompliant
+    );
+}
+</pre>
+<h4>Compliant solution</h4>
+<pre data-diff-id="1" data-diff-type="compliant">
+function iframe() {
+    return (
+        &lt;iframe src="https://openweathermap.org" title="Weather forecasts, nowcasts and history"&gt;&lt;/iframe&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/iframe">iframe element</a> </li>
+  <li> WCAG - <a href="https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks">Bypass Blocks</a> </li>
+  <li> WCAG - <a href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value">Name, Role, Value</a> </li>
+</ul>
+

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

@@ -0,0 +1,28 @@
+{
+  "title": "iFrames must have a title",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility",
+    "react"
+  ],
+  "defaultSeverity": "Minor",
+  "ruleSpecification": "RSPEC-6854",
+  "sqKey": "S6854",
+  "scope": "All",
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "RELIABILITY": "LOW"
+    },
+    "attribute": "CONVENTIONAL"
+  },
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}

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

@@ -320,6 +320,7 @@
     "S6849",
     "S6850",
     "S6851",
-    "S6852"
+    "S6852",
+    "S6854"
   ]
 }