blob: f62c3db3d608011aef5d6b2aaf438480677d1011 [file] [view]
# Linting >> EsLint Plugin Lit A11y >> Overview || -5
Accessibility linting plugin for lit-html.
Most of the rules are ported from [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y), and made to work with [lit-html](https://lit-html.polymer-project.org/) templates and custom elements.
## Installation
You'll first need to install [ESLint](http://eslint.org):
```
$ npm i eslint --save-dev
```
Next, install `eslint-plugin-lit-a11y`:
```
$ npm install eslint-plugin-lit-a11y@next --save-dev
```
**Note:** If you installed ESLint globally (using the `-g` flag) then you must also install `eslint-plugin-lit-a11y` globally.
## Usage
Add `lit-a11y` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
```json
{
"plugins": ["lit-a11y"]
}
```
Then configure the rules you want to use under the rules section.
```json
{
"rules": {
"lit-a11y/rule-name": 2
}
}
```
## Configuration
You may also extend the recommended configuration like so:
```json
{
"extends": ["plugin:lit-a11y/recommended"]
}
```
By default, any tagged template literal that starts with `html` is linted. Example:
```js
html` <img /> `;
```
It could be the case, however, that you're using multiple rendering libraries in a project, like for example [`htm`](https://github.com/developit/htm), which also uses a `html` tagged template literal, but has a slightly different syntax than lit-html. In this case you can specify the following option, to make sure only lit-html tagged template literals are linted:
```json
{
"settings": {
"litHtmlSources": true
}
}
```
This will cause the plugin to lint _only_ `html` tagged template literals that are imported from either `'lit'`, `'lit-element'` or `'lit-html'`.
If you're importing lit-html from a package that re-exports lit-html, like for example `@apollo-elements/lit-apollo`, you can specify `@apollo-elements/lit-apollo` as a valid litHtmlSource like so:
```json
{
"settings": {
"litHtmlSources": ["@apollo-elements/lit-apollo"]
}
}
```
## Supported Rules
- [lit-a11y/accessible-emoji](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/accessible-emoji.md)
- [lit-a11y/alt-text](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/alt-text.md)
- [lit-a11y/anchor-has-content](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/anchor-has-content.md)
- [lit-a11y/anchor-is-valid](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/anchor-is-valid.md)
- [lit-a11y/aria-activedescendant-has-tabindex](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/aria-activedescendant-has-tabindex.md)
- [lit-a11y/aria-attr-valid-value](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/aria-attr-valid-value.md)
- [lit-a11y/aria-attrs](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/aria-attrs.md)
- [lit-a11y/aria-role](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/aria-role.md)
- [lit-a11y/aria-unsupported-elements](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/aria-unsupported-elements.md)
- [lit-a11y/autocomplete-valid](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/autocomplete-valid.md)
- [lit-a11y/click-events-have-key-events](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/click-events-have-key-events.md)
- [lit-a11y/heading-has-content](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/heading-has-content.md)
- [lit-a11y/iframe-title](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/iframe-title.md)
- [lit-a11y/img-redundant-alt](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/img-redundant-alt.md)
- [lit-a11y/mouse-events-have-key-events](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/mouse-events-have-key-events.md)
- [lit-a11y/no-access-key](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/no-access-key.md)
- [lit-a11y/no-autofocus](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/no-autofocus.md)
- [lit-a11y/no-distracting-elements](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/no-distracting-elements.md)
- [lit-a11y/no-invalid-change-handler](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/no-invalid-change-handler.md)
- [lit-a11y/no-redundant-role](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/no-redundant-role.md)
- [lit-a11y/role-has-required-aria-attrs](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/role-has-required-aria-attrs.md)
- [lit-a11y/role-supports-aria-attr](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/role-supports-aria-attr.md)
- [lit-a11y/scope](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/scope.md)
- [lit-a11y/tabindex-no-positive](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/tabindex-no-positive.md)