a11y: implement media-has-caption rule

src/compiler/compile/nodes/Element.ts

@@ -276,6 +276,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();

test/css/samples/omit-scoping-attribute-attribute-selector/expected.html

@@ -1,2 +1,2 @@
-<div><video class="svelte-xyz" autoplay></video>
-	<video></video></div>
+<div><video class="svelte-xyz" autoplay muted></video>
+	<video muted></video></div>

test/css/samples/omit-scoping-attribute-attribute-selector/input.svelte

@@ -1,10 +1,10 @@
 <div>
-	<video autoplay></video>
-	<video></video>
+	<video autoplay muted></video>
+	<video muted></video>
 </div>
 
 <style>
 	[autoplay] {
 		color: red;
 	}
-</style>
+</style>

test/validator/samples/a11y-media-has-caption/input.svelte

@@ -0,0 +1,49 @@
+<script>
+  export let x;
+</script>
+
+<!-- valid -->
+<audio>
+  <track kind="captions" />
+</audio>
+<audio>
+  <track kind="Captions" />
+</audio>
+<audio>
+  <track kind="Captions" />
+  <track kind="subtitles" />
+</audio>
+<audio muted />
+<audio muted={x} />
+
+<video>
+  <track kind="captions" />
+</video>
+<video>
+  <track kind="Captions" />
+</video>
+<video>
+  <track kind="Captions" />
+  <track kind="subtitles" />
+</video>
+<video muted />
+<video muted={x} />
+
+<!-- invalid -->
+<audio>
+  <track />
+</audio>
+<audio>
+  <track kind="subtitles" />
+</audio>
+<audio />
+<audio>Foo</audio>
+
+<video>
+  <track />
+</video>
+<video>
+  <track kind="subtitles" />
+</video>
+<video />
+<video>Foo</video>

test/validator/samples/a11y-media-has-caption/warnings.json

@@ -0,0 +1,122 @@
+[
+	{
+		"code": "a11y-media-has-caption",
+		"message": "A11y: <audio> should have a <track> for captions",
+		"pos": 470,
+		"start": {
+			"character": 470,
+			"column": 0,
+			"line": 33
+		},
+		"end": {
+			"character": 498,
+			"column": 8,
+			"line": 35
+		}
+	},
+	{
+		"code": "a11y-media-has-caption",
+		"message": "A11y: <audio> should have a <track> for captions",
+		"pos": 499,
+		"start": {
+			"character": 499,
+			"column": 0,
+			"line": 36
+		},
+		"end": {
+			"character": 544,
+			"column": 8,
+			"line": 38
+		}
+	},
+	{
+		"code": "a11y-media-has-caption",
+		"message": "A11y: <audio> should have a <track> for captions",
+		"pos": 545,
+		"start": {
+			"character": 545,
+			"column": 0,
+			"line": 39
+		},
+		"end": {
+			"character": 554,
+			"column": 9,
+			"line": 39
+		}
+	},
+	{
+		"code": "a11y-media-has-caption",
+		"message": "A11y: <audio> should have a <track> for captions",
+		"pos": 555,
+		"start": {
+			"character": 555,
+			"column": 0,
+			"line": 40
+		},
+		"end": {
+			"character": 573,
+			"column": 18,
+			"line": 40
+		}
+	},
+	{
+		"code": "a11y-media-has-caption",
+		"message": "A11y: <video> should have a <track> for captions",
+		"pos": 575,
+		"start": {
+			"character": 575,
+			"column": 0,
+			"line": 42
+		},
+		"end": {
+			"character": 603,
+			"column": 8,
+			"line": 44
+		}
+	},
+	{
+		"code": "a11y-media-has-caption",
+		"message": "A11y: <video> should have a <track> for captions",
+		"pos": 604,
+		"start": {
+			"character": 604,
+			"column": 0,
+			"line": 45
+		},
+		"end": {
+			"character": 649,
+			"column": 8,
+			"line": 47
+		}
+	},
+	{
+		"code": "a11y-media-has-caption",
+		"message": "A11y: <video> should have a <track> for captions",
+		"pos": 650,
+		"start": {
+			"character": 650,
+			"column": 0,
+			"line": 48
+		},
+		"end": {
+			"character": 659,
+			"column": 9,
+			"line": 48
+		}
+	},
+	{
+		"code": "a11y-media-has-caption",
+		"message": "A11y: <video> should have a <track> for captions",
+		"pos": 660,
+		"start": {
+			"character": 660,
+			"column": 0,
+			"line": 49
+		},
+		"end": {
+			"character": 678,
+			"column": 18,
+			"line": 49
+		}
+	}
+]