[Fix] no-unknown-property: properly recognize valid data- and aria- attributes

Author: sjarva

CHANGELOG.md

@@ -8,6 +8,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 ### Fixed
 * [`jsx-key`]: avoid a crash with optional chaining ([#3371][] @ljharb)
 * [`jsx-sort-props`]: avoid a crash with spread props ([#3376][] @ljharb)
+* [`no-unknown-property`]: properly recognize valid data- and aria- attributes ([#3377][] @sjarva)
 
 ### Changed
 * [Docs] [`jsx-sort-props`]: replace ref string with ref variable ([#3375][] @Luccasoli)

docs/rules/no-unknown-property.md

@@ -4,7 +4,8 @@
 
 🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-In JSX all DOM properties and attributes should be camelCased to be consistent with standard JavaScript style. This can be a possible source of error if you are used to writing plain HTML.
+In JSX most DOM properties and attributes should be camelCased to be consistent with standard JavaScript style. This can be a possible source of error if you are used to writing plain HTML.
+Only `data-*` and `aria-*` attributes are usings hyphens and lowercase letters in JSX.
 
 ## Rule Details
 
@@ -22,6 +23,14 @@ Examples of **correct** code for this rule:
 var React = require('react');
 
 var Hello = <div className="hello">Hello World</div>;
+
+// aria-* attributes
+var IconButton = <button aria-label="Close" onClick={this.close}>{closeIcon}</button>;
+
+
+// data-* attributes
+var Data = <div data-index={12}>Some data</div>;
+
 ```
 
 ## Rule Options

lib/rules/no-unknown-property.js

@@ -137,6 +137,23 @@ const DOM_PROPERTY_NAMES = [
 
 const DOM_PROPERTIES_IGNORE_CASE = ['charset'];
 
+const ARIA_PROPERTIES = [
+  // See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+  // Global attributes
+  'aria-atomic', 'aria-braillelabel', 'aria-brailleroledescription', 'aria-busy', 'aria-controls', 'aria-current',
+  'aria-describedby', 'aria-description', 'aria-details',
+  'aria-disabled', 'aria-dropeffect', 'aria-errormessage', 'aria-flowto', 'aria-grabbed', 'aria-haspopup',
+  'aria-hidden', 'aria-invalid', 'aria-keyshortcuts', 'aria-label', 'aria-labelledby', 'aria-live',
+  'aria-owns', 'aria-relevant', 'aria-roledescription',
+  // Widget attributes
+  'aria-autocomplete', 'aria-checked', 'aria-expanded', 'aria-level', 'aria-modal', 'aria-multiline', 'aria-multiselectable',
+  'aria-orientation', 'aria-placeholder', 'aria-pressed', 'aria-readonly', 'aria-required', 'aria-selected',
+  'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext',
+  // Relationship attributes
+  'aria-activedescendant', 'aria-colcount', 'aria-colindex', 'aria-colindextext', 'aria-colspan',
+  'aria-posinset', 'aria-rowcount', 'aria-rowindex', 'aria-rowindextext', 'aria-rowspan', 'aria-setsize',
+];
+
 function getDOMPropertyNames(context) {
   // this was removed in React v16.1+, see https://github.com/facebook/react/pull/10823
   if (!testReactVersion(context, '>= 16.1.0')) {
@@ -176,6 +193,31 @@ function isValidHTMLTagInJSX(childNode) {
   return false;
 }
 
+/**
+ * Checks if an attribute name is a valid `data-*` attribute:
+ * if the name starts with "data-" and has some lowcase (a to z) words, separated but hyphens (-)
+ * (which is also called "kebab case" or "dash case"), then the attribute is valid data attribute.
+ *
+ * @param {String} name - Attribute name to be tested
+ * @returns {boolean} Result
+ */
+function isValidDataAttribute(name) {
+  const dataAttrConvention = /^data(-[a-z]*)*$/;
+  return !!dataAttrConvention.test(name);
+}
+
+/**
+ * Checks if an attribute name is a standard aria attribute by compering it to a list
+ * of standard aria property names
+ *
+ * @param {String} name - Attribute name to be tested
+ * @returns {Boolean} Result
+ */
+
+function isValidAriaAttribute(name) {
+  return ARIA_PROPERTIES.some((element) => element === name);
+}
+
 /**
  * Checks if the attribute name is included in the attributes that are excluded
  * from the camel casing.
@@ -291,6 +333,10 @@ module.exports = {
           return;
         }
 
+        if (isValidDataAttribute(name)) { return; }
+
+        if (isValidAriaAttribute(name)) { return; }
+
         if (isCaseIgnoredAttribute(name)) { return; }
 
         const tagName = getTagName(node);

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

@@ -43,13 +43,20 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<App clip-path="bar" />;' },
     { code: '<div className="bar"></div>;' },
     { code: '<div onMouseDown={this._onMouseDown}></div>;' },
+    // data attributes should work
     { code: '<div data-foo="bar"></div>;' },
+    { code: '<div data-foo-bar="baz"></div>;' },
+    { code: '<div data-parent="parent"></div>;' },
+    { code: '<div data-index-number="1234"></div>;' },
     { code: '<div class="foo" is="my-elem"></div>;' },
     { code: '<div {...this.props} class="foo" is="my-elem"></div>;' },
     { code: '<atom-panel class="foo"></atom-panel>;' }, {
       code: '<div class="bar"></div>;',
       options: [{ ignore: ['class'] }],
     },
+    // aria attributes should work
+    { code: '<button aria-haspopup="true">Click me to open pop up</button>;' },
+    { code: '<button aria-label="Close" onClick={someThing.close} />;' },
     { code: '<script crossOrigin />' },
     { code: '<audio crossOrigin />' },
     { code: '<div hasOwnProperty="should not be allowed tag" />' },