index.js

var React = require('react');
var warning = require('react/lib/warning');

var INTERACTIVE = {
  'button': true
};

var isInteractive = (tagName) => {
  return INTERACTIVE[tagName.tagName];
};

var hasClick = (props) => {
  return typeof props.onClick === 'function';
};

var hasRole = (props) => {
  return typeof props.role === 'string';
};

var hasTabIndex = (props) => {
  return typeof props.tabIndex === 'string';
};

var needsAriaRole = (tagName, props) => {
  return (
    !isInteractive(tagName) &&
    hasClick(props) &&
    !hasRole(props)
  );
};

var needsTabIndex = (tagName, props) => {
  return (
    !isInteractive(tagName) &&
    hasClick(props) &&
    !hasTabIndex(props)
  );
};

var assertAccessibility = (tagName, props) => {
  warning(!needsAriaRole(tagName, props), 'You have a click handler on a non-interactive element but no `role` DOM property. It will be unclear what this element is supposed to do to a screen-reader user. http://www.w3.org/TR/wai-aria/roles#role_definitions')
  warning(!needsTabIndex(tagName, props), 'You have a click handler on a non-interactive element but no `tabIndex` DOM property. The element will not be navigable or interactive by keyboard users. http://www.w3.org/TR/wai-aria-practices/#focus_tabindex');
};

var _createElement = React.createElement;

React.createElement = function (type, props) {
  if (typeof type === 'string')
    assertAccessibility(type, props);
  return _createElement.apply(this, arguments);
};