Skip to content

Commit 26f41c8

Browse files
author
Trevor Burnham
committed
[Docs] Change explanation for role="presentation" escape hatch
1 parent fff6a4b commit 26f41c8

File tree

1 file changed

+6
-5
lines changed

1 file changed

+6
-5
lines changed

docs/rules/no-static-element-interactions.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,20 @@ Common interactive roles include:
3838

3939
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.
4040

41-
### Case: This element is not a button, link, menuitem, etc. It is catching bubbled events from elements that it contains
41+
### Case: The event handler is only being used to capture bubbled events
4242

43-
If your element is catching bubbled click or key events from descendant elements, then the proper role for this element is `presentation`.
43+
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"`:
4444

45-
```
45+
```jsx
4646
<div
47-
onClick="onClickHandler"
47+
onClick={this.handleButtonClick}
4848
role="presentation">
4949
<button>Save</button>
50+
<button>Cancel</button>
5051
</div>
5152
```
5253

53-
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.
54+
This `role` has no effect on static elements, but it clarifies your intent.
5455

5556
### References
5657
1. [WAI-ARIA `role` attribute](https://www.w3.org/TR/wai-aria-1.1/#usage_intro)

0 commit comments

Comments
 (0)