diff --git a/.eslintrc b/.eslintrc index a32ded5a9..aeb58e1f6 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,31 +1,51 @@ { - extends: [ + "extends": [ "airbnb-base", "plugin:flowtype/recommended" ], - parser: "@babel/eslint-parser", - plugins: [ - "flowtype" + "parser": "@babel/eslint-parser", + "plugins": [ + "flowtype", ], - rules: { - 'max-len': 'off', - 'no-template-curly-in-string': 'off', + "rules": { + "max-len": "off", + "no-template-curly-in-string": "off", }, "overrides": [ { - "files": ["src/rules/*.js"], + "files": ["src/rules/*"], "extends": ["plugin:eslint-plugin/rules-recommended"], "rules": { "eslint-plugin/require-meta-docs-url": [ "error", - { "pattern": "https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/{{name}}.md" } + { "pattern": "https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/{{name}}.md" }, ], - "eslint-plugin/require-meta-type": "off" - } + "eslint-plugin/require-meta-type": "off", + }, + }, + { + "files": ["markdown.config.js"], + "parserOptions": { + "sourceType": "script", + }, + "rules": { + "no-console": 0, + "import/no-extraneous-dependencies": [ + "error", + { "devDependencies": true }, + ], + "strict": ["error", "global"], + }, }, { "files": ["__tests__/src/rules/*.js"], - "extends": ["plugin:eslint-plugin/tests-recommended"] - } - ] + "extends": ["plugin:eslint-plugin/tests-recommended"], + }, + { + "files": ["__tests__/**/*"], + "env": { + "jest": true, + }, + }, + ], } diff --git a/.flowconfig b/.flowconfig index 11145d7b2..46e35fd4e 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,4 +1,5 @@ [ignore] +/node_modules/resolve/test/resolver/malformed_package_json/package.json /lib/.* /docs/.* /reports/.* diff --git a/.github/workflows/readme.yml b/.github/workflows/readme.yml new file mode 100644 index 000000000..1a943aa4c --- /dev/null +++ b/.github/workflows/readme.yml @@ -0,0 +1,15 @@ +name: 'Tests: readme' + +on: [pull_request, push] + +jobs: + readme: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v2 + - uses: ljharb/actions/node/install@main + name: 'nvm install lts/* && npm install' + with: + node-version: 'lts/*' + - run: npm run generate-list-of-rules:check diff --git a/CHANGELOG.md b/CHANGELOG.md index 0616f3ddd..f76f2a7e5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,33 @@ +6.6.0 / 2022-06-23 +================== +- 566011b [New] `aria-role`: add `allowedInvalidRoles` option (#828) +- 64dcac6 [New] Introduce a plugin-wide setting for custom components. (#844) +- ce2c328 [Fix] `no-redundant-roles`, `role-supports-aria-props`: Remove implicit role from dl element (#848) +- fb20bc4 [Refactor] `role-supports-aria-props`: clean up the logic a bit +- 1826628 [Refactor] reduce egregious use of array spread, in favor of `[].concat` idiom +- 0f1615a [Docs] `no-static-element-interactions`: Update error message (#843) +- 9980d1d [Docs] Add infrastructure for auto-generating markdown table and list (#837) +- f878d3b [Docs] Update project readme (#831) +- aea7671 [Deps] update `@babel/runtime`, `array-includes`, `axe-core`, `jsx-ast-utils` +- d74173a [Deps] update `jsx-ast-utils` +- f6ba03c [Deps] update `@babel/runtime`, `jsx-ast-utils` +- 547dab4 [Deps] update `@babel/runtime`, `axe-core`, `minimatch` +- baaf791 [Deps] update `@babel/runtime`, `minimatch`, `semver` +- c015fef [Deps] update `@babel/runtime`, `axe-core`, `damerau-levenshtein` +- 832cbd6 [meta] add `export default` instead of `module.exports` (#861) +- ee933a2 [meta] Add CONTRIBUTING.md to solicit contributions (#846) +- fa3c869 [Dev Deps] update `@babel/cli`, `@babel/core`, `@babel/eslint-parser`, `@babel/plugin-transform-flow-strip-types`, `aud`, `eslint-plugin-eslint-plugin`, `eslint-plugin-flowtype`, `eslint-plugin-import` +- fb3d51e [Dev Deps] update `@babel/core`, `@babel/register`, `eslint-plugin-import`, `minimist` +- 8c1df4d [Dev Deps] pin `@technote-space/doctoc` because v2.5 is a breaking change +- fb071ab [Dev Deps] update `@babel/cli`, `@babel/core`, `@babel/eslint-parser`, `@babel/plugin-transform-flow-strip-types`, `eslint-plugin-eslint-plugin` +- 5e966e5 [Dev Deps] update `@babel/cli` +- f597f5b [Dev Deps] update `@babel/cli`, `@babel/core`, `@babel/eslint-parser` +- 287854a [Tests] Fix `npm run flow` (#856) +- 112261c [Tests] skip fragment tests in eslint < 6 +- ea877c4 [Tests] `img-redundant-alt-test`: add passing tests (#832) +- 685426d test: align usage of jest expect across tests (#827) +- c460a8b [Tests] move invalid test case to valid; changed in axe-core v4.4 + 6.5.1 / 2021-11-10 ================== - 8f7d0b0 [Fix] properly build `module.exports` (#824) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 000000000..521e1ff60 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,6 @@ + +# Contributing to ``eslint-plugin-jsx-a11y`` + +Thank you for your interest in ``eslint-plugin-jsx-a11y``. [Here](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) you can find the issues that are ready for contributions. + + Please refer to the [following](https://github.com/jsx-eslint/.github/blob/HEAD/CONTRIBUTING.md) for further information. diff --git a/README.md b/README.md index a609e8270..214dcc7d0 100644 --- a/README.md +++ b/README.md @@ -26,16 +26,13 @@ Static AST checker for accessibility rules on JSX elements. - - -#### *Read this in [other languages](https://github.com/ari-os310/eslint-plugin-jsx-a11y/blob/HEAD/translations/Translations.md).* +#### _Read this in [other languages](https://github.com/ari-os310/eslint-plugin-jsx-a11y/blob/HEAD/translations/Translations.md)._ [Mexican Spanish🇲🇽](https://github.com/ari-os310/eslint-plugin-jsx-a11y/blob/HEAD/translations/README.mx.md) ## Why? -Ryan Florence built out this awesome runtime-analysis tool called [react-a11y](https://github.com/reactjs/react-a11y). It is super useful. However, since you're probably already using linting in your project, this plugin comes for free and closer to the actual development process. Pairing this plugin with an editor lint plugin, you can bake accessibility standards into your application in real-time. -**Note**: This project does not *replace* react-a11y, but can and should be used in conjunction with it. Static analysis tools cannot determine values of variables that are being placed in props before runtime, so linting will not fail if that value is undefined and/or does not pass the lint rule. +This plugin does a static evaluation of the JSX to spot accessibility issues in React apps. Because it only catches errors in static code, use it in combination with [@axe-core/react](https://github.com/dequelabs/axe-core-npm/tree/develop/packages/react) to test the accessibility of the rendered DOM. Consider these tools just as one step of a larger a11y testing process and always test your apps with assistive technology. ## Installation @@ -69,13 +66,10 @@ Add `jsx-a11y` to the plugins section of your `.eslintrc` configuration file. Yo ```json { - "plugins": [ - "jsx-a11y" - ] + "plugins": ["jsx-a11y"] } ``` - Then configure the rules you want to use under the rules section. ```json @@ -91,89 +85,116 @@ Add `plugin:jsx-a11y/recommended` or `plugin:jsx-a11y/strict` in `extends`: ```json { - "extends": [ - "plugin:jsx-a11y/recommended" - ] + "extends": ["plugin:jsx-a11y/recommended"] +} +``` + +To enable your custom components to be checked as DOM elements, you can set global settings in your +configuration file by mapping each custom component name to a DOM element type. + +```json +{ + "settings": { + "jsx-a11y": { + "components": { + "CityInput": "input", + "CustomButton": "button", + "MyButton": "button", + "RoundButton": "button" + } + } + } } ``` ## Supported Rules -- [alt-text](docs/rules/alt-text.md): Enforce all elements that require alternative text have meaningful information to relay back to end user. -- [anchor-has-content](docs/rules/anchor-has-content.md): Enforce all anchors to contain accessible content. -- [anchor-is-valid](docs/rules/anchor-is-valid.md): Enforce all anchors are valid, navigable elements. -- [aria-activedescendant-has-tabindex](docs/rules/aria-activedescendant-has-tabindex.md): Enforce elements with aria-activedescendant are tabbable. -- [aria-props](docs/rules/aria-props.md): Enforce all `aria-*` props are valid. -- [aria-proptypes](docs/rules/aria-proptypes.md): Enforce ARIA state and property values are valid. -- [aria-role](docs/rules/aria-role.md): Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role. -- [aria-unsupported-elements](docs/rules/aria-unsupported-elements.md): Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes. -- [autocomplete-valid](docs/rules/autocomplete-valid.md): Enforce that autocomplete attributes are used correctly. -- [click-events-have-key-events](docs/rules/click-events-have-key-events.md): Enforce a clickable non-interactive element has at least one keyboard event listener. -- [heading-has-content](docs/rules/heading-has-content.md): Enforce heading (`h1`, `h2`, etc) elements contain accessible content. -- [html-has-lang](docs/rules/html-has-lang.md): Enforce `` element has `lang` prop. -- [iframe-has-title](docs/rules/iframe-has-title.md): Enforce iframe elements have a title attribute. -- [img-redundant-alt](docs/rules/img-redundant-alt.md): Enforce `` alt prop does not contain the word "image", "picture", or "photo". -- [interactive-supports-focus](docs/rules/interactive-supports-focus.md): Enforce that elements with interactive handlers like `onClick` must be focusable. -- [label-has-associated-control](docs/rules/label-has-associated-control.md): Enforce that a `label` tag has a text label and an associated control. -- [lang](docs/rules/lang.md): Enforce lang attribute has a valid value. -- [media-has-caption](docs/rules/media-has-caption.md): Enforces that `