File Manager

Current Path: Root / node_modules/ eslint-plugin-jsx-a11y/ __tests__/ src/ rules

Parent Directory

Name	Size	Last Modified
[F]accessible-emoji-test.js Edit	2.43 KB	2022-10-08 17:28:24
[F]alt-text-test.js Edit	12.65 KB	2022-10-08 17:28:25
[F]anchor-has-content-test.js Edit	1.62 KB	2022-10-08 17:28:25
[F]anchor-is-valid-test.js Edit	27.10 KB	2022-10-08 17:28:25
[F]aria-activedescendant-has-tabindex-test.js Edit	2.64 KB	2022-10-08 17:28:25
[F]aria-props-test.js Edit	2.14 KB	2022-10-08 17:28:25
[F]aria-proptypes-test.js Edit	12.29 KB	2022-10-08 17:28:26
[F]aria-role-test.js Edit	3.86 KB	2022-10-08 17:28:26
[F]aria-unsupported-elements-test.js Edit	2.38 KB	2022-10-08 17:28:26
[F]autocomplete-valid-test.js Edit	3.41 KB	2022-10-08 17:28:26
[F]click-events-have-key-events-test.js Edit	3.57 KB	2022-10-08 17:28:27
[F]control-has-associated-label-test.js Edit	13.55 KB	2022-10-08 17:28:27
[F]heading-has-content-test.js Edit	3.17 KB	2022-10-08 17:28:28
[F]html-has-lang-test.js Edit	1.46 KB	2022-10-08 17:28:28
[F]iframe-has-title-test.js Edit	1.93 KB	2022-10-08 17:28:28
[F]img-redundant-alt-test.js Edit	5.15 KB	2022-10-08 17:28:28
[F]interactive-supports-focus-test.js Edit	9.72 KB	2022-10-08 17:28:29
[F]label-has-associated-control-test.js Edit	11.35 KB	2022-10-08 17:28:30
[F]label-has-for-test.js Edit	10.39 KB	2022-10-08 17:28:31
[F]lang-test.js Edit	1.73 KB	2022-10-08 17:28:31
[F]media-has-caption-test.js Edit	5.68 KB	2022-10-08 17:28:31
[F]mouse-events-have-key-events-test.js Edit	2.88 KB	2022-10-08 17:28:31
[F]no-access-key-test.js Edit	1.90 KB	2022-10-08 17:28:31
[F]no-autofocus-test.js Edit	2.24 KB	2022-10-08 17:28:31
[F]no-distracting-elements-test.js Edit	1.69 KB	2022-10-08 17:28:31
[F]no-interactive-element-to-noninteractive-role-test.js Edit	17.86 KB	2022-10-08 17:28:31
[F]no-noninteractive-element-interactions-test.js Edit	26.78 KB	2022-10-08 17:28:31
[F]no-noninteractive-element-to-interactive-role-test.js Edit	22.18 KB	2022-10-08 17:28:31
[F]no-noninteractive-tabindex-test.js Edit	4.12 KB	2022-10-08 17:28:31
[F]no-onchange-test.js Edit	2.12 KB	2022-10-08 17:28:31
[F]no-redundant-roles-test.js Edit	2.85 KB	2022-10-08 17:28:31
[F]no-static-element-interactions-test.js Edit	25.14 KB	2022-10-08 17:28:32
[F]role-has-required-aria-props-test.js Edit	4.26 KB	2022-10-08 17:28:32
[F]role-supports-aria-props-test.js Edit	23.12 KB	2022-10-08 17:28:32
[F]scope-test.js Edit	1.44 KB	2022-10-08 17:28:32
[F]tabindex-no-positive-test.js Edit	1.92 KB	2022-10-08 17:28:32

Editing: aria-role-test.js

/**
 * @fileoverview Enforce aria role attribute is valid.
 * @author Ethan Cohen
 */

// -----------------------------------------------------------------------------
// Requirements
// -----------------------------------------------------------------------------

import { roles } from 'aria-query';
import { RuleTester } from 'eslint';
import parserOptionsMapper from '../../__util__/parserOptionsMapper';
import rule from '../../../src/rules/aria-role';

// -----------------------------------------------------------------------------
// Tests
// -----------------------------------------------------------------------------

const ruleTester = new RuleTester();

const errorMessage = {
  message: 'Elements with ARIA roles must use a valid, non-abstract ARIA role.',
  type: 'JSXAttribute',
};

const roleKeys = [...roles.keys()];

const validRoles = roleKeys.filter((role) => roles.get(role).abstract === false);
const invalidRoles = roleKeys.filter((role) => roles.get(role).abstract === true);

const createTests = (roleNames) => roleNames.map((role) => ({
  code: `<div role="${role.toLowerCase()}" />`,
}));

const validTests = createTests(validRoles);
const invalidTests = createTests(invalidRoles).map((test) => {
  const invalidTest = { ...test };
  invalidTest.errors = [errorMessage];
  return invalidTest;
});

const allowedInvalidRoles = [{
  allowedInvalidRoles: ['invalid-role', 'other-invalid-role'],
}];

const ignoreNonDOMSchema = [{
  ignoreNonDOM: true,
}];

const customDivSettings = {
  'jsx-a11y': {
    components: {
      Div: 'div',
    },
  },
};

ruleTester.run('aria-role', rule, {
  valid: [
    // Variables should pass, as we are only testing literals.
    { code: '<div />' },
    { code: '<div></div>' },
    { code: '<div role={role} />' },
    { code: '<div role={role || "button"} />' },
    { code: '<div role={role || "foobar"} />' },
    { code: '<div role="tabpanel row" />' },
    { code: '<div role="switch" />' },
    { code: '<div role="doc-abstract" />' },
    { code: '<div role="doc-appendix doc-bibliography" />' },
    { code: '<Bar baz />' },
    { code: '<img role="invalid-role" />', options: allowedInvalidRoles },
    { code: '<img role="invalid-role tabpanel" />', options: allowedInvalidRoles },
    { code: '<img role="invalid-role other-invalid-role" />', options: allowedInvalidRoles },
    { code: '<Foo role="bar" />', options: ignoreNonDOMSchema },
    { code: '<fakeDOM role="bar" />', options: ignoreNonDOMSchema },
    { code: '<img role="presentation" />', options: ignoreNonDOMSchema },
    {
      code: '<Div role="button" />',
      errors: [errorMessage],
      settings: customDivSettings,
    },
  ].concat(validTests).map(parserOptionsMapper),

invalid: [
    { code: '<div role="foobar" />', errors: [errorMessage] },
    { code: '<div role="datepicker"></div>', errors: [errorMessage] },
    { code: '<div role="range"></div>', errors: [errorMessage] },
    { code: '<div role="Button"></div>', errors: [errorMessage] },
    { code: '<div role=""></div>', errors: [errorMessage] },
    { code: '<div role="tabpanel row foobar"></div>', errors: [errorMessage] },
    { code: '<div role="tabpanel row range"></div>', errors: [errorMessage] },
    { code: '<div role="doc-endnotes range"></div>', errors: [errorMessage] },
    { code: '<div role />', errors: [errorMessage] },
    { code: '<div role="unknown-invalid-role" />', errors: [errorMessage], options: allowedInvalidRoles },
    { code: '<div role={null}></div>', errors: [errorMessage] },
    { code: '<Foo role="datepicker" />', errors: [errorMessage] },
    { code: '<Foo role="Button" />', errors: [errorMessage] },
    { code: '<Div role="Button" />', errors: [errorMessage], settings: customDivSettings },
    {
      code: '<Div role="Button" />',
      errors: [errorMessage],
      options: ignoreNonDOMSchema,
      settings: customDivSettings,
    },
  ].concat(invalidTests).map(parserOptionsMapper),
});

Cancel

File Explorer

Navigation

File Manager

Editing: aria-role-test.js

File Explorer

Navigation

File Manager

Editing: aria-role-test.js

Confirm Deletion

Rename Item

Change Permissions (Chmod)