[Refactor] no-unknown-property: update DOM properties to include also one word properties

Also regroup the properties to global, element specific and React or Safari/Apple specific

Author: sjarva

CHANGELOG.md

@@ -13,6 +13,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 ### Changed
 * [Docs] [`jsx-sort-props`]: replace ref string with ref variable ([#3375][] @Luccasoli)
 * [Refactor] [`no-unknown-property`]: improve jsdoc; extract logic to separate functions ([#3377][] @sjarva)
+* [Refactor] [`no-unknown-property`]: update DOM properties to include also one word properties ([#3377][] @sjarva)
 
 [#3377]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3377
 [#3376]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3376

lib/rules/no-unknown-property.js

@@ -116,23 +116,47 @@ const SVGDOM_ATTRIBUTE_NAMES = {
   'xml:space': 'xmlSpace',
 };
 
-const DOM_PROPERTY_NAMES = [
-  // Standard
-  'acceptCharset', 'accessKey', 'allowFullScreen', 'autoComplete', 'autoFocus', 'autoPlay',
-  'cellPadding', 'cellSpacing', 'classID', 'className', 'colSpan', 'contentEditable', 'contextMenu',
-  'dateTime', 'encType', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget',
-  'frameBorder', 'hrefLang', 'htmlFor', 'httpEquiv', 'inputMode', 'keyParams', 'keyType', 'marginHeight', 'marginWidth',
+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',
+  // 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
+  'accept', 'action', 'allow', 'alt', 'async', 'buffered', 'capture', 'challenge', 'cite', 'code', 'cols',
+  'content', 'coords', 'csp', 'data', 'decoding', 'default', 'defer', 'disabled', 'form',
+  'headers', 'height', 'high', 'href', 'icon', 'importance', 'integrity', 'kind', 'label',
+  'language', 'loading', 'list', 'loop', 'low', 'max', 'media', 'method', 'min', 'multiple', 'muted',
+  'name', 'open', 'optimum', 'pattern', 'ping', 'placeholder', 'poster', 'preload', 'profile',
+  'rel', 'required', 'reversed', 'role', 'rows', 'sandbox', 'scope', 'selected', 'shape', 'size', 'sizes',
+  'span', 'src', 'start', 'step', 'target', 'type', 'value', 'width', 'wrap',
+  // React specific attributes
+  'ref',
+];
+
+const DOM_PROPERTY_NAMES_TWO_WORDS = [
+  // Global attributes - can be used on any HTML/DOM element
+  // See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
+  'accessKey', 'autoCapitalize', 'autoFocus', 'contentEditable', 'enterKeyHint', 'exportParts',
+  'inputMode', 'itemID', 'itemRef', 'itemProp', 'itemScope', 'itemType', 'spellCheck', 'tabIndex',
+  // 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', 'allowFullScreen', 'autoComplete', 'autoPlay', 'cellPadding', 'cellSpacing', 'classID', 'codeBase',
+  'colSpan', 'contextMenu', 'dateTime', 'encType', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget',
+  'frameBorder', 'hrefLang', 'httpEquiv', 'isMap', 'keyParams', 'keyType', 'marginHeight', 'marginWidth',
   'maxLength', 'mediaGroup', 'minLength', 'noValidate', 'onAnimationEnd', 'onAnimationIteration', 'onAnimationStart',
   'onBlur', 'onChange', 'onClick', 'onContextMenu', 'onCopy', 'onCompositionEnd', 'onCompositionStart',
   'onCompositionUpdate', 'onCut', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave',
   'onError', 'onFocus', 'onInput', 'onKeyDown', 'onKeyPress', 'onKeyUp', 'onLoad', 'onWheel', 'onDragOver',
   'onDragStart', 'onDrop', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver',
-  'onMouseUp', 'onPaste', 'onScroll', 'onSelect', 'onSubmit', 'onTransitionEnd', 'radioGroup', 'readOnly', 'rowSpan',
-  'spellCheck', 'srcDoc', 'srcLang', 'srcSet', 'tabIndex', 'useMap',
-  // Non standard
-  'autoCapitalize', 'autoCorrect',
-  'autoSave',
-  'itemProp', 'itemScope', 'itemType', 'itemRef', 'itemID',
+  'onMouseUp', 'onPaste', 'onScroll', 'onSelect', 'onSubmit', 'onTransitionEnd', 'radioGroup', 'readOnly', 'referrerPolicy',
+  'rowSpan', 'srcDoc', 'srcLang', 'srcSet', 'useMap',
+  // Safari/Apple specific, no listing available
+  'autoCorrect', // https://stackoverflow.com/questions/47985384/html-autocorrect-for-text-input-is-not-working
+  'autoSave', // https://stackoverflow.com/questions/25456396/what-is-autosave-attribute-supposed-to-do-how-do-i-use-it
+  // React specific attributes https://reactjs.org/docs/dom-elements.html#differences-in-attributes
+  'className', 'dangerouslySetInnerHTML', 'defaultValue', 'htmlFor', 'onChange', 'suppressContentEditableWarning', 'suppressHydrationWarning',
 ];
 
 const DOM_PROPERTIES_IGNORE_CASE = ['charset'];
@@ -155,11 +179,12 @@ const ARIA_PROPERTIES = [
 ];
 
 function getDOMPropertyNames(context) {
+  const ALL_DOM_PROPERTY_NAMES = DOM_PROPERTY_NAMES_TWO_WORDS.concat(DOM_PROPERTY_NAMES_ONE_WORD);
   // this was removed in React v16.1+, see https://github.com/facebook/react/pull/10823
   if (!testReactVersion(context, '>= 16.1.0')) {
-    return ['allowTransparency'].concat(DOM_PROPERTY_NAMES);
+    return ['allowTransparency'].concat(ALL_DOM_PROPERTY_NAMES);
   }
-  return DOM_PROPERTY_NAMES;
+  return ALL_DOM_PROPERTY_NAMES;
 }
 
 // ------------------------------------------------------------------------------