Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix documentation #510 #522

Merged
merged 2 commits into from
Nov 28, 2019
Merged

Fix documentation #510 #522

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0cc110
[Docs] `no-static-element-interactions`: Fix documentation
n-chardon Jan 9, 2019
4758cbf
Merge branch 'master' into n-chardon-fix-issue510
jessebeach Nov 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/rules/no-static-element-interactions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,18 @@ Note: Adding a role to your element does **not** add behavior. When a semantic H

### Case: The event handler is only being used to capture bubbled events

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"`:
If your element is catching bubbled click or key events from descendant elements, there are no appropriate roles for your element: you will have to deactivate the rule. Consider explaining the reason for disabling the rule as well.

```jsx
<div
onClick={this.handleButtonClick}
role="presentation">
{/* The <div> element has a child <button> element that allows keyboard interaction */}
{/* eslint-disable-next-line no-static-element-interactions */}
<div onClick={this.handleButtonClick}>
<button>Save</button>
<button>Cancel</button>
</div>
```

This `role` has no effect on static elements, but it clarifies your intent.
Do not use the role `presentation` on the element: it removes the element's semantics, and may also remove its children's semantics, creating big issues with assistive technology.

### References

Expand Down