ESLint plugin for Ionic tappable attribute
npm install eslint-plugin-ionic-tappableAn ESLint plugin that click must be accompanied by tappable, except for , and .



tappable ?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 and 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.
``html`I am clickable!
``
npm install --save-dev eslint-plugin-ionic-tappable
Or
``
yarn add --dev eslint-plugin-ionic-tappable
Modify your .eslintrc
`js`
// .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
Examples of incorrect code:
`html`I am clickable!
Examples of correct code:
`htmlI am clickable!
``
MIT