Enforce @click
is accompanied by at least one of @keyup
, @keydown
, or @keypress
. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. This does not apply for interactive or hidden elements.
Examples of incorrect code for this rule:
html` <div @click="${onClick}"></div> `;
Examples of correct code for this rule:
html` <button @click="${onClick}"></button> `;
html` <div @click="${onClick}" @keyup="${onKeyup}"></div> `;
The allowList
option lets you specify tag names to exclude from this rule. the allowCustomElements
option (true by default) excludes all custom-elements from this rule.
{ "rules": { "lit-a11y/click-events-have-key-events": [ "error", { "allowList": ["foo-button"], "allowCustomElements": false } ] } }
Examples of incorrect code with allowCustomElements: false
:
html` <custom-element @click="${onClick}"></custom-element> `;
Examples of correct code with allowCustomElements: false, allowList: ['custom-element']
:
html` <custom-element @click="${onClick}"></custom-element> `;