exclude specific input types from react-a11y-input-elements rule (#754)

* exclude specific input types from react-a11y-input-elements rule * feedback - use for of, tsutils for type checks * feedback - add tests for non type attributes with excluded values, clean up boolean * dry things up
microsoft · Jan 2, 2019 · 0519742 · 0519742
1 parent 71ab476
commit 0519742
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 2 deletions.
diff --git a/src/reactA11yInputElementsRule.ts b/src/reactA11yInputElementsRule.ts
@@ -8,6 +8,7 @@ import { ExtendedMetadata } from './utils/ExtendedMetadata';
 export const MISSING_PLACEHOLDER_INPUT_FAILURE_STRING: string = 'Input elements must include default, place-holding characters if empty';
 export const MISSING_PLACEHOLDER_TEXTAREA_FAILURE_STRING: string =
     'Textarea elements must include default, place-holding characters if empty';
+const EXCLUDED_INPUT_TYPES = ['checkbox', 'radio', 'file'];
 
 /**
  * Implementation of the react-a11y-input-elements rule.
@@ -45,14 +46,32 @@ export class Rule extends Lint.Rules.AbstractRule {
     }
 }
 
+function isExcludedInputType(node: ts.JsxSelfClosingElement, attributes: { [propName: string]: ts.JsxAttribute }): boolean {
+    for (const attribute of node.attributes.properties) {
+        if (tsutils.isJsxAttribute(attribute)) {
+            const isInputAttributeType = attributes.type;
+            if (attribute.initializer !== undefined && tsutils.isStringLiteral(attribute.initializer)) {
+                const attributeText = attribute.initializer.text;
+                if (isInputAttributeType !== undefined && EXCLUDED_INPUT_TYPES.indexOf(attributeText) !== -1) {
+                    return true;
+                }
+            }
+        }
+    }
+    return false;
+}
+
 function walk(ctx: Lint.WalkContext<void>) {
     function cb(node: ts.Node): void {
         if (tsutils.isJsxSelfClosingElement(node)) {
             const tagName = node.tagName.getText();
 
             if (tagName === 'input') {
                 const attributes = getJsxAttributesFromJsxElement(node);
-                if (isEmpty(attributes.value) && isEmpty(attributes.placeholder)) {
+                const isExcludedInput = isExcludedInputType(node, attributes);
+                const isExcludedInputTypeValueEmpty = isEmpty(attributes.value) && isExcludedInput;
+                const isPlaceholderEmpty = isEmpty(attributes.placeholder) && !isExcludedInput;
+                if ((isEmpty(attributes.value) && isPlaceholderEmpty) || isExcludedInputTypeValueEmpty) {
                     ctx.addFailureAt(node.getStart(), node.getWidth(), MISSING_PLACEHOLDER_INPUT_FAILURE_STRING);
                 }
             } else if (tagName === 'textarea') {

diff --git a/src/tests/ReactA11yInputElementsRuleTests.ts b/src/tests/ReactA11yInputElementsRuleTests.ts
@@ -20,10 +20,81 @@ describe('reactA11yInputElementsRule', (): void => {
         TestHelper.assertViolations(ruleName, script, []);
     });
 
+    it('should pass on input elements without placeholder of type radio, checkbox, file', (): void => {
+        const script: string = `
+            import React = require('react');
+            const a = <input type="radio" value="foo" />;
+            const b = <input type="checkbox" value="foo" />;
+            const c = <input type="file" value="foo" />;
+        `;
+
+        TestHelper.assertViolations(ruleName, script, []);
+    });
+
+    it('should fail on input elements without value of type radio, checkbox, file', (): void => {
+        const script: string = `
+            import React = require('react');
+            const a = <input type="radio" />;
+            const b = <input type="checkbox" />;
+            const c = <input type="file" />;
+        `;
+
+        TestHelper.assertViolations(ruleName, script, [
+            {
+                failure: MISSING_PLACEHOLDER_INPUT_FAILURE_STRING,
+                name: Utils.absolutePath('file.tsx'),
+                ruleName: 'react-a11y-input-elements',
+                startPosition: { character: 23, line: 3 }
+            },
+            {
+                failure: MISSING_PLACEHOLDER_INPUT_FAILURE_STRING,
+                name: Utils.absolutePath('file.tsx'),
+                ruleName: 'react-a11y-input-elements',
+                startPosition: { character: 23, line: 4 }
+            },
+            {
+                failure: MISSING_PLACEHOLDER_INPUT_FAILURE_STRING,
+                name: Utils.absolutePath('file.tsx'),
+                ruleName: 'react-a11y-input-elements',
+                startPosition: { character: 23, line: 5 }
+            }
+        ]);
+    });
+
+    it('should fail on input elements without placeholder, when attribute is not type', (): void => {
+        const script: string = `
+            import React = require('react');
+            const a = <input foo="radio" />;
+            const b = <input bar="checkbox" />;
+            const c = <input baz="file" />;
+        `;
+
+        TestHelper.assertViolations(ruleName, script, [
+            {
+                failure: MISSING_PLACEHOLDER_INPUT_FAILURE_STRING,
+                name: Utils.absolutePath('file.tsx'),
+                ruleName: 'react-a11y-input-elements',
+                startPosition: { character: 23, line: 3 }
+            },
+            {
+                failure: MISSING_PLACEHOLDER_INPUT_FAILURE_STRING,
+                name: Utils.absolutePath('file.tsx'),
+                ruleName: 'react-a11y-input-elements',
+                startPosition: { character: 23, line: 4 }
+            },
+            {
+                failure: MISSING_PLACEHOLDER_INPUT_FAILURE_STRING,
+                name: Utils.absolutePath('file.tsx'),
+                ruleName: 'react-a11y-input-elements',
+                startPosition: { character: 23, line: 5 }
+            }
+        ]);
+    });
+
     it('should fail on empty input elements without placeholder', (): void => {
         const script: string = `
             import React = require('react');
-            const a = <input />;
+            const a = <input type="button" />;
             const b = <textarea />;
             const c = <textarea></textarea>;
         `;