[Fix] no-unknown-property: add inert attribute

Fixes #3484

Author: ljharb

CHANGELOG.md

@@ -15,12 +15,14 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * configs: avoid legacy config system error ([#3461][] @ljharb)
 * [`jsx-no-target-blank`]: allow ternaries with literals ([#3464][] @akulsr0)
 * [`sort-prop-types`]: restore autofixing ([#2574][] @ROSSROSALES)
+* [`no-unknown-property`]: add `inert` attribute ([#3484][] @ljharb)
 
 ### Changed
 * [Perf] component detection: improve performance by avoiding traversing parents unnecessarily ([#3459][] @golopot)
 * [Docs] `forbid-component-props`: inclusive language w/ allowlist ([#3473][] @AndersDJohnson)
 * [Docs] automate doc generation with `eslint-doc-generator` ([#3469][] @bmish)
 
+[#3484]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3484
 [#3473]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3473
 [#3469]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3469
 [#3464]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3464

lib/rules/no-unknown-property.js

@@ -202,7 +202,7 @@ const SVGDOM_ATTRIBUTE_NAMES = {
 const DOM_PROPERTY_NAMES_ONE_WORD = [
   // Global attributes - can be used on any HTML/DOM element
   // See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
-  'dir', 'draggable', 'hidden', 'id', 'lang', 'nonce', 'part', 'slot', 'style', 'title', 'translate',
+  'dir', 'draggable', 'hidden', 'id', 'lang', 'nonce', 'part', 'slot', 'style', 'title', 'translate', 'inert',
   // Element specific attributes
   // See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes (includes global attributes too)
   // To be considered if these should be added also to ATTRIBUTE_TAGS_MAP

tests/lib/rules/no-unknown-property.js

@@ -51,7 +51,7 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<input ref={this.input} type="radio" />' },
     { code: '<input type="file" webkitdirectory="" />' },
     { code: '<input type="file" webkitDirectory="" />' },
-    { code: '<div children="anything" />' },
+    { code: '<div inert children="anything" />' },
     { code: '<iframe scrolling="?" onLoad={a} onError={b} align="top" />' },
     { code: '<input key="bar" type="radio" />' },
     { code: '<button disabled>You cannot click me</button>;' },
@@ -62,7 +62,7 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<input type="checkbox" checked={checked} disabled={disabled} id={id} onChange={onChange} />' },
     { code: '<video playsInline />' },
     { code: '<img onError={foo} onLoad={bar} />' },
-    { code: '<picture onError={foo} onLoad={bar} />' },
+    { code: '<picture inert={false} onError={foo} onLoad={bar} />' },
     { code: '<iframe onError={foo} onLoad={bar} />' },
     { code: '<script onLoad={bar} onError={foo} />' },
     { code: '<source onError={foo} />' },