a11y: implement media-has-caption rule

sveltejs · Sep 24, 2020 · 954a34c · 954a34c
1 parent 4c135b0
commit 954a34c
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 34 deletions.
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
@@ -287,6 +287,29 @@ export default class Element extends Node {
 			}
 		}
 
+		if (this.is_media_node()) {
+			const has_muted_attribute = this.attributes.some(attr => attr.name === 'muted');
+
+			if (has_muted_attribute) {
+				return;
+			}
+
+			const is_track = (child: INode) => child.type === 'Element' && child.name === 'track';
+			const is_caption = (attr: Attribute) =>
+				attr.name === 'kind' &&
+				attr.get_static_value().toString().toLowerCase() === 'captions';
+			const has_captions = this.children.some(
+				child => !is_track(child) ? false : child.attributes.some(is_caption)
+			);
+
+			if (!has_captions) {
+				this.component.warn(this, {
+					code: `a11y-media-has-caption`,
+					message: `A11y: <${this.name}> should have a <track> for captions`
+				});
+			}
+		}
+
 		this.validate_attributes();
 		this.validate_special_cases();
 		this.validate_bindings();

diff --git a/test/validator/samples/a11y-media-has-caption/input.svelte b/test/validator/samples/a11y-media-has-caption/input.svelte
@@ -1,4 +1,8 @@
-<video><track kind="captions"/></video>
-<video></video>
-<video><track /></video>
-<audio muted></audio>
+<video>
+  <track kind="captions" />
+</video>
+<video />
+<video>
+  <track />
+</video>
+<audio muted />
diff --git a/test/validator/samples/a11y-media-has-caption/warnings.json b/test/validator/samples/a11y-media-has-caption/warnings.json
@@ -1,32 +1,32 @@
 [
-  {
-    "code": "a11y-media-has-caption",
-    "end": {
-      "character": 55,
-      "column": 15,
-      "line": 2
-    },
-    "message": "A11y: Media elements must have a <track kind=\"captions\">",
-    "pos": 40,
-    "start": {
-      "character": 40,
-      "column": 0,
-      "line": 2
-    }
-  },
-  {
-    "code": "a11y-media-has-caption",
-    "end": {
-      "character": 80,
-      "column": 24,
-      "line": 3
-    },
-    "message": "A11y: Media elements must have a <track kind=\"captions\">",
-    "pos": 56,
-    "start": {
-      "character": 56,
-      "column": 0,
-      "line": 3
-    }
-  }
+	{
+		"code": "a11y-media-has-caption",
+		"end": {
+			"character": 55,
+			"column": 15,
+			"line": 2
+		},
+		"message": "A11y: Media elements must have a <track kind=\"captions\">",
+		"pos": 40,
+		"start": {
+			"character": 40,
+			"column": 0,
+			"line": 2
+		}
+	},
+	{
+		"code": "a11y-media-has-caption",
+		"end": {
+			"character": 80,
+			"column": 24,
+			"line": 3
+		},
+		"message": "A11y: Media elements must have a <track kind=\"captions\">",
+		"pos": 56,
+		"start": {
+			"character": 56,
+			"column": 0,
+			"line": 3
+		}
+	}
 ]