An ESLint plugin that click must be accompanied by tappable
, except for <button>
, <ion-button>
and <a>
.
tappable
is an Ionic directive.
https://ionicframework.com/docs/troubleshooting/runtime#-
In general, we recommend only adding
(click)
events to elements that are normally clickable. This includes<button>
and<a>
elements. This improves accessibility as a screen reader will be able to tell that the element is clickable
However, you may need to add a
(click)
event to an element that is not normally clickable. When you do this you may experience a 300ms delay from the time you click the element to the event firing. To remove this delay, you can add the tappable attribute to your element.
<div tappable (click)="doClick()">I am clickable!</div>
npm install --save-dev eslint-plugin-ionic-tappable
Or
yarn add --dev eslint-plugin-ionic-tappable
Modify your .eslintrc
// .eslintrc.json
module.exports = {
"overrides": [
...,
{
"files": ["*.html"],
"parser": "@angular-eslint/template-parser",
"plugins": [
...,
"ionic-tappable"
],
"rules": [
...,
"ionic-tappable/click-events-have-tappable": "warn"
]
}
]
}
Rule ID | Description |
---|---|
click-events-have-tappable | Ensures that the click event is accompanied by tappable , except for <button> , <ion-button> and <a> |
Examples of incorrect code:
<div (click)="doClick()">I am clickable!</div>
Examples of correct code:
<div tappable (click)="doClick()">I am clickable!</div>
<button (click)="doClick()">I am clickable!</button>
MIT