[Fix] no-unknown-property: add border; focusable on <svg>

Fixes #3404. Fixes #3405.

Author: ljharb

CHANGELOG.md

@@ -14,9 +14,12 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: Add more one word properties found in DefinitelyTyped's react/index.d.ts ([#3402][] @sjarva)
 * [`no-unknown-property`]: Mark onLoad/onError as supported on iframes ([#3398][] @maiis, [#3406][] @akx)
 * [`no-unknown-property`]: allow `imageSrcSet` and `imageSizes` attributes on `<link>` ([#3407][] @terrymun)
+* [`no-unknown-property`]: add `border`; `focusable` on `<svg>` ([#3404][] [#3404][] @ljharb)
 
 [#3407]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3407
 [#3406]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3406
+[#3405]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3405
+[#3404]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3404
 [#3402]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3402
 [#3398]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3398
 [#3397]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3397

lib/rules/no-unknown-property.js

@@ -57,6 +57,7 @@ const ATTRIBUTE_TAGS_MAP = {
     'animateTransform',
     'set',
   ],
+  focusable: ['svg'],
   imageSizes: ['link'],
   imageSrcSet: ['link'],
   property: ['meta'],
@@ -230,7 +231,7 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   // 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
-  'acceptCharset', 'autoComplete', 'autoPlay', 'cellPadding', 'cellSpacing', 'classID', 'codeBase',
+  'acceptCharset', 'autoComplete', 'autoPlay', 'border', 'cellPadding', 'cellSpacing', 'classID', 'codeBase',
   'colSpan', 'contextMenu', 'dateTime', 'encType', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget',
   'frameBorder', 'hrefLang', 'httpEquiv', 'imageSizes', 'imageSrcSet', 'isMap', 'keyParams', 'keyType', 'marginHeight', 'marginWidth',
   'maxLength', 'mediaGroup', 'minLength', 'noValidate', 'onAnimationEnd', 'onAnimationIteration', 'onAnimationStart',

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

@@ -67,6 +67,7 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<link onLoad={bar} onError={foo} />' },
     { code: '<link rel="preload" as="image" href="someHref" imageSrcSet="someImageSrcSet" imageSizes="someImageSizes" />' },
     { code: '<div allowFullScreen webkitAllowFullScreen mozAllowFullScreen />' },
+    { code: '<table border="1" />' },
     {
       code: '<div allowTransparency="true" />',
       settings: {
@@ -110,7 +111,7 @@ ruleTester.run('no-unknown-property', rule, {
     // Attributes on allowed elements should work
     { code: '<script crossOrigin />' },
     { code: '<audio crossOrigin />' },
-    { code: '<svg><image crossOrigin /></svg>' },
+    { code: '<svg focusable><image crossOrigin /></svg>' },
     { code: '<details onToggle={this.onToggle}>Some details</details>' },
     { code: '<path fill="pink" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"></path>' },
     { code: '<line fill="pink" x1="0" y1="80" x2="100" y2="20"></line>' },