| 1 | /**
|
|---|
| 2 | * @fileoverview Enforce explicit role property is not the
|
|---|
| 3 | * same as implicit default role property on element.
|
|---|
| 4 | * @author Ethan Cohen <@evcohen>
|
|---|
| 5 | */
|
|---|
| 6 |
|
|---|
| 7 | // -----------------------------------------------------------------------------
|
|---|
| 8 | // Requirements
|
|---|
| 9 | // -----------------------------------------------------------------------------
|
|---|
| 10 |
|
|---|
| 11 | import { RuleTester } from 'eslint';
|
|---|
| 12 | import parserOptionsMapper from '../../__util__/parserOptionsMapper';
|
|---|
| 13 | import parsers from '../../__util__/helpers/parsers';
|
|---|
| 14 | import rule from '../../../src/rules/no-redundant-roles';
|
|---|
| 15 | import ruleOptionsMapperFactory from '../../__util__/ruleOptionsMapperFactory';
|
|---|
| 16 |
|
|---|
| 17 | // -----------------------------------------------------------------------------
|
|---|
| 18 | // Tests
|
|---|
| 19 | // -----------------------------------------------------------------------------
|
|---|
| 20 |
|
|---|
| 21 | const ruleTester = new RuleTester();
|
|---|
| 22 |
|
|---|
| 23 | const expectedError = (element, implicitRole) => ({
|
|---|
| 24 | message: `The element ${element} has an implicit role of ${implicitRole}. Defining this explicitly is redundant and should be avoided.`,
|
|---|
| 25 | type: 'JSXOpeningElement',
|
|---|
| 26 | });
|
|---|
| 27 |
|
|---|
| 28 | const ruleName = 'jsx-a11y/no-redundant-roles';
|
|---|
| 29 |
|
|---|
| 30 | const componentsSettings = {
|
|---|
| 31 | 'jsx-a11y': {
|
|---|
| 32 | components: {
|
|---|
| 33 | Button: 'button',
|
|---|
| 34 | },
|
|---|
| 35 | },
|
|---|
| 36 | };
|
|---|
| 37 |
|
|---|
| 38 | const alwaysValid = [
|
|---|
| 39 | { code: '<div />;' },
|
|---|
| 40 | { code: '<button role="main" />' },
|
|---|
| 41 | { code: '<MyComponent role="button" />' },
|
|---|
| 42 | { code: '<button role={`${foo}button`} />' },
|
|---|
| 43 | { code: '<Button role={`${foo}button`} />', settings: componentsSettings },
|
|---|
| 44 | ];
|
|---|
| 45 |
|
|---|
| 46 | const neverValid = [
|
|---|
| 47 | { code: '<button role="button" />', errors: [expectedError('button', 'button')] },
|
|---|
| 48 | { code: '<body role="DOCUMENT" />', errors: [expectedError('body', 'document')] },
|
|---|
| 49 | { code: '<Button role="button" />', settings: componentsSettings, errors: [expectedError('button', 'button')] },
|
|---|
| 50 | ];
|
|---|
| 51 |
|
|---|
| 52 | ruleTester.run(`${ruleName}:recommended`, rule, {
|
|---|
| 53 | valid: parsers.all([].concat(
|
|---|
| 54 | ...alwaysValid,
|
|---|
| 55 | { code: '<nav role="navigation" />' },
|
|---|
| 56 | ))
|
|---|
| 57 | .map(parserOptionsMapper),
|
|---|
| 58 | invalid: parsers.all([].concat(
|
|---|
| 59 | neverValid,
|
|---|
| 60 | ))
|
|---|
| 61 | .map(parserOptionsMapper),
|
|---|
| 62 | });
|
|---|
| 63 |
|
|---|
| 64 | const noNavExceptionsOptions = { nav: [] };
|
|---|
| 65 | const listException = { ul: ['list'], ol: ['list'] };
|
|---|
| 66 |
|
|---|
| 67 | ruleTester.run(`${ruleName}:recommended`, rule, {
|
|---|
| 68 | valid: parsers.all([].concat(
|
|---|
| 69 | alwaysValid
|
|---|
| 70 | .map(ruleOptionsMapperFactory(noNavExceptionsOptions)),
|
|---|
| 71 | ))
|
|---|
| 72 | .map(parserOptionsMapper),
|
|---|
| 73 | invalid: parsers.all([].concat(
|
|---|
| 74 | ...neverValid,
|
|---|
| 75 | { code: '<nav role="navigation" />', errors: [expectedError('nav', 'navigation')] },
|
|---|
| 76 | ))
|
|---|
| 77 | .map(ruleOptionsMapperFactory(noNavExceptionsOptions))
|
|---|
| 78 | .map(parserOptionsMapper),
|
|---|
| 79 | });
|
|---|
| 80 |
|
|---|
| 81 | ruleTester.run(`${ruleName}:recommended (valid list role override)`, rule, {
|
|---|
| 82 | valid: parsers.all([].concat(
|
|---|
| 83 | { code: '<ul role="list" />' },
|
|---|
| 84 | { code: '<ol role="list" />' },
|
|---|
| 85 | { code: '<dl role="list" />' },
|
|---|
| 86 | { code: '<img src="example.svg" role="img" />' },
|
|---|
| 87 | { code: '<svg role="img" />' },
|
|---|
| 88 | ))
|
|---|
| 89 | .map(ruleOptionsMapperFactory(listException))
|
|---|
| 90 | .map(parserOptionsMapper),
|
|---|
| 91 | invalid: parsers.all([].concat(
|
|---|
| 92 | { code: '<ul role="list" />', errors: [expectedError('ul', 'list')] },
|
|---|
| 93 | { code: '<ol role="list" />', errors: [expectedError('ol', 'list')] },
|
|---|
| 94 | { code: '<img role="img" />', errors: [expectedError('img', 'img')] },
|
|---|
| 95 | { code: '<img src={someVariable} role="img" />', errors: [expectedError('img', 'img')] },
|
|---|
| 96 | ))
|
|---|
| 97 | .map(parserOptionsMapper),
|
|---|
| 98 | });
|
|---|
