@arcaauth/eslint-plugin-jsx-a11y 6.10.2

package/__tests__/src/rules/tabindex-no-positive-test.js

@@ -0,0 +1,55 @@
+/**
+ * @fileoverview Enforce tabIndex value is not greater than zero.
+ * @author Ethan Cohen
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import parsers from '../../__util__/helpers/parsers';
+import rule from '../../../src/rules/tabindex-no-positive';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message: 'Avoid positive integer values for tabIndex.',
+  type: 'JSXAttribute',
+};
+
+ruleTester.run('tabindex-no-positive', rule, {
+  valid: parsers.all([].concat(
+    { code: '<div />;' },
+    { code: '<div {...props} />' },
+    { code: '<div id="main" />' },
+    { code: '<div tabIndex={undefined} />' },
+    { code: '<div tabIndex={`${undefined}`} />' },
+    { code: '<div tabIndex={`${undefined}${undefined}`} />' },
+    { code: '<div tabIndex={0} />' },
+    { code: '<div tabIndex={-1} />' },
+    { code: '<div tabIndex={null} />' },
+    { code: '<div tabIndex={bar()} />' },
+    { code: '<div tabIndex={bar} />' },
+    { code: '<div tabIndex={"foobar"} />' },
+    { code: '<div tabIndex="0" />' },
+    { code: '<div tabIndex="-1" />' },
+    { code: '<div tabIndex="-5" />' },
+    { code: '<div tabIndex="-5.5" />' },
+    { code: '<div tabIndex={-5.5} />' },
+    { code: '<div tabIndex={-5} />' },
+  )).map(parserOptionsMapper),
+
+  invalid: parsers.all([].concat(
+    { code: '<div tabIndex="1" />', errors: [expectedError] },
+    { code: '<div tabIndex={1} />', errors: [expectedError] },
+    { code: '<div tabIndex={"1"} />', errors: [expectedError] },
+    { code: '<div tabIndex={`1`} />', errors: [expectedError] },
+    { code: '<div tabIndex={1.589} />', errors: [expectedError] },
+  )).map(parserOptionsMapper),
+});

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

@@ -0,0 +1,91 @@
+import test from 'tape';
+
+import attributesComparator from '../../../src/util/attributesComparator';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+import JSXElementMock from '../../../__mocks__/JSXElementMock';
+
+test('attributesComparator', (t) => {
+  t.equal(
+    attributesComparator(),
+    true,
+    'baseAttributes are undefined and attributes are undefined -> true',
+  );
+
+  t.equal(
+    attributesComparator([], []),
+    true,
+    'baseAttributes are empty and attributes are empty -> true',
+  );
+
+  t.equal(
+    attributesComparator([], [
+      JSXAttributeMock('foo', 0),
+      JSXAttributeMock('bar', 'baz'),
+    ]),
+    true,
+    'baseAttributes are empty and attributes have values -> true',
+  );
+
+  const baseAttributes = [
+    {
+      name: 'biz',
+      value: 1,
+    }, {
+      name: 'fizz',
+      value: 'pop',
+    }, {
+      name: 'fuzz',
+      value: 'lolz',
+    },
+  ];
+
+  t.equal(
+    attributesComparator(baseAttributes, []),
+    false,
+    'baseAttributes have values and attributes are empty -> false',
+  );
+
+  t.equal(
+    attributesComparator(baseAttributes, [
+      JSXElementMock(),
+      JSXAttributeMock('biz', 2),
+      JSXAttributeMock('ziff', 'opo'),
+      JSXAttributeMock('far', 'lolz'),
+    ]),
+    false,
+    'baseAttributes have values and attributes have values, and the values are different -> false',
+  );
+
+  t.equal(
+    attributesComparator(baseAttributes, [
+      JSXAttributeMock('biz', 1),
+      JSXAttributeMock('fizz', 'pop'),
+      JSXAttributeMock('goo', 'gazz'),
+    ]),
+    false,
+    'baseAttributes have values and attributes have values, and the values are a subset -> false',
+  );
+
+  t.equal(
+    attributesComparator(baseAttributes, [
+      JSXAttributeMock('biz', 1),
+      JSXAttributeMock('fizz', 'pop'),
+      JSXAttributeMock('fuzz', 'lolz'),
+    ]),
+    true,
+    'baseAttributes have values and attributes have values, and the values are the same -> true',
+  );
+
+  t.equal(
+    attributesComparator(baseAttributes, [
+      JSXAttributeMock('biz', 1),
+      JSXAttributeMock('fizz', 'pop'),
+      JSXAttributeMock('fuzz', 'lolz'),
+      JSXAttributeMock('dar', 'tee'),
+    ]),
+    true,
+    'baseAttributes have values and attributes have values, and the values are a superset -> true',
+  );
+
+  t.end();
+});

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

@@ -0,0 +1,174 @@
+import test from 'tape';
+import { elementType } from 'jsx-ast-utils';
+
+import getAccessibleChildText from '../../../src/util/getAccessibleChildText';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+import JSXElementMock from '../../../__mocks__/JSXElementMock';
+
+test('getAccessibleChildText', (t) => {
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [JSXAttributeMock('aria-label', 'foo')],
+    ), elementType),
+    'foo',
+    'returns the aria-label when present',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [JSXAttributeMock('aria-label', 'foo')],
+      [{ type: 'JSXText', value: 'bar' }],
+    ), elementType),
+    'foo',
+    'returns the aria-label instead of children',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [JSXAttributeMock('aria-hidden', 'true')],
+    ), elementType),
+    '',
+    'skips elements with aria-hidden=true',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [{ type: 'JSXText', value: 'bar' }],
+    ), elementType),
+    'bar',
+    'returns literal value for JSXText child',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [JSXElementMock('img', [
+        JSXAttributeMock('src', 'some/path'),
+        JSXAttributeMock('alt', 'a sensible label'),
+      ])],
+    ), elementType),
+    'a sensible label',
+    'returns alt text for img child',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [JSXElementMock('span', [
+        JSXAttributeMock('alt', 'a sensible label'),
+      ])],
+    ), elementType),
+    '',
+    'returns blank when alt tag is used on arbitrary element',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [{ type: 'Literal', value: 'bar' }],
+    ), elementType),
+    'bar',
+    'returns literal value for JSXText child',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [{ type: 'Literal', value: ' bar   ' }],
+    ), elementType),
+    'bar',
+    'returns trimmed literal value for JSXText child',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [{ type: 'Literal', value: 'foo         bar' }],
+    ), elementType),
+    'foo bar',
+    'returns space-collapsed literal value for JSXText child',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [{ type: 'Literal', value: 'foo, bar. baz? foo; bar:' }],
+    ), elementType),
+    'foo bar baz foo bar',
+    'returns punctuation-stripped literal value for JSXText child',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [JSXElementMock(
+        'span',
+        [],
+        [{ type: 'Literal', value: 'bar' }],
+      )],
+    ), elementType),
+    'bar',
+    'returns recursive value for JSXElement child',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [JSXElementMock(
+        'span',
+        [],
+        [JSXElementMock(
+          'span',
+          [JSXAttributeMock('aria-hidden', 'true')],
+        )],
+      )],
+    ), elementType),
+    '',
+    'skips children with aria-hidden-true',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [{ type: 'Literal', value: 'foo' }, { type: 'Literal', value: 'bar' }],
+    ), elementType),
+    'foo bar',
+    'joins multiple children properly - no spacing',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [{ type: 'Literal', value: ' foo ' }, { type: 'Literal', value: ' bar ' }],
+    ), elementType),
+    'foo bar',
+    'joins multiple children properly - with spacing',
+  );
+
+  t.equal(
+    getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [{ type: 'Literal', value: 'foo' }, { type: 'Unknown' }, { type: 'Literal', value: 'bar' }],
+    ), elementType),
+    'foo bar',
+    'skips unknown elements',
+  );
+
+  t.end();
+});

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

@@ -0,0 +1,71 @@
+import test from 'tape';
+
+import getComputedRole from '../../../src/util/getComputedRole';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+
+test('getComputedRole', (t) => {
+  t.equal(
+    getComputedRole(
+      'div',
+      [JSXAttributeMock('role', 'button')],
+    ),
+    'button',
+    'explicit role + valid role -> returns the role',
+  );
+
+  t.equal(
+    getComputedRole(
+      'li',
+      [JSXAttributeMock('role', 'beeswax')],
+    ),
+    'listitem',
+    'explicit role + invalid role + has implicit -> returns the implicit role',
+  );
+
+  t.equal(
+    getComputedRole(
+      'div',
+      [JSXAttributeMock('role', 'beeswax')],
+    ),
+    null,
+    'explicit role + invalid role + lacks implicit -> returns null',
+  );
+
+  t.equal(
+    getComputedRole(
+      'li',
+      [],
+    ),
+    'listitem',
+    'explicit role + no role + has implicit -> returns the implicit role',
+  );
+
+  t.equal(
+    getComputedRole(
+      'div',
+      [],
+    ),
+    null,
+    'explicit role + no role + lacks implicit -> returns null',
+  );
+
+  t.equal(
+    getComputedRole(
+      'li',
+      [JSXAttributeMock('role', 'beeswax')],
+    ),
+    'listitem',
+    'implicit role + has implicit -> returns the implicit role',
+  );
+
+  t.equal(
+    getComputedRole(
+      'div',
+      [],
+    ),
+    null,
+    'implicit role + lacks implicit -> returns null',
+  );
+
+  t.end();
+});

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

@@ -0,0 +1,154 @@
+import test from 'tape';
+
+import getElementType from '../../../src/util/getElementType';
+import JSXElementMock from '../../../__mocks__/JSXElementMock';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+
+test('getElementType', (t) => {
+  t.test('no settings in context', (st) => {
+    const elementType = getElementType({ settings: {} });
+
+    st.equal(
+      elementType(JSXElementMock('input').openingElement),
+      'input',
+      'returns the exact tag name for a DOM element',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('CustomInput').openingElement),
+      'CustomInput',
+      'returns the exact tag name for a custom element',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('toString').openingElement),
+      'toString',
+      'returns the exact tag name for names that are in Object.prototype',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('span', [JSXAttributeMock('as', 'h1')]).openingElement),
+      'span',
+      'returns the default tag name provided',
+    );
+
+    st.end();
+  });
+
+  t.test('components settings in context', (st) => {
+    const elementType = getElementType({
+      settings: {
+        'jsx-a11y': {
+          components: {
+            CustomInput: 'input',
+          },
+        },
+      },
+    });
+
+    st.equal(
+      elementType(JSXElementMock('input').openingElement),
+      'input',
+      'returns the exact tag name for a DOM element',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('CustomInput').openingElement),
+      'input',
+      'returns the mapped tag name for a custom element',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('CityInput').openingElement),
+      'CityInput',
+      'returns the exact tag name for a custom element not in the components map',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('span', [JSXAttributeMock('as', 'h1')]).openingElement),
+      'span',
+      'return the default tag name since not polymorphicPropName was provided',
+    );
+
+    st.end();
+  });
+
+  t.test('polymorphicPropName settings in context', (st) => {
+    const elementType = getElementType({
+      settings: {
+        'jsx-a11y': {
+          polymorphicPropName: 'asChild',
+          components: {
+            CustomButton: 'button',
+          },
+        },
+      },
+    });
+
+    st.equal(
+      elementType(JSXElementMock('span', [JSXAttributeMock('asChild', 'h1')]).openingElement),
+      'h1',
+      'returns the tag name provided by the polymorphic prop, "asChild", defined in the settings',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('CustomButton', [JSXAttributeMock('asChild', 'a')]).openingElement),
+      'a',
+      'returns the tag name provided by the polymorphic prop, "asChild", defined in the settings instead of the component mapping tag',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('CustomButton', [JSXAttributeMock('as', 'a')]).openingElement),
+      'button',
+      'returns the tag name provided by the componnet mapping if the polymorphic prop, "asChild", defined in the settings is not set',
+    );
+
+    st.end();
+  });
+
+  t.test('polymorphicPropName settings and explicitly defined polymorphicAllowList in context', (st) => {
+    const elementType = getElementType({
+      settings: {
+        'jsx-a11y': {
+          polymorphicPropName: 'asChild',
+          polymorphicAllowList: [
+            'Box',
+            'Icon',
+          ],
+          components: {
+            Box: 'div',
+            Icon: 'svg',
+          },
+        },
+      },
+    });
+
+    st.equal(
+      elementType(JSXElementMock('Spinner', [JSXAttributeMock('asChild', 'img')]).openingElement),
+      'Spinner',
+      'does not use the polymorphic prop if polymorphicAllowList is defined, but element is not part of polymorphicAllowList',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('Icon', [JSXAttributeMock('asChild', 'img')]).openingElement),
+      'img',
+      'uses the polymorphic prop if it is in explicitly defined polymorphicAllowList',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('Box', [JSXAttributeMock('asChild', 'span')]).openingElement),
+      'span',
+      'returns the tag name provided by the polymorphic prop, "asChild", defined in the settings instead of the component mapping tag',
+    );
+
+    st.equal(
+      elementType(JSXElementMock('Box', [JSXAttributeMock('as', 'a')]).openingElement),
+      'div',
+      'returns the tag name provided by the component mapping if the polymorphic prop, "asChild", defined in the settings is not set',
+    );
+
+    st.end();
+  });
+
+  t.end();
+});

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

@@ -0,0 +1,35 @@
+import test from 'tape';
+
+import getExplicitRole from '../../../src/util/getExplicitRole';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+
+test('getExplicitRole', (t) => {
+  t.equal(
+    getExplicitRole(
+      'div',
+      [JSXAttributeMock('role', 'button')],
+    ),
+    'button',
+    'valid role returns the role',
+  );
+
+  t.equal(
+    getExplicitRole(
+      'div',
+      [JSXAttributeMock('role', 'beeswax')],
+    ),
+    null,
+    'invalid role returns null',
+  );
+
+  t.equal(
+    getExplicitRole(
+      'div',
+      [],
+    ),
+    null,
+    'no role returns null',
+  );
+
+  t.end();
+});

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

@@ -0,0 +1,25 @@
+import test from 'tape';
+
+import getImplicitRole from '../../../src/util/getImplicitRole';
+
+test('getImplicitRole', (t) => {
+  t.equal(
+    getImplicitRole(
+      'li',
+      [],
+    ),
+    'listitem',
+    'has implicit, returns implicit role',
+  );
+
+  t.equal(
+    getImplicitRole(
+      'div',
+      [],
+    ),
+    null,
+    'lacks implicit, returns null',
+  );
+
+  t.end();
+});

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

@@ -0,0 +1,33 @@
+import test from 'tape';
+
+import getSuggestion from '../../../src/util/getSuggestion';
+
+test('spell check suggestion API', (t) => {
+  t.deepEqual([], getSuggestion('foo'), 'returns no suggestions given empty word and no dictionary');
+
+  t.deepEqual(
+    getSuggestion('foo'),
+    [],
+    'returns no suggestions given real word and no dictionary',
+  );
+
+  t.deepEqual(
+    getSuggestion('fo', ['foo', 'bar', 'baz']),
+    ['foo'],
+    'returns correct suggestion given real word and a dictionary',
+  );
+
+  t.deepEqual(
+    getSuggestion('theer', ['there', 'their', 'foo', 'bar']),
+    ['there', 'their'],
+    'returns multiple correct suggestions given real word and a dictionary',
+  );
+
+  t.deepEqual(
+    getSuggestion('theer', ['there', 'their', 'foo', 'bar'], 1),
+    ['there'],
+    'returns correct # of suggestions given the limit argument',
+  );
+
+  t.end();
+});