tag. ' +
+ 'For details, see https://fb.me/invalid-aria-prop'
+ );
+ });
+ it('should warn for many invalid aria-* props', () => {
+ spyOn(console, 'error');
+ mountComponent(
+ {
+ 'aria-badprop': 'Very tall trees',
+ 'aria-malprop': 'Turbulent seas',
+ }
+ );
+ expect(console.error.calls.count()).toBe(1);
+ expect(console.error.calls.argsFor(0)[0]).toContain(
+ 'Warning: Invalid aria props `aria-badprop`, `aria-malprop` on
' +
+ 'tag. For details, see https://fb.me/invalid-aria-prop'
+ );
+ });
+ it('should warn for an improperly cased aria-* prop', () => {
+ spyOn(console, 'error');
+ // The valid attribute name is aria-haspopup.
+ mountComponent({'aria-hasPopup': 'true'});
+ expect(console.error.calls.count()).toBe(1);
+ expect(console.error.calls.argsFor(0)[0]).toContain(
+ 'Warning: Unknown ARIA attribute aria-hasPopup. ' +
+ 'Did you mean aria-haspopup?'
+ );
+ });
+ });
+});
diff --git a/src/renderers/dom/shared/hooks/ReactDOMInvalidARIAHook.js b/src/renderers/dom/shared/hooks/ReactDOMInvalidARIAHook.js
new file mode 100644
index 000000000000..6e2fdcfa363e
--- /dev/null
+++ b/src/renderers/dom/shared/hooks/ReactDOMInvalidARIAHook.js
@@ -0,0 +1,119 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactDOMInvalidARIAHook
+ */
+
+'use strict';
+
+var DOMProperty = require('DOMProperty');
+var ReactComponentTreeHook = require('ReactComponentTreeHook');
+
+var warning = require('warning');
+
+var warnedProperties = {};
+var rARIA = new RegExp('^(aria)-[' + DOMProperty.ATTRIBUTE_NAME_CHAR + ']*$');
+
+function validateProperty(tagName, name, debugID) {
+ if (
+ warnedProperties.hasOwnProperty(name)
+ && warnedProperties[name]
+ ) {
+ return true;
+ }
+
+ if (rARIA.test(name)) {
+ var lowerCasedName = name.toLowerCase();
+ var standardName =
+ DOMProperty.getPossibleStandardName.hasOwnProperty(lowerCasedName) ?
+ DOMProperty.getPossibleStandardName[lowerCasedName] :
+ null;
+
+ // If this is an aria-* attribute, but is not listed in the known DOM
+ // DOM properties, then it is an invalid aria-* attribute.
+ if (standardName == null) {
+ warnedProperties[name] = true;
+ return false;
+ }
+ // aria-* attributes should be lowercase; suggest the lowercase version.
+ if (name !== standardName) {
+ warning(
+ false,
+ 'Unknown ARIA attribute %s. Did you mean %s?%s',
+ name,
+ standardName,
+ ReactComponentTreeHook.getStackAddendumByID(debugID)
+ );
+ warnedProperties[name] = true;
+ return true;
+ }
+ }
+
+ return true;
+}
+
+function warnInvalidARIAProps(debugID, element) {
+ const invalidProps = [];
+
+ for (var key in element.props) {
+ var isValid = validateProperty(element.type, key, debugID);
+ if (!isValid) {
+ invalidProps.push(key);
+ }
+ }
+
+ const unknownPropString = invalidProps
+ .map(prop => '`' + prop + '`')
+ .join(', ');
+
+ if (invalidProps.length === 1) {
+ warning(
+ false,
+ 'Invalid aria prop %s on <%s> tag. ' +
+ 'For details, see https://fb.me/invalid-aria-prop%s',
+ unknownPropString,
+ element.type,
+ ReactComponentTreeHook.getStackAddendumByID(debugID)
+ );
+ } else if (invalidProps.length > 1) {
+ warning(
+ false,
+ 'Invalid aria props %s on <%s> tag. ' +
+ 'For details, see https://fb.me/invalid-aria-prop%s',
+ unknownPropString,
+ element.type,
+ ReactComponentTreeHook.getStackAddendumByID(debugID)
+ );
+ }
+}
+
+function handleElement(debugID, element) {
+ if (element == null || typeof element.type !== 'string') {
+ return;
+ }
+ if (element.type.indexOf('-') >= 0 || element.props.is) {
+ return;
+ }
+
+ warnInvalidARIAProps(debugID, element);
+}
+
+var ReactDOMInvalidARIAHook = {
+ onBeforeMountComponent(debugID, element) {
+ if (__DEV__) {
+ handleElement(debugID, element);
+ }
+ },
+ onBeforeUpdateComponent(debugID, element) {
+ if (__DEV__) {
+ handleElement(debugID, element);
+ }
+ },
+};
+
+module.exports = ReactDOMInvalidARIAHook;