Added a paragraph to onclick-has-role.md to explain use of role presentation (#129)

Author: jessebeach

docs/rules/onclick-has-role.md

@@ -2,6 +2,8 @@
 
 Enforce visible, non-interactive elements with click handlers use role attribute. Visible means that it is not hidden from a screen reader. Examples of non-interactive elements are `div`, `section`, and `a` elements without a href prop. The purpose of the role attribute is to identify to screenreaders the exact function of an element. This rule will only test low-level DOM components, as we can not deterministically map wrapper JSX components to their correct DOM element.
 
+In cases where a non-interactive element has a handler, but does not map to an interactive role such as `button` or `link` -- for example a `div` container that catches bubbled click events -- `onclick-has-role` may be satisfied by providing a role value of `presentation`. This indicates that the element has no semantic value. A role like `button` or `link` should only be applied when the non-interactive element truly represents such a UI element.
+
 #### References
 1. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)
 
@@ -12,6 +14,7 @@ This rule takes no arguments.
 ### Succeed
 ```jsx
 <div onClick={() => void 0} role="button" />
+<div onClick={() => void 0} role="presentation" />
 <input type="text" onClick={() => void 0} /> // Interactive element does not require role.
 <a tabIndex="0" onClick={() => void 0} /> // tabIndex makes this interactive.
 <button onClick={() => void 0} className="foo" /> // button is interactive.