allowing for no <track> element (no captions) on muted audio/video

Author: zargold

__tests__/src/rules/media-has-caption-test.js

@@ -45,6 +45,15 @@ ruleTester.run('media-has-caption', rule, {
     {
       code: '<video><track kind="Captions" /><track kind="subtitles" /></video>',
     },
+    {
+      code: '<audio mute={true}></audio>',
+    },
+    {
+      code: '<video mute={true}></video>',
+    },
+    {
+      code: '<video mute></video>',
+    },
     {
       code: '<Audio><track kind="captions" /></Audio>',
       options: customSchema,
@@ -69,6 +78,22 @@ ruleTester.run('media-has-caption', rule, {
       code: '<Video><Track kind="captions" /></Video>',
       options: customSchema,
     },
+    {
+      code: '<Video mute></Video>',
+      options: customSchema,
+    },
+    {
+      code: '<Video mute={true}></Video>',
+      options: customSchema,
+    },
+    {
+      code: '<Audio mute></Audio>',
+      options: customSchema,
+    },
+    {
+      code: '<Audio mute={true}></Audio>',
+      options: customSchema,
+    },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<audio><track /></audio>', errors: [expectedError] },
@@ -82,6 +107,16 @@ ruleTester.run('media-has-caption', rule, {
       code: '<video><track kind="subtitles" /></video>',
       errors: [expectedError],
     },
+    {
+      code: '<Audio mute={false}></Audio>',
+      options: customSchema,
+      errors: [expectedError],
+    },
+    {
+      code: '<Video mute={false}></Video>',
+      options: customSchema,
+      errors: [expectedError],
+    },
     { code: '<video />', errors: [expectedError] },
     { code: '<audio>Foo</audio>', errors: [expectedError] },
     { code: '<video>Foo</video>', errors: [expectedError] },

docs/rules/media-has-caption.md

@@ -2,7 +2,7 @@
 
 Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load).
 
-The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content.
+The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are *not* necessary for video components with the mute attribute.
 
 ### References
 
@@ -31,6 +31,7 @@ For the `audio`, `video`, and `track` options, these strings determine which JSX
 ```jsx
 <audio><track kind="captions" {...props} /></audio>
 <video><track kind="captions" {...props} /></video>
+<video mute {...props} ></video>
 ```
 
 ### Fail

src/rules/media-has-caption.js

@@ -48,7 +48,11 @@ module.exports = {
       if (!isMediaType(context, type)) {
         return;
       }
-
+      const muteProp = getProp(element.attributes, 'mute');
+      const mutePropVal: boolean = getLiteralPropValue(muteProp);
+      if (mutePropVal === true) {
+        return;
+      }
       // $FlowFixMe https://github.com/facebook/flow/issues/1414
       const trackChildren: Array<JSXElement> = node.children.filter((child: Node) => {
         if (child.type !== 'JSXElement') {