diff --git a/CHANGELOG.md b/CHANGELOG.md index 19bc86900b..2aee95eadb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange ### Fixed * [`no-unknown-property`]: `onError` and `onLoad` both work on `img` and `script` ([#3388][] @ljharb) * [`no-unknown-property`]: data-* attributes can have numbers ([#3390][] @sjarva) +* [`no-unknown-property`]: add more audio/video attributes ([#3390][] @sjarva) [#3390]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3390 [#3388]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3388 diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js index 474fd2cb6d..87efa391ed 100644 --- a/lib/rules/no-unknown-property.js +++ b/lib/rules/no-unknown-property.js @@ -82,6 +82,16 @@ const ATTRIBUTE_TAGS_MAP = { onWaiting: ['audio', 'video'], scrolling: ['iframe'], playsInline: ['video'], + // Video related attributes + autoPictureInPicture: ['video'], + controls: ['audio', 'video'], + controlList: ['video'], + disablePictureInPicture: ['video'], + disableRemotePlayback: ['audio', 'video'], + loop: ['audio', 'video'], + muted: ['audio', 'video'], + poster: ['video'], + preload: ['audio', 'video'], }; const SVGDOM_ATTRIBUTE_NAMES = { @@ -199,6 +209,8 @@ const DOM_PROPERTY_NAMES_ONE_WORD = [ 'property', // React specific attributes 'ref', 'key', 'children', + // Video specific + 'controls', ]; const DOM_PROPERTY_NAMES_TWO_WORDS = [ @@ -258,6 +270,8 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [ 'onAbort', 'onCanPlay', 'onCanPlayThrough', 'onDurationChange', 'onEmptied', 'onEncrypted', 'onEnded', 'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange', 'onSeeked', 'onSeeking', 'onStalled', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting', + // Video specific, + 'autoPictureInPicture', 'controlList', 'disablePictureInPicture', 'disableRemotePlayback', ]; const DOM_PROPERTIES_IGNORE_CASE = ['charset']; diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js index 864b40defd..ccdaf0dc88 100644 --- a/tests/lib/rules/no-unknown-property.js +++ b/tests/lib/rules/no-unknown-property.js @@ -102,7 +102,8 @@ ruleTester.run('no-unknown-property', rule, { { code: '
Some details
' }, { code: '' }, { code: 'Audio content' }, - { code: '' }, + { code: '' }, + { code: '' }, ]), invalid: parsers.all([ { @@ -391,5 +392,42 @@ ruleTester.run('no-unknown-property', rule, { }, ], }, + { + code: '
', + errors: [ + { + messageId: 'invalidPropOnTag', + data: { + name: 'controls', + tagName: 'div', + allowedTags: 'audio, video', + }, + }, + { + messageId: 'invalidPropOnTag', + data: { + name: 'loop', + tagName: 'div', + allowedTags: 'audio, video', + }, + }, + { + messageId: 'invalidPropOnTag', + data: { + name: 'muted', + tagName: 'div', + allowedTags: 'audio, video', + }, + }, + { + messageId: 'invalidPropOnTag', + data: { + name: 'playsInline', + tagName: 'div', + allowedTags: 'video', + }, + }, + ], + }, ]), });