@arcaauth/eslint-plugin-jsx-a11y 6.10.2

package/__mocks__/genInteractives.js

@@ -0,0 +1,218 @@
+/**
+ * @flow
+ */
+
+import { dom, roles } from 'aria-query';
+import includes from 'array-includes';
+import fromEntries from 'object.fromentries';
+
+import JSXAttributeMock from './JSXAttributeMock';
+import JSXElementMock from './JSXElementMock';
+
+import type { JSXAttributeMockType } from './JSXAttributeMock';
+import type { JSXElementMockType } from './JSXElementMock';
+
+const domElements = dom.keys();
+const roleNames = roles.keys();
+
+const interactiveElementsMap = {
+  a: [{ prop: 'href', value: '#' }],
+  area: [{ prop: 'href', value: '#' }],
+  audio: [],
+  button: [],
+  canvas: [],
+  datalist: [],
+  embed: [],
+  input: [],
+  'input[type="button"]': [{ prop: 'type', value: 'button' }],
+  'input[type="checkbox"]': [{ prop: 'type', value: 'checkbox' }],
+  'input[type="color"]': [{ prop: 'type', value: 'color' }],
+  'input[type="date"]': [{ prop: 'type', value: 'date' }],
+  'input[type="datetime"]': [{ prop: 'type', value: 'datetime' }],
+  'input[type="email"]': [{ prop: 'type', value: 'email' }],
+  'input[type="file"]': [{ prop: 'type', value: 'file' }],
+  'input[type="image"]': [{ prop: 'type', value: 'image' }],
+  'input[type="month"]': [{ prop: 'type', value: 'month' }],
+  'input[type="number"]': [{ prop: 'type', value: 'number' }],
+  'input[type="password"]': [{ prop: 'type', value: 'password' }],
+  'input[type="radio"]': [{ prop: 'type', value: 'radio' }],
+  'input[type="range"]': [{ prop: 'type', value: 'range' }],
+  'input[type="reset"]': [{ prop: 'type', value: 'reset' }],
+  'input[type="search"]': [{ prop: 'type', value: 'search' }],
+  'input[type="submit"]': [{ prop: 'type', value: 'submit' }],
+  'input[type="tel"]': [{ prop: 'type', value: 'tel' }],
+  'input[type="text"]': [{ prop: 'type', value: 'text' }],
+  'input[type="time"]': [{ prop: 'type', value: 'time' }],
+  'input[type="url"]': [{ prop: 'type', value: 'url' }],
+  'input[type="week"]': [{ prop: 'type', value: 'week' }],
+  menuitem: [],
+  option: [],
+  select: [],
+  summary: [],
+  // Whereas ARIA makes a distinction between cell and gridcell, the AXObject
+  // treats them both as CellRole and since gridcell is interactive, we consider
+  // cell interactive as well.
+  td: [],
+  th: [],
+  tr: [],
+  textarea: [],
+  video: [],
+};
+
+const nonInteractiveElementsMap: {[string]: Array<{[string]: string}>} = {
+  abbr: [],
+  address: [],
+  article: [],
+  aside: [],
+  blockquote: [],
+  br: [],
+  caption: [],
+  code: [],
+  dd: [],
+  del: [],
+  details: [],
+  dfn: [],
+  dialog: [],
+  dir: [],
+  dl: [],
+  dt: [],
+  em: [],
+  fieldset: [],
+  figcaption: [],
+  figure: [],
+  footer: [],
+  form: [],
+  h1: [],
+  h2: [],
+  h3: [],
+  h4: [],
+  h5: [],
+  h6: [],
+  hr: [],
+  html: [],
+  iframe: [],
+  img: [],
+  ins: [],
+  label: [],
+  legend: [],
+  li: [],
+  main: [],
+  mark: [],
+  marquee: [],
+  menu: [],
+  meter: [],
+  nav: [],
+  ol: [],
+  optgroup: [],
+  output: [],
+  p: [],
+  pre: [],
+  progress: [],
+  ruby: [],
+  'section[aria-label]': [{ prop: 'aria-label' }],
+  'section[aria-labelledby]': [{ prop: 'aria-labelledby' }],
+  strong: [],
+  sub: [],
+  sup: [],
+  table: [],
+  tbody: [],
+  tfoot: [],
+  thead: [],
+  time: [],
+  ul: [],
+};
+
+const indeterminantInteractiveElementsMap: { [key: string]: Array<any> } = fromEntries(domElements.map((name) => [name, []]));
+
+Object.keys(interactiveElementsMap)
+  .concat(Object.keys(nonInteractiveElementsMap))
+  .forEach((name) => delete indeterminantInteractiveElementsMap[name]);
+
+const abstractRoles = roleNames.filter((role) => roles.get(role).abstract);
+
+const nonAbstractRoles = roleNames.filter((role) => !roles.get(role).abstract);
+
+const interactiveRoles = []
+  .concat(
+    roleNames,
+    // 'toolbar' does not descend from widget, but it does support
+    // aria-activedescendant, thus in practice we treat it as a widget.
+    'toolbar',
+  )
+  .filter((role) => (
+    !roles.get(role).abstract
+    && roles.get(role).superClass.some((klasses) => includes(klasses, 'widget'))
+  ));
+
+const nonInteractiveRoles = roleNames
+  .filter((role) => (
+    !roles.get(role).abstract
+    && !roles.get(role).superClass.some((klasses) => includes(klasses, 'widget'))
+
+    // 'toolbar' does not descend from widget, but it does support
+    // aria-activedescendant, thus in practice we treat it as a widget.
+    && !includes(['toolbar'], role)
+  ));
+
+export function genElementSymbol(openingElement: Object): string {
+  return (
+    openingElement.name.name + (openingElement.attributes.length > 0
+      ? `${openingElement.attributes.map((attr) => `[${attr.name.name}="${attr.value.value}"]`).join('')}`
+      : ''
+    )
+  );
+}
+
+export function genInteractiveElements(): Array<JSXElementMockType> {
+  return Object.keys(interactiveElementsMap).map((elementSymbol: string): JSXElementMockType => {
+    const bracketIndex = elementSymbol.indexOf('[');
+    let name = elementSymbol;
+    if (bracketIndex > -1) {
+      name = elementSymbol.slice(0, bracketIndex);
+    }
+    const attributes = interactiveElementsMap[elementSymbol].map(({ prop, value }) => JSXAttributeMock(prop, value));
+    return JSXElementMock(name, attributes);
+  });
+}
+
+export function genInteractiveRoleElements(): Array<JSXElementMockType> {
+  return interactiveRoles.concat('button article', 'fakerole button article').map((value): JSXElementMockType => JSXElementMock(
+    'div',
+    [JSXAttributeMock('role', value)],
+  ));
+}
+
+export function genNonInteractiveElements(): Array<JSXElementMockType> {
+  return Object.keys(nonInteractiveElementsMap).map((elementSymbol): JSXElementMockType => {
+    const bracketIndex = elementSymbol.indexOf('[');
+    let name = elementSymbol;
+    if (bracketIndex > -1) {
+      name = elementSymbol.slice(0, bracketIndex);
+    }
+    const attributes = nonInteractiveElementsMap[elementSymbol].map(({ prop, value }) => JSXAttributeMock(prop, value));
+    return JSXElementMock(name, attributes);
+  });
+}
+
+export function genNonInteractiveRoleElements(): Array<JSXElementMockType> {
+  return [
+    ...nonInteractiveRoles,
+    'article button',
+    'fakerole article button',
+  ].map((value) => JSXElementMock('div', [JSXAttributeMock('role', value)]));
+}
+
+export function genAbstractRoleElements(): Array<JSXElementMockType> {
+  return abstractRoles.map((value) => JSXElementMock('div', [JSXAttributeMock('role', value)]));
+}
+
+export function genNonAbstractRoleElements(): Array<JSXElementMockType> {
+  return nonAbstractRoles.map((value) => JSXElementMock('div', [JSXAttributeMock('role', value)]));
+}
+
+export function genIndeterminantInteractiveElements(): Array<JSXElementMockType> {
+  return Object.keys(indeterminantInteractiveElementsMap).map((name) => {
+    const attributes = indeterminantInteractiveElementsMap[name].map(({ prop, value }): JSXAttributeMockType => JSXAttributeMock(prop, value));
+    return JSXElementMock(name, attributes);
+  });
+}

package/__tests__/__util__/axeMapping.js

@@ -0,0 +1,6 @@
+/* eslint-disable import/prefer-default-export, no-underscore-dangle */
+import * as axe from 'axe-core';
+
+export function axeFailMessage(checkId, data) {
+  return axe.utils.getCheckMessage(checkId, 'fail', data);
+}

package/__tests__/__util__/helpers/getESLintCoreRule.js

@@ -0,0 +1,9 @@
+import { version } from 'eslint/package.json';
+import semver from 'semver';
+
+const isESLintV8 = semver.major(version) >= 8;
+
+// eslint-disable-next-line global-require, import/no-dynamic-require, import/no-unresolved
+const getESLintCoreRule = (ruleId) => (isESLintV8 ? require('eslint/use-at-your-own-risk').builtinRules.get(ruleId) : require(`eslint/lib/rules/${ruleId}`));
+
+export default getESLintCoreRule;

package/__tests__/__util__/helpers/parsers.js

@@ -0,0 +1,186 @@
+import path from 'path';
+import semver from 'semver';
+import entries from 'object.entries';
+import { version } from 'eslint/package.json';
+import flatMap from 'array.prototype.flatmap';
+
+let tsParserVersion;
+try {
+  // eslint-disable-next-line import/no-unresolved, global-require
+  tsParserVersion = require('@typescript-eslint/parser/package.json').version;
+} catch (e) { /**/ }
+
+const disableNewTS = semver.satisfies(tsParserVersion, '>= 4.1') // this rule is not useful on v4.1+ of the TS parser
+  ? (x) => ({ ...x, features: [].concat(x.features, 'no-ts-new') })
+  : (x) => x;
+
+function minEcmaVersion(features, parserOptions) {
+  const minEcmaVersionForFeatures = {
+    'class fields': 2022,
+    'optional chaining': 2020,
+    'nullish coalescing': 2020,
+  };
+  const result = Math.max(
+    ...[].concat(
+      (parserOptions && parserOptions.ecmaVersion) || [],
+      flatMap(entries(minEcmaVersionForFeatures), (entry) => {
+        const f = entry[0];
+        const y = entry[1];
+        return features.has(f) ? y : [];
+      }),
+    ).map((y) => (y > 5 && y < 2015 ? y + 2009 : y)), // normalize editions to years
+  );
+  return Number.isFinite(result) ? result : undefined;
+}
+
+const NODE_MODULES = '../../node_modules';
+
+const parsers = {
+  BABEL_ESLINT: path.join(__dirname, NODE_MODULES, 'babel-eslint'),
+  '@BABEL_ESLINT': path.join(__dirname, NODE_MODULES, '@babel/eslint-parser'),
+  TYPESCRIPT_ESLINT: path.join(__dirname, NODE_MODULES, 'typescript-eslint-parser'),
+  '@TYPESCRIPT_ESLINT': path.join(__dirname, NODE_MODULES, '@typescript-eslint/parser'),
+  disableNewTS,
+  babelParserOptions: function parserOptions(test, features) {
+    return {
+      ...test.parserOptions,
+      requireConfigFile: false,
+      babelOptions: {
+        presets: [
+          '@babel/preset-react',
+        ],
+        plugins: [
+          '@babel/plugin-syntax-do-expressions',
+          '@babel/plugin-syntax-function-bind',
+          ['@babel/plugin-syntax-decorators', { legacy: true }],
+        ],
+        parserOpts: {
+          allowSuperOutsideMethod: false,
+          allowReturnOutsideFunction: false,
+        },
+      },
+      ecmaFeatures: {
+
+        ...test.parserOptions && test.parserOptions.ecmaFeatures,
+        jsx: true,
+        modules: true,
+        legacyDecorators: features.has('decorators'),
+      },
+    };
+  },
+  all: function all(tests) {
+    const t = flatMap(tests, (test) => {
+      /* eslint no-param-reassign: 0 */
+      if (typeof test === 'string') {
+        test = { code: test };
+      }
+      if ('parser' in test) {
+        delete test.features;
+        return test;
+      }
+      const features = new Set([].concat(test.features || []));
+      delete test.features;
+
+      const es = minEcmaVersion(features, test.parserOptions);
+
+      function addComment(testObject, parser) {
+        const extras = [].concat(
+          `features: [${Array.from(features).join(',')}]`,
+          `parser: ${parser}`,
+          testObject.parserOptions ? `parserOptions: ${JSON.stringify(testObject.parserOptions)}` : [],
+          testObject.options ? `options: ${JSON.stringify(testObject.options)}` : [],
+          testObject.settings ? `settings: ${JSON.stringify(testObject.settings)}` : [],
+        );
+
+        const extraComment = `\n// ${extras.join(', ')}`;
+
+        // Augment expected fix code output with extraComment
+        const nextCode = { code: testObject.code + extraComment };
+        const nextOutput = testObject.output && { output: testObject.output + extraComment };
+
+        // Augment expected suggestion outputs with extraComment
+        // `errors` may be a number (expected number of errors) or an array of
+        // error objects.
+        const nextErrors = testObject.errors
+          && typeof testObject.errors !== 'number'
+          && {
+            errors: testObject.errors.map(
+              (errorObject) => {
+                const nextSuggestions = errorObject.suggestions && {
+                  suggestions: errorObject.suggestions.map((suggestion) => ({ ...suggestion, output: suggestion.output + extraComment })),
+                };
+
+                return { ...errorObject, ...nextSuggestions };
+              },
+            ),
+          };
+
+        return {
+
+          ...testObject,
+          ...nextCode,
+          ...nextOutput,
+          ...nextErrors,
+        };
+      }
+
+      const skipBase = (features.has('class fields') && semver.satisfies(version, '< 8'))
+        || (es >= 2020 && semver.satisfies(version, '< 6'))
+        || features.has('no-default')
+        || features.has('bind operator')
+        || features.has('do expressions')
+        || features.has('decorators')
+        || features.has('flow')
+        || features.has('ts')
+        || features.has('types')
+        || (features.has('fragment') && semver.satisfies(version, '< 5'));
+
+      const skipBabel = features.has('no-babel');
+      const skipOldBabel = skipBabel
+        || features.has('no-babel-old')
+        || features.has('optional chaining')
+        || semver.satisfies(version, '>= 8');
+      const skipNewBabel = skipBabel
+        || features.has('no-babel-new')
+        || !semver.satisfies(version, '^7.5.0') // require('@babel/eslint-parser/package.json').peerDependencies.eslint
+        || features.has('flow')
+        || features.has('types')
+        || features.has('ts');
+      const skipTS = semver.satisfies(version, '<= 5') // TODO: make these pass on eslint 5
+        || features.has('no-ts')
+        || features.has('flow')
+        || features.has('jsx namespace')
+        || features.has('bind operator')
+        || features.has('do expressions');
+      const tsOld = !skipTS && !features.has('no-ts-old');
+      const tsNew = !skipTS && !features.has('no-ts-new');
+
+      return [].concat(
+        skipBase ? [] : addComment(
+          {
+            ...test,
+            ...typeof es === 'number' && {
+              parserOptions: { ...test.parserOptions, ecmaVersion: es },
+            },
+          },
+          'default',
+        ),
+        skipOldBabel ? [] : addComment({
+          ...test,
+          parser: parsers.BABEL_ESLINT,
+          parserOptions: parsers.babelParserOptions(test, features),
+        }, 'babel-eslint'),
+        skipNewBabel ? [] : addComment({
+          ...test,
+          parser: parsers['@BABEL_ESLINT'],
+          parserOptions: parsers.babelParserOptions(test, features),
+        }, '@babel/eslint-parser'),
+        tsOld ? addComment({ ...test, parser: parsers.TYPESCRIPT_ESLINT }, 'typescript-eslint') : [],
+        tsNew ? addComment({ ...test, parser: parsers['@TYPESCRIPT_ESLINT'] }, '@typescript-eslint/parser') : [],
+      );
+    });
+    return t;
+  },
+};
+
+export default parsers;

package/__tests__/__util__/parserOptionsMapper.js

@@ -0,0 +1,53 @@
+import { version as eslintVersion } from 'eslint/package.json';
+import semver from 'semver';
+
+const usingLegacy = semver.major(eslintVersion) < 9;
+
+const defaultParserOptions = {
+  ecmaFeatures: {
+    experimentalObjectRestSpread: true,
+    jsx: true,
+  },
+};
+
+const defaultLegacyParserOptions = {
+  ...defaultParserOptions,
+  ecmaVersion: 2018,
+};
+
+const defaultLanguageOptions = {
+  ecmaVersion: 'latest',
+  parserOptions: {
+    ...defaultParserOptions,
+  },
+};
+
+export default function parserOptionsMapper({
+  code,
+  errors,
+  options = [],
+  languageOptions = {},
+  settings = {},
+}) {
+  return usingLegacy
+    ? {
+      code,
+      errors,
+      options,
+      parserOptions: {
+        ...defaultLegacyParserOptions,
+        ...languageOptions,
+      },
+      settings,
+    }
+    : {
+      code,
+      errors,
+      options,
+      languageOptions: {
+        ...defaultLanguageOptions,
+        ...languageOptions,
+      },
+      settings,
+    };
+}

package/__tests__/__util__/ruleOptionsMapperFactory.js

@@ -0,0 +1,33 @@
+/**
+ * @flow
+ */
+
+import entries from 'object.entries';
+import flatMap from 'array.prototype.flatmap';
+import fromEntries from 'object.fromentries';
+
+type ESLintTestRunnerTestCase = {
+  code: string,
+  errors: ?Array<{ message: string, type: string }>,
+  options: ?Array<mixed>,
+  parserOptions: ?Array<mixed>,
+  settings?: {[string]: mixed},
+};
+
+type RuleOptionsMapperFactoryType = (
+  params: ESLintTestRunnerTestCase
+) => ESLintTestRunnerTestCase;
+
+export default function ruleOptionsMapperFactory(ruleOptions: Array<mixed> = []): RuleOptionsMapperFactoryType {
+  // eslint-disable-next-line
+  return ({ code, errors, options, parserOptions, settings }: ESLintTestRunnerTestCase): ESLintTestRunnerTestCase => {
+    return {
+      code,
+      errors,
+      // Flatten the array of objects in an array of one object.
+      options: [fromEntries(flatMap((options || []).concat(ruleOptions), (item) => entries(item)))],
+      parserOptions,
+      settings,
+    };
+  };
+}

package/__tests__/index-test.js

@@ -0,0 +1,40 @@
+/* eslint global-require: 0 */
+
+import fs from 'fs';
+import path from 'path';
+import test from 'tape';
+
+import plugin from '../src';
+
+const rules = fs.readdirSync(path.resolve(__dirname, '../src/rules/'))
+  .map((f) => path.basename(f, '.js'));
+
+test('all rule files should be exported by the plugin', (t) => {
+  rules.forEach((ruleName) => {
+    t.equal(
+      plugin.rules[ruleName],
+      require(path.join('../src/rules', ruleName)), // eslint-disable-line import/no-dynamic-require
+      `exports ${ruleName}`,
+    );
+  });
+
+  t.end();
+});
+
+test('configurations', (t) => {
+  t.notEqual(plugin.configs.recommended, undefined, 'exports a \'recommended\' configuration');
+
+  t.end();
+});
+
+test('schemas', (t) => {
+  rules.forEach((ruleName) => {
+    const rule = require(path.join('../src/rules', ruleName)); // eslint-disable-line import/no-dynamic-require
+    const schema = rule.meta && rule.meta.schema && rule.meta.schema[0];
+    const { type } = schema;
+
+    t.equal(type, 'object', `${ruleName} exports a schema with type object`);
+  });
+
+  t.end();
+});

package/__tests__/src/rules/accessible-emoji-test.js

@@ -0,0 +1,66 @@
+/**
+ * @fileoverview Enforce <marquee> elements are not used.
+ * @author Ethan Cohen
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import rule from '../../../src/rules/accessible-emoji';
+import parsers from '../../__util__/helpers/parsers';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message: 'Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby.',
+  type: 'JSXOpeningElement',
+};
+
+ruleTester.run('accessible-emoji', rule, {
+  valid: parsers.all([].concat(
+    { code: '<div />;' },
+    { code: '<span />' },
+    { code: '<span>No emoji here!</span>' },
+    { code: '<span role="img" aria-label="Panda face">🐼</span>' },
+    { code: '<span role="img" aria-label="Snowman">&#9731;</span>' },
+    { code: '<span role="img" aria-labelledby="id1">🐼</span>' },
+    { code: '<span role="img" aria-labelledby="id1">&#9731;</span>' },
+    { code: '<span role="img" aria-labelledby="id1" aria-label="Snowman">&#9731;</span>' },
+    { code: '<span>{props.emoji}</span>' },
+    { code: '<span aria-hidden>{props.emoji}</span>' },
+    { code: '<span aria-hidden="true">🐼</span>' },
+    { code: '<span aria-hidden>🐼</span>' },
+    { code: '<div aria-hidden="true">🐼</div>' },
+    { code: '<input type="hidden">🐼</input>' },
+    {
+      code: '<CustomInput type="hidden">🐼</CustomInput>',
+      settings: { 'jsx-a11y': { components: { CustomInput: 'input' } } },
+    },
+    {
+      code: '<Box as="input" type="hidden">🐼</Box>',
+      settings: { 'jsx-a11y': { polymorphicPropName: 'as' } },
+    },
+  )).map(parserOptionsMapper),
+  invalid: parsers.all([].concat(
+    { code: '<span>🐼</span>', errors: [expectedError] },
+    { code: '<span>foo🐼bar</span>', errors: [expectedError] },
+    { code: '<span>foo 🐼 bar</span>', errors: [expectedError] },
+    { code: '<i role="img" aria-label="Panda face">🐼</i>', errors: [expectedError] },
+    { code: '<i role="img" aria-labelledby="id1">🐼</i>', errors: [expectedError] },
+    { code: '<Foo>🐼</Foo>', errors: [expectedError] },
+    { code: '<span aria-hidden="false">🐼</span>', errors: [expectedError] },
+    { code: '<CustomInput type="hidden">🐼</CustomInput>', errors: [expectedError] },
+    {
+      code: '<Box as="span">🐼</Box>',
+      settings: { 'jsx-a11y': { polymorphicPropName: 'as' } },
+      errors: [expectedError],
+    },
+  )).map(parserOptionsMapper),
+});