Merge pull request #380 from evcohen/interactive-supports-disabled-element-focus

Do not consider disabled elements in interactive-supports-focus

Author: ljharb

__tests__/src/rules/interactive-supports-focus-test.js

@@ -115,6 +115,7 @@ const alwaysValid = [
   { code: '<div role="switch" tabIndex="0" onClick={() => void 0} />' },
   { code: '<div role="tab" tabIndex="0" onClick={() => void 0} />' },
   { code: '<div role="textbox" tabIndex="0" onClick={() => void 0} />' },
+  { code: '<div role="textbox" aria-disabled="true" onClick={() => void 0} />' },
   { code: '<Foo.Bar onClick={() => void 0} aria-hidden={false} />;' },
   { code: '<Input onClick={() => void 0} type="hidden" />;' },
 ];

__tests__/src/util/isDisabledElement-test.js

@@ -0,0 +1,82 @@
+/* eslint-env mocha */
+import expect from 'expect';
+import isDisabledElement from '../../../src/util/isDisabledElement';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+
+describe('isDisabledElement', () => {
+  describe('HTML5', () => {
+    describe('disabled', () => {
+      it('should identify HTML5 disabled elements', () => {
+        const attributes = [
+          JSXAttributeMock('disabled', 'disabled'),
+        ];
+        expect(isDisabledElement(attributes))
+          .toBe(true);
+      });
+    });
+    describe('not disabled', () => {
+      it('should identify HTML5 disabled elements with null as the value', () => {
+        const attributes = [
+          JSXAttributeMock('disabled', null),
+        ];
+        expect(isDisabledElement(attributes))
+          .toBe(true);
+      });
+      it('should not identify HTML5 disabled elements with undefined as the value', () => {
+        const attributes = [
+          JSXAttributeMock('disabled', undefined),
+        ];
+        expect(isDisabledElement(attributes))
+          .toBe(false);
+      });
+    });
+  });
+  describe('ARIA', () => {
+    describe('disabled', () => {
+      it('should not identify ARIA disabled elements', () => {
+        const attributes = [
+          JSXAttributeMock('aria-disabled', 'true'),
+        ];
+        expect(isDisabledElement(attributes))
+          .toBe(true);
+      });
+      it('should not identify ARIA disabled elements', () => {
+        const attributes = [
+          JSXAttributeMock('aria-disabled', true),
+        ];
+        expect(isDisabledElement(attributes))
+          .toBe(true);
+      });
+    });
+    describe('not disabled', () => {
+      it('should not identify ARIA disabled elements', () => {
+        const attributes = [
+          JSXAttributeMock('aria-disabled', 'false'),
+        ];
+        expect(isDisabledElement(attributes))
+          .toBe(false);
+      });
+      it('should not identify ARIA disabled elements', () => {
+        const attributes = [
+          JSXAttributeMock('aria-disabled', false),
+        ];
+        expect(isDisabledElement(attributes))
+          .toBe(false);
+      });
+      it('should not identify ARIA disabled elements with null as the value', () => {
+        const attributes = [
+          JSXAttributeMock('aria-disabled', null),
+        ];
+        expect(isDisabledElement(attributes))
+          .toBe(false);
+      });
+      it('should not identify ARIA disabled elements with undefined as the value', () => {
+        const attributes = [
+          JSXAttributeMock('aria-disabled', undefined),
+        ];
+        expect(isDisabledElement(attributes))
+          .toBe(false);
+      });
+    });
+  });
+});

src/rules/interactive-supports-focus.js

@@ -22,6 +22,7 @@ import {
   enumArraySchema,
   generateObjSchema,
 } from '../util/schemas';
+import isDisabledElement from '../util/isDisabledElement';
 import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 import isInteractiveElement from '../util/isInteractiveElement';
 import isInteractiveRole from '../util/isInteractiveRole';
@@ -72,6 +73,7 @@ module.exports = {
         return;
       } else if (
         !hasInteractiveProps
+        || isDisabledElement(attributes)
         || isHiddenFromScreenReader(type, attributes)
         || isPresentationRole(type, attributes)
       ) {

src/util/isDisabledElement.js

@@ -0,0 +1,28 @@
+/**
+ * @flow
+ */
+
+import { getProp, getLiteralPropValue, getPropValue } from 'jsx-ast-utils';
+import type { Node } from 'ast-types-flow';
+
+const isDisabledElement = (attributes: Array<Node>): boolean => {
+  const disabledAttr = getProp(attributes, 'disabled');
+  const disabledAttrValue = getPropValue(disabledAttr);
+  const isHTML5Disabled = disabledAttr && disabledAttrValue !== undefined;
+  if (isHTML5Disabled) {
+    return true;
+  }
+  const ariaDisabledAttr = getProp(attributes, 'aria-disabled');
+  const ariaDisabledAttrValue = getLiteralPropValue(ariaDisabledAttr);
+
+  if (
+    ariaDisabledAttr
+    && ariaDisabledAttrValue !== undefined
+    && ariaDisabledAttrValue === true
+  ) {
+    return true;
+  }
+  return false;
+};
+
+export default isDisabledElement;