@arcaauth/eslint-plugin-jsx-a11y 6.10.2

package/__tests__/src/util/isFocusable-test.js

@@ -0,0 +1,111 @@
+import test from 'tape';
+import { elementType } from 'jsx-ast-utils';
+
+import isFocusable from '../../../src/util/isFocusable';
+import {
+  genElementSymbol,
+  genInteractiveElements,
+  genNonInteractiveElements,
+} from '../../../__mocks__/genInteractives';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+
+function mergeTabIndex(index, attributes) {
+  return [].concat(attributes, JSXAttributeMock('tabIndex', index));
+}
+
+test('isFocusable', (t) => {
+  t.test('interactive elements', (st) => {
+    genInteractiveElements().forEach(({ openingElement }) => {
+      st.equal(
+        isFocusable(
+          elementType(openingElement),
+          openingElement.attributes,
+        ),
+        true,
+        `identifies \`${genElementSymbol(openingElement)}\` as a focusable element`,
+      );
+
+      st.equal(
+        isFocusable(
+          elementType(openingElement),
+          mergeTabIndex(-1, openingElement.attributes),
+        ),
+        false,
+        `does NOT identify \`${genElementSymbol(openingElement)}\` with tabIndex of -1 as a focusable element`,
+      );
+
+      st.equal(
+        isFocusable(
+          elementType(openingElement),
+          mergeTabIndex(0, openingElement.attributes),
+        ),
+        true,
+        `identifies \`${genElementSymbol(openingElement)}\` with tabIndex of 0 as a focusable element`,
+      );
+
+      st.equal(
+        isFocusable(
+          elementType(openingElement),
+          mergeTabIndex(1, openingElement.attributes),
+        ),
+        true,
+        `identifies \`${genElementSymbol(openingElement)}\` with tabIndex of 1 as a focusable element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.test('non-interactive elements', (st) => {
+    genNonInteractiveElements().forEach(({ openingElement }) => {
+      st.equal(
+        isFocusable(
+          elementType(openingElement),
+          openingElement.attributes,
+        ),
+        false,
+        `does NOT identify \`${genElementSymbol(openingElement)}\` as a focusable element`,
+      );
+
+      st.equal(
+        isFocusable(
+          elementType(openingElement),
+          mergeTabIndex(-1, openingElement.attributes),
+        ),
+        false,
+        `does NOT identify \`${genElementSymbol(openingElement)}\` with tabIndex of -1 as a focusable element`,
+      );
+
+      st.equal(
+        isFocusable(
+          elementType(openingElement),
+          mergeTabIndex(0, openingElement.attributes),
+        ),
+        true,
+        `identifies \`${genElementSymbol(openingElement)}\` with tabIndex of 0 as a focusable element`,
+      );
+
+      st.equal(
+        isFocusable(
+          elementType(openingElement),
+          mergeTabIndex(1, openingElement.attributes),
+        ),
+        true,
+        `identifies \`${genElementSymbol(openingElement)}\` with tabIndex of 1 as a focusable element`,
+      );
+
+      st.equal(
+        isFocusable(
+          elementType(openingElement),
+          mergeTabIndex('bogus', openingElement.attributes),
+        ),
+        false,
+        `does NOT identify \`${genElementSymbol(openingElement)}\` with tabIndex of 'bogus' as a focusable element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.end();
+});

package/__tests__/src/util/isInteractiveElement-test.js

@@ -0,0 +1,104 @@
+import test from 'tape';
+import { elementType } from 'jsx-ast-utils';
+
+import isInteractiveElement from '../../../src/util/isInteractiveElement';
+import JSXElementMock from '../../../__mocks__/JSXElementMock';
+import {
+  genElementSymbol,
+  genIndeterminantInteractiveElements,
+  genInteractiveElements,
+  genInteractiveRoleElements,
+  genNonInteractiveElements,
+  genNonInteractiveRoleElements,
+} from '../../../__mocks__/genInteractives';
+
+test('isInteractiveElement', (t) => {
+  t.equal(
+    isInteractiveElement(undefined, []),
+    false,
+    'identifies them as interactive elements',
+  );
+
+  t.test('interactive elements', (st) => {
+    genInteractiveElements().forEach(({ openingElement }) => {
+      st.equal(
+        isInteractiveElement(
+          elementType(openingElement),
+          openingElement.attributes,
+        ),
+        true,
+        `identifies \`${genElementSymbol(openingElement)}\` as an interactive element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.test('interactive role elements', (st) => {
+    genInteractiveRoleElements().forEach(({ openingElement }) => {
+      st.equal(
+        isInteractiveElement(
+          elementType(openingElement),
+          openingElement.attributes,
+        ),
+        false,
+        `identifies \`${genElementSymbol(openingElement)}\` as an interactive element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.test('non-interactive elements', (st) => {
+    genNonInteractiveElements().forEach(({ openingElement }) => {
+      st.equal(
+        isInteractiveElement(
+          elementType(openingElement),
+          openingElement.attributes,
+        ),
+        false,
+        `identifies \`${genElementSymbol(openingElement)}\` as an interactive element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.test('non-interactive role elements', (st) => {
+    genNonInteractiveRoleElements().forEach(({ openingElement }) => {
+      st.equal(
+        isInteractiveElement(
+          elementType(openingElement),
+          openingElement.attributes,
+        ),
+        false,
+        `identifies \`${genElementSymbol(openingElement)}\` as an interactive element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.test('indeterminate elements', (st) => {
+    genIndeterminantInteractiveElements().forEach(({ openingElement }) => {
+      st.equal(
+        isInteractiveElement(
+          elementType(openingElement),
+          openingElement.attributes,
+        ),
+        false,
+        `identifies \`${genElementSymbol(openingElement)}\` as an interactive element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.equal(
+    isInteractiveElement('CustomComponent', JSXElementMock()),
+    false,
+    'JSX elements are not interactive',
+  );
+
+  t.end();
+});

package/__tests__/src/util/isInteractiveRole-test.js

@@ -0,0 +1,59 @@
+import test from 'tape';
+import { elementType } from 'jsx-ast-utils';
+
+import isInteractiveRole from '../../../src/util/isInteractiveRole';
+import {
+  genElementSymbol,
+  genInteractiveRoleElements,
+  genNonInteractiveRoleElements,
+} from '../../../__mocks__/genInteractives';
+
+test('isInteractiveRole', (t) => {
+  t.equal(
+    isInteractiveRole(undefined, []),
+    false,
+    'identifies JSX Components (no tagName) as interactive role elements',
+  );
+
+  t.test('elements with a non-interactive role', (st) => {
+    genNonInteractiveRoleElements().forEach(({ openingElement }) => {
+      const { attributes } = openingElement;
+
+      st.equal(
+        isInteractiveRole(
+          elementType(openingElement),
+          attributes,
+        ),
+        false,
+        `does NOT identify \`${genElementSymbol(openingElement)}\` as an interactive role element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.equal(
+    isInteractiveRole('div', []),
+    false,
+    'does NOT identify elements without a role as interactive role elements',
+  );
+
+  t.test('elements with an interactive role', (st) => {
+    genInteractiveRoleElements().forEach(({ openingElement }) => {
+      const { attributes } = openingElement;
+
+      st.equal(
+        isInteractiveRole(
+          elementType(openingElement),
+          attributes,
+        ),
+        true,
+        `identifies \`${genElementSymbol(openingElement)}\` as an interactive role element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.end();
+});

package/__tests__/src/util/isNonInteractiveElement-test.js

@@ -0,0 +1,97 @@
+import test from 'tape';
+import { elementType } from 'jsx-ast-utils';
+
+import isNonInteractiveElement from '../../../src/util/isNonInteractiveElement';
+import {
+  genElementSymbol,
+  genIndeterminantInteractiveElements,
+  genInteractiveElements,
+  genInteractiveRoleElements,
+  genNonInteractiveElements,
+  genNonInteractiveRoleElements,
+} from '../../../__mocks__/genInteractives';
+
+test('isNonInteractiveElement', (t) => {
+  t.equal(
+    isNonInteractiveElement(undefined, []),
+    false,
+    'identifies JSX Components (no tagName) as non-interactive elements',
+  );
+
+  t.test('non-interactive elements', (st) => {
+    genNonInteractiveElements().forEach(({ openingElement }) => {
+      st.equal(
+        isNonInteractiveElement(
+          elementType(openingElement),
+          openingElement.attributes,
+        ),
+        true,
+        `identifies \`${genElementSymbol(openingElement)}\` as a non-interactive element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.test('non-interactive role elements', (st) => {
+    genNonInteractiveRoleElements().forEach(({ openingElement }) => {
+      st.equal(
+        isNonInteractiveElement(
+          elementType(openingElement),
+          openingElement.attributes,
+        ),
+        false,
+        `identifies \`${genElementSymbol(openingElement)}\` as a non-interactive element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.test('interactive elements', (st) => {
+    genInteractiveElements().forEach(({ openingElement }) => {
+      st.equal(
+        isNonInteractiveElement(
+          elementType(openingElement),
+          openingElement.attributes,
+        ),
+        false,
+        `identifies \`${genElementSymbol(openingElement)}\` as a non-interactive element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.test('interactive role elements', (st) => {
+    genInteractiveRoleElements().forEach(({ openingElement }) => {
+      st.equal(
+        isNonInteractiveElement(
+          elementType(openingElement),
+          openingElement.attributes,
+        ),
+        false,
+        `identifies \`${genElementSymbol(openingElement)}\` as a non-interactive element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.test('indeterminate elements', (st) => {
+    genIndeterminantInteractiveElements().forEach(({ openingElement }) => {
+      st.equal(
+        isNonInteractiveElement(
+          elementType(openingElement),
+          openingElement.attributes,
+        ),
+        false,
+        `identifies \`${genElementSymbol(openingElement)}\` as a non-interactive element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.end();
+});

package/__tests__/src/util/isNonInteractiveRole-test.js

@@ -0,0 +1,59 @@
+import test from 'tape';
+import { elementType } from 'jsx-ast-utils';
+
+import isNonInteractiveRole from '../../../src/util/isNonInteractiveRole';
+import {
+  genElementSymbol,
+  genInteractiveRoleElements,
+  genNonInteractiveRoleElements,
+} from '../../../__mocks__/genInteractives';
+
+test('isNonInteractiveRole', (t) => {
+  t.equal(
+    isNonInteractiveRole(undefined, []),
+    false,
+    'identifies JSX Components (no tagName) as non-interactive elements',
+  );
+
+  t.test('elements with a non-interactive role', (st) => {
+    genNonInteractiveRoleElements().forEach(({ openingElement }) => {
+      const { attributes } = openingElement;
+
+      st.equal(
+        isNonInteractiveRole(
+          elementType(openingElement),
+          attributes,
+        ),
+        true,
+        `identifies \`${genElementSymbol(openingElement)}\` as a non-interactive role element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.equal(
+    isNonInteractiveRole('div', []),
+    false,
+    'does NOT identify elements without a role as non-interactive role elements',
+  );
+
+  t.test('elements with an interactive role', (st) => {
+    genInteractiveRoleElements().forEach(({ openingElement }) => {
+      const { attributes } = openingElement;
+
+      st.equal(
+        isNonInteractiveRole(
+          elementType(openingElement),
+          attributes,
+        ),
+        false,
+        `does NOT identify \`${genElementSymbol(openingElement)}\` as a non-interactive role element`,
+      );
+    });
+
+    st.end();
+  });
+
+  t.end();
+});

package/__tests__/src/util/isNonLiteralProperty-test.js

@@ -0,0 +1,52 @@
+import test from 'tape';
+
+import isNonLiteralProperty from '../../../src/util/isNonLiteralProperty';
+import IdentifierMock from '../../../__mocks__/IdentifierMock';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+import JSXSpreadAttributeMock from '../../../__mocks__/JSXSpreadAttributeMock';
+import JSXTextMock from '../../../__mocks__/JSXTextMock';
+import LiteralMock from '../../../__mocks__/LiteralMock';
+
+const theProp = 'theProp';
+
+const spread = JSXSpreadAttributeMock('theSpread');
+
+test('isNonLiteralProperty', (t) => {
+  t.equal(
+    isNonLiteralProperty([], theProp),
+    false,
+    'does not identify them as non-literal role elements',
+  );
+
+  t.equal(
+    isNonLiteralProperty([JSXAttributeMock(theProp, LiteralMock('theRole'))], theProp),
+    false,
+    'does not identify elements with a literal property as non-literal role elements without spread operator',
+  );
+
+  t.equal(
+    isNonLiteralProperty([spread, JSXAttributeMock(theProp, LiteralMock('theRole'))], theProp),
+    false,
+    'does not identify elements with a literal property as non-literal role elements with spread operator',
+  );
+
+  t.equal(
+    isNonLiteralProperty([JSXAttributeMock(theProp, JSXTextMock('theRole'))], theProp),
+    false,
+    'identifies elements with a JSXText property as non-literal role elements',
+  );
+
+  t.equal(
+    isNonLiteralProperty([JSXAttributeMock(theProp, IdentifierMock('undefined'))], theProp),
+    false,
+    'does not identify elements with a property of undefined as non-literal role elements',
+  );
+
+  t.equal(
+    isNonLiteralProperty([JSXAttributeMock(theProp, IdentifierMock('theIdentifier'))], theProp),
+    true,
+    'identifies elements with an expression property as non-literal role elements',
+  );
+
+  t.end();
+});

package/__tests__/src/util/isSemanticRoleElement-test.js

@@ -0,0 +1,72 @@
+import test from 'tape';
+
+import isSemanticRoleElement from '../../../src/util/isSemanticRoleElement';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+
+test('isSemanticRoleElement', (t) => {
+  t.equal(
+    isSemanticRoleElement('input', [
+      JSXAttributeMock('type', 'checkbox'),
+      JSXAttributeMock('role', 'switch'),
+    ]),
+    true,
+    'identifies semantic role elements',
+  );
+
+  t.test('rejects non-semantics role elements', (st) => {
+    st.equal(
+      isSemanticRoleElement('input', [
+        JSXAttributeMock('type', 'radio'),
+        JSXAttributeMock('role', 'switch'),
+      ]),
+      false,
+    );
+
+    st.equal(
+      isSemanticRoleElement('input', [
+        JSXAttributeMock('type', 'text'),
+        JSXAttributeMock('role', 'combobox'),
+      ]),
+      false,
+    );
+
+    st.equal(
+      isSemanticRoleElement('button', [
+        JSXAttributeMock('role', 'switch'),
+        JSXAttributeMock('aria-pressed', 'true'),
+      ]),
+      false,
+    );
+
+    st.equal(
+      isSemanticRoleElement('input', [
+        JSXAttributeMock('role', 'switch'),
+      ]),
+      false,
+    );
+
+    st.end();
+  });
+
+  t.doesNotThrow(
+    () => {
+      isSemanticRoleElement('input', [
+        JSXAttributeMock('type', 'checkbox'),
+        JSXAttributeMock('role', 'checkbox'),
+        JSXAttributeMock('aria-checked', 'false'),
+        JSXAttributeMock('aria-labelledby', 'foo'),
+        JSXAttributeMock('tabindex', '0'),
+        {
+          type: 'JSXSpreadAttribute',
+          argument: {
+            type: 'Identifier',
+            name: 'props',
+          },
+        },
+      ]);
+    },
+    'does not throw on JSXSpreadAttribute',
+  );
+
+  t.end();
+});