Skip to content

Commit

Permalink
feat(rule): mouse events should accompany key events (#759)
Browse files Browse the repository at this point in the history
  • Loading branch information
mohammedzamakhan authored and mgechev committed Feb 15, 2019
1 parent 6b21a9e commit 3a7b15d
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export { Rule as TemplateAccessibilityTableScopeRule } from './templateAccessibi
export { Rule as TemplateNoDistractingElementsRule } from './templateNoDistractingElementsRule';
export { Rule as TemplatesNoNegatedAsync } from './templatesNoNegatedAsyncRule';
export { Rule as TemplateNoAutofocusRule } from './templateNoAutofocusRule';
export { Rule as TemplateMouseEventsHaveKeyEventsRule } from './templateMouseEventsHaveKeyEventsRule';
export { Rule as TrackByFunctionRule } from './trackByFunctionRule';
export { Rule as UseHostPropertyDecoratorRule } from './useHostPropertyDecoratorRule';
export { Rule as UseInputPropertyDecoratorRule } from './useInputPropertyDecoratorRule';
Expand Down
61 changes: 61 additions & 0 deletions src/templateMouseEventsHaveKeyEventsRule.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { ElementAst } from '@angular/compiler';
import { IRuleMetadata, RuleFailure, Rules } from 'tslint/lib';
import { SourceFile } from 'typescript/lib/typescript';
import { NgWalker } from './angular/ngWalker';
import { BasicTemplateAstVisitor } from './angular/templates/basicTemplateAstVisitor';

export class Rule extends Rules.AbstractRule {
static readonly metadata: IRuleMetadata = {
description: 'Ensures that the Mouse Events mouseover and mouseout are accompanied with Key Events focus and blur',
options: null,
optionsDescription: 'Not configurable.',
rationale: 'Keyboard is important for users with physical disabilities who cannot use mouse.',
ruleName: 'template-mouse-events-have-key-events',
type: 'functionality',
typescriptOnly: true
};

static readonly FAILURE_STRING_MOUSE_OVER = 'mouseover must be accompanied by focus event for accessibility';
static readonly FAILURE_STRING_MOUSE_OUT = 'mouseout must be accompanied by blur event for accessibility';

apply(sourceFile: SourceFile): RuleFailure[] {
return this.applyWithWalker(
new NgWalker(sourceFile, this.getOptions(), {
templateVisitorCtrl: TemplateMouseEventsHaveKeyEventsVisitor
})
);
}
}

class TemplateMouseEventsHaveKeyEventsVisitor extends BasicTemplateAstVisitor {
visitElement(el: ElementAst, context: any) {
this.validateElement(el);
super.visitElement(el, context);
}

private validateElement(el: ElementAst): void {
const hasMouseOver = el.outputs.some(output => output.name === 'mouseover');
const hasMouseOut = el.outputs.some(output => output.name === 'mouseout');
const hasFocus = el.outputs.some(output => output.name === 'focus');
const hasBlur = el.outputs.some(output => output.name === 'blur');

if (!hasMouseOver && !hasMouseOut) {
return;
}

const {
sourceSpan: {
end: { offset: endOffset },
start: { offset: startOffset }
}
} = el;

if (hasMouseOver && !hasFocus) {
this.addFailureFromStartToEnd(startOffset, endOffset, Rule.FAILURE_STRING_MOUSE_OVER);
}

if (hasMouseOut && !hasBlur) {
this.addFailureFromStartToEnd(startOffset, endOffset, Rule.FAILURE_STRING_MOUSE_OUT);
}
}
}
60 changes: 60 additions & 0 deletions test/templateMouseEventsHaveKeyEventsRule.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { Rule } from '../src/templateMouseEventsHaveKeyEventsRule';
import { assertAnnotated, assertSuccess } from './testHelper';

const {
FAILURE_STRING_MOUSE_OUT,
FAILURE_STRING_MOUSE_OVER,
metadata: { ruleName }
} = Rule;

describe(ruleName, () => {
describe('failure', () => {
it('should fail when mouseover is not accompanied with focus', () => {
const source = `
@Component({
template: \`
<div (mouseover)="onMouseOver()"></div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
\`
})
class Bar {}
`;
assertAnnotated({
message: FAILURE_STRING_MOUSE_OVER,
ruleName,
source
});
});

it('should fail when mouseout is not accompanied with blur', () => {
const source = `
@Component({
template: \`
<div (mouseout)="onMouseOut()"></div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
\`
})
class Bar {}
`;
assertAnnotated({
message: FAILURE_STRING_MOUSE_OUT,
ruleName,
source
});
});
});

describe('success', () => {
it('should work find when mouse events are associated with key events', () => {
const source = `
@Component({
template: \`
<div (mouseover)="onMouseOver()" (focus)="onMouseOver()" (mouseout)="onMouseOut()" (blur)="onMouseOut()"></div>
\`
})
class Bar {}
`;
assertSuccess(ruleName, source);
});
});
});

0 comments on commit 3a7b15d

Please sign in to comment.