Create rule S6855 (jsx-a11y/media-has-caption): Media elements should have captions

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

@@ -0,0 +1,5 @@
+{
+"courselit:packages/rich-text/src/Renderers/Media.js": [
+17
+]
+}

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

@@ -0,0 +1,10 @@
+{
+"courselit:apps/web/components/admin/media/media-preview.tsx": [
+168,
+178
+],
+"courselit:apps/web/components/public/lesson-viewer.tsx": [
+164,
+189
+]
+}

its/ruling/src/test/expected/jsts/moose/typescript-S6855.json

@@ -0,0 +1,8 @@
+{
+"moose:renderer/components/MiniPlayer/MiniPlayer.tsx": [
+40
+],
+"moose:renderer/components/Player/Player.tsx": [
+122
+]
+}

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

@@ -0,0 +1,5 @@
+{
+"react-cloud-music:src/application/Player/index.jsx": [
+275
+]
+}

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

@@ -229,6 +229,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
  MaxParameterCheck.class,
  MaxSwitchCasesCheck.class,
  MaxUnionSizeCheck.class,
+ MediaHasCaptionCheck.class,
  MisorderedParameterListCheck.class,
  MissingNewlineAtEndOfFileCheck.class,
  MissingTrailingCommaCheck.class,

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

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

@@ -0,0 +1,33 @@
+<h2>Why is this an issue?</h2>
+<p>Captions in HTML media elements are text versions of the audio content, synchronized with the video. They are essential for individuals who are
+deaf or hard of hearing, as they provide a text alternative for the audio information. They can also be beneficial for individuals who are not native
+speakers of the language of the video, or for situations where the audio cannot be heard.</p>
+<p>In the context of accessibility, providing captions for media elements is a requirement under the Web Content Accessibility Guidelines (WCAG).
+Without captions, you are excluding a portion of your audience who rely on them to understand the content of your media.</p>
+<h2>How to fix it</h2>
+<p>If captions are missing from your media elements, you can fix this by adding a <code>&lt;track&gt;</code> element with the
+<code>kind="captions"</code> attribute inside your <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code> element. However, for video elements that
+have the <code>muted</code> attribute, captions are not required.</p>
+<h3>Code examples</h3>
+<h4>Noncompliant code example</h4>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+&lt;audio {...props} /&gt;; // Noncompliant
+&lt;video {...props} /&gt;; // Noncompliant
+</pre>
+<h4>Compliant solution</h4>
+<pre data-diff-id="1" data-diff-type="compliant">
+&lt;audio&gt;&lt;track kind="captions" {...props} /&gt;&lt;/audio&gt;
+&lt;video&gt;&lt;track kind="captions" {...props} /&gt;&lt;/video&gt;
+&lt;video muted {...props} &gt;&lt;/video&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/audio">audio element</a> </li>
+ <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video">video element</a> </li>
+ <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track">track element</a> </li>
+ <li> WCAG - <a href="https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded.html">Captions</a> </li>
+ <li> WCAG - <a href="https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded.html">Audio Description or Media
+ Alternative</a> </li>
+</ul>
+

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

@@ -0,0 +1,28 @@
+{
+ "title": "Media elements should have captions",
+ "type": "CODE_SMELL",
+ "status": "ready",
+ "remediation": {
+ "func": "Constant\/Issue",
+ "constantCost": "5min"
+ },
+ "tags": [
+ "accessibility",
+ "react"
+ ],
+ "defaultSeverity": "Major",
+ "ruleSpecification": "RSPEC-6855",
+ "sqKey": "S6855",
+ "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

@@ -321,6 +321,7 @@
  "S6850",
  "S6851",
  "S6852",
- "S6854"
+ "S6854",
+ "S6855"
  ]
 }