From 26f41c8cd4e9f5fa03d7703bf8cf3a0fe5262020 Mon Sep 17 00:00:00 2001
From: Trevor Burnham <tburnham@hubspot.com>
Date: Thu, 10 Jan 2019 08:31:11 -0500
Subject: [PATCH 1/3] [Docs] Change explanation for role="presentation" escape
 hatch

---
 docs/rules/no-static-element-interactions.md | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/docs/rules/no-static-element-interactions.md b/docs/rules/no-static-element-interactions.md
index 60779113d..6175ba999 100644
--- a/docs/rules/no-static-element-interactions.md
+++ b/docs/rules/no-static-element-interactions.md
@@ -38,19 +38,20 @@ Common interactive roles include:
 
 Note: Adding a role to your element does **not** add behavior. When a semantic HTML element like `<button>` is used, then it will also respond to Enter key presses when it has focus. The developer is responsible for providing the expected behavior of an element that the role suggests it would have: focusability and key press support.
 
-### Case: This element is not a button, link, menuitem, etc. It is catching bubbled events from elements that it contains
+### Case: The event handler is only being used to capture bubbled events
 
-If your element is catching bubbled click or key events from descendant elements, then the proper role for this element is `presentation`.
+If a static element has an event handler for the sole purpose of capturing events from its descendants, you can tell the linter to ignore it by setting `role="presentation"`:
 
-```
+```jsx
 <div
-  onClick="onClickHandler"
+  onClick={this.handleButtonClick}
   role="presentation">
   <button>Save</button>
+  <button>Cancel</button>
 </div>
 ```
 
-Marking an element with the role `presentation` indicates to assistive technology that this element should be ignored; it exists to support the web application and is not meant for humans to interact with directly.
+This `role` has no effect on static elements, but it clarifies your intent.
 
 ### References
   1. [WAI-ARIA `role` attribute](https://www.w3.org/TR/wai-aria-1.1/#usage_intro)

From 8244e4342c6ac232b071a18f81df1ccbaa30491b Mon Sep 17 00:00:00 2001
From: Trevor Burnham <tburnham@hubspot.com>
Date: Thu, 10 Jan 2019 08:33:33 -0500
Subject: [PATCH 2/3] [Docs] Add syntax highlighting to example

---
 docs/rules/no-static-element-interactions.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/no-static-element-interactions.md b/docs/rules/no-static-element-interactions.md
index 6175ba999..1eae083fb 100644
--- a/docs/rules/no-static-element-interactions.md
+++ b/docs/rules/no-static-element-interactions.md
@@ -12,7 +12,7 @@ In order to add interactivity such as a mouse or key event listener to a static
 
 Indicate the element's role with the `role` attribute:
 
-```
+```jsx
 <div
   onClick={onClickHandler}
   onKeyPress={onKeyPressHandler}

From 77b987099c78b4cc16f9353426da301c920b2af4 Mon Sep 17 00:00:00 2001
From: Trevor Burnham <tburnham@hubspot.com>
Date: Thu, 10 Jan 2019 08:34:22 -0500
Subject: [PATCH 3/3] [Docs] Add newlines below headings

---
 docs/rules/no-static-element-interactions.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/rules/no-static-element-interactions.md b/docs/rules/no-static-element-interactions.md
index 1eae083fb..d195c6bb2 100644
--- a/docs/rules/no-static-element-interactions.md
+++ b/docs/rules/no-static-element-interactions.md
@@ -54,6 +54,7 @@ If a static element has an event handler for the sole purpose of capturing event
 This `role` has no effect on static elements, but it clarifies your intent.
 
 ### References
+
   1. [WAI-ARIA `role` attribute](https://www.w3.org/TR/wai-aria-1.1/#usage_intro)
   1. [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex)
   1. [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav)
@@ -82,6 +83,7 @@ You may configure which handler props should be taken into account when applying
 Adjust the list of handler prop names in the handlers array to increase or decrease the coverage surface of this rule in your codebase.
 
 ### Succeed
+
 ```jsx
 <button onClick={() => {}} className="foo" />
 <div className="foo" onClick={() => {}} role="button" />
@@ -89,6 +91,7 @@ Adjust the list of handler prop names in the handlers array to increase or decre
 ```
 
 ### Fail
+
 ```jsx
 <div onClick={() => {}} />
 ```