mgechev / mgechev/codelyzer

template-click-events-have-key-events throws error on anchor <a> element

Open
#996 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
2.5k
Forks
232
PR merge metrics
No merged PRs in 30d

Description

**Describe the bug**

The rule should exclude interactive elements. Buttons are indeed excluded, however, anchor tags with click events (without key events) still cause a lint error:

`My link`

> click must be accompanied by either keyup, keydown or keypress event for accessibility

**Context and configuration**
rule: template-click-events-have-key-events
tsconfig.json:
```
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"types": ["jasmine"]
},
"include": [],
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}
```
tsconfig.base.json:
```
{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"module": "esnext",
"typeRoots": ["node_modules/@types"],
"lib": ["es2017", "dom"],
"baseUrl": ".",
"paths": {
"core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"]
},
"rootDir": "."
},
"exclude": ["node_modules", "tmp"]
}

```
no codelyzer.js

**Expected behavior**

The rule should pass for anchor tags with click events, even if they don't have a key event.

**Environment**

- Version 6.0.1
- OS: Mac OS
- Node.js version 12.18.3
- npm version 6.14.6
- Angular version 10.0.5
- tslint version 6.1.2

Contributor guide

Open the contributing guide

Research direction

Start by locating the implementation and tests for the template-click-events-have-key-events rule. Reproduce the reported anchor example, verify that buttons remain excluded, and consider the work complete when anchor elements with click handlers no longer produce this accessibility error.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
tooling
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.