Merge pull request #416 from evocateur/fix-muted-media-has-caption

fix(media-has-caption): Use correct `muted` attribute in check

Author: ljharb

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

@@ -46,13 +46,13 @@ ruleTester.run('media-has-caption', rule, {
       code: '<video><track kind="Captions" /><track kind="subtitles" /></video>',
     },
     {
-      code: '<audio mute={true}></audio>',
+      code: '<audio muted={true}></audio>',
     },
     {
-      code: '<video mute={true}></video>',
+      code: '<video muted={true}></video>',
     },
     {
-      code: '<video mute></video>',
+      code: '<video muted></video>',
     },
     {
       code: '<Audio><track kind="captions" /></Audio>',
@@ -79,19 +79,19 @@ ruleTester.run('media-has-caption', rule, {
       options: customSchema,
     },
     {
-      code: '<Video mute></Video>',
+      code: '<Video muted></Video>',
       options: customSchema,
     },
     {
-      code: '<Video mute={true}></Video>',
+      code: '<Video muted={true}></Video>',
       options: customSchema,
     },
     {
-      code: '<Audio mute></Audio>',
+      code: '<Audio muted></Audio>',
       options: customSchema,
     },
     {
-      code: '<Audio mute={true}></Audio>',
+      code: '<Audio muted={true}></Audio>',
       options: customSchema,
     },
   ].map(parserOptionsMapper),
@@ -108,12 +108,12 @@ ruleTester.run('media-has-caption', rule, {
       errors: [expectedError],
     },
     {
-      code: '<Audio mute={false}></Audio>',
+      code: '<Audio muted={false}></Audio>',
       options: customSchema,
       errors: [expectedError],
     },
     {
-      code: '<Video mute={false}></Video>',
+      code: '<Video muted={false}></Video>',
       options: customSchema,
       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. However, captions are *not* necessary for video components with the mute attribute.
+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 `muted` attribute.
 
 ### References
 
@@ -31,7 +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>
+<video muted {...props} ></video>
 ```
 
 ### Fail

src/rules/media-has-caption.js

@@ -50,9 +50,9 @@ module.exports = {
       if (!isMediaType(context, type)) {
         return;
       }
-      const muteProp = getProp(element.attributes, 'mute');
-      const mutePropVal: boolean = getLiteralPropValue(muteProp);
-      if (mutePropVal === true) {
+      const mutedProp = getProp(element.attributes, 'muted');
+      const mutedPropVal: boolean = getLiteralPropValue(mutedProp);
+      if (mutedPropVal === true) {
         return;
       }
       // $FlowFixMe https://github.com/facebook/flow/issues/1414