[Accessibility] Ensures that the mouse events mouseout
and mouseover
are accompanied by focus
and blur
events respectively. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. See more at https://www.w3.org/WAI/WCAG21/Understanding/keyboard
- Type: suggestion
The rule does not have any configuration options.
The following examples are generated automatically from the actual unit tests within the plugin, so you can be assured that their behavior is accurate based on the current commit.
❌ - Toggle examples of incorrect code for this rule
{
"rules": {
"@angular-eslint/template/mouse-events-have-key-events": [
"error"
]
}
}
<div (mouseover)="onMouseOver()"></div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{
"rules": {
"@angular-eslint/template/mouse-events-have-key-events": [
"error"
]
}
}
<div (mouseout)="onMouseOut()" (focus)="onFocus()"></div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✅ - Toggle examples of correct code for this rule
{
"rules": {
"@angular-eslint/template/mouse-events-have-key-events": [
"error"
]
}
}
<app-test (mouseover)="onMouseOver()"></app-test>
{
"rules": {
"@angular-eslint/template/mouse-events-have-key-events": [
"error"
]
}
}
<app-test (mouseout)="onMouseOut()"></app-test>
{
"rules": {
"@angular-eslint/template/mouse-events-have-key-events": [
"error"
]
}
}
<div (mouseover)="onMouseOver()" (focus)="onFocus()"></div>
{
"rules": {
"@angular-eslint/template/mouse-events-have-key-events": [
"error"
]
}
}
<div (mouseout)="onMouseOut()" (blur)="onBlur()"></div>