This repository has been archived by the owner on Jul 15, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 198
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* #278 Implement react-a11y-no-onchange. * Fix description & options description. * Remove redundant accessibility. * Update csv. * Fix failing test.
- Loading branch information
Showing
6 changed files
with
129 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import * as ts from 'typescript'; | ||
| import * as Lint from 'tslint'; | ||
|
|
||
| import {ErrorTolerantWalker} from './utils/ErrorTolerantWalker'; | ||
| import {ExtendedMetadata} from './utils/ExtendedMetadata'; | ||
| import {getJsxAttributesFromJsxElement} from './utils/JsxAttribute'; | ||
|
|
||
| /** | ||
| * Implementation of the react-a11y-no-onchange rule. | ||
| */ | ||
| export class Rule extends Lint.Rules.AbstractRule { | ||
|
|
||
| public static metadata: ExtendedMetadata = { | ||
| ruleName: 'react-a11y-no-onchange', | ||
| type: 'functionality', | ||
| description: 'For accessibility of your website, enforce usage of onBlur over onChange on select menus.', | ||
| options: 'string[]', | ||
| optionsDescription: 'Additional tag names to validate.', | ||
| optionExamples: ['true', '[true, ["Select"]]'], | ||
| typescriptOnly: false, | ||
| issueClass: 'Non-SDL', | ||
| issueType: 'Warning', | ||
| severity: 'Important', | ||
| level: 'Opportunity for Excellence', | ||
| group: 'Accessibility' | ||
| }; | ||
|
|
||
| public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] { | ||
| return sourceFile.languageVariant === ts.LanguageVariant.JSX ? | ||
| this.applyWithWalker(new ReactA11yNoOnchangeRuleWalker(sourceFile, this.getOptions())) : | ||
| []; | ||
| } | ||
| } | ||
|
|
||
| class ReactA11yNoOnchangeRuleWalker extends ErrorTolerantWalker { | ||
| protected visitJsxSelfClosingElement(node: ts.JsxSelfClosingElement): void { | ||
| this.checkJsxOpeningElement(node); | ||
| super.visitJsxSelfClosingElement(node); | ||
| } | ||
|
|
||
| protected visitJsxElement(node: ts.JsxElement): void { | ||
| this.checkJsxOpeningElement(node.openingElement); | ||
| super.visitJsxElement(node); | ||
| } | ||
|
|
||
| private checkJsxOpeningElement(node: ts.JsxOpeningLikeElement) { | ||
| const tagName: string = node.tagName.getText(); | ||
| const options: any[] = this.getOptions(); | ||
|
|
||
| const additionalTagNames: string[] = options.length > 0 ? options[0] : []; | ||
|
|
||
| const targetTagNames: string[] = ['select', ...additionalTagNames]; | ||
|
|
||
| if (!tagName || targetTagNames.indexOf(tagName) === -1) { | ||
| return; | ||
| } | ||
|
|
||
| const attributes = getJsxAttributesFromJsxElement(node); | ||
| if (attributes.hasOwnProperty('onchange')) { | ||
| const errorMessage = `onChange event handler should not be used with the <${tagName}>. Please use onBlur instead.`; | ||
| this.addFailureAt(node.getStart(), node.getWidth(), errorMessage); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import {Utils} from '../utils/Utils'; | ||
| import {TestHelper} from './TestHelper'; | ||
|
|
||
| /** | ||
| * Unit tests. | ||
| */ | ||
| describe('reactA11yNoOnchangeRule', () : void => { | ||
| const ruleName : string = 'react-a11y-no-onchange'; | ||
| const errorMessage = (tagName: string): string => | ||
| `onChange event handler should not be used with the <${tagName}>. Please use onBlur instead.`; | ||
|
|
||
| it('should pass if select element attributes without onChange event', () : void => { | ||
| const script: string = ` | ||
| import React = require('react'); | ||
| const selectElement = <select /> | ||
| const selectElementWithOnBlur = <select onBlur={} />`; | ||
|
|
||
| TestHelper.assertNoViolation(ruleName, script); | ||
| }); | ||
|
|
||
| it('should fail if select element attributes contains onChange event', () : void => { | ||
| const script : string = ` | ||
| import React = require('react'); | ||
| const selectElementWithOnChange = <select onChange={} />\`; | ||
| `; | ||
|
|
||
| TestHelper.assertViolations(ruleName, script, [{ | ||
| failure: errorMessage('select'), | ||
| name: Utils.absolutePath('file.tsx'), | ||
| ruleName, | ||
| ruleSeverity: "ERROR", | ||
| startPosition: {character: 47, line: 3} | ||
| }]); | ||
| }); | ||
|
|
||
| it('should fail if additional tag name specified in options contains onChange event', () => { | ||
| const script : string = ` | ||
| import React = require('react'); | ||
| const selectElementWithOnChange = <Select onChange={} /> | ||
| const selectElementWithOnChange = <select onChange={} /> | ||
| `; | ||
|
|
||
| TestHelper.assertViolationsWithOptions(ruleName, ['Select'], script, [{ | ||
| failure: errorMessage('Select'), | ||
| name: Utils.absolutePath('file.tsx'), | ||
| ruleName, | ||
| ruleSeverity: "ERROR", | ||
| startPosition: {character: 47, line: 3} | ||
| }, { | ||
| failure: errorMessage('select'), | ||
| name: Utils.absolutePath('file.tsx'), | ||
| ruleName, | ||
| ruleSeverity: 'ERROR', | ||
| startPosition: { | ||
| 'character': 47, | ||
| 'line': 4 | ||
| } | ||
| }]); | ||
| }); | ||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters