Linting >> EsLint Plugin Lit A11y >> Overview || -5

Accessibility linting plugin for lit-html.

Most of the rules are ported from eslint-plugin-jsx-a11y, and made to work with lit-html templates and custom elements.

Installation

You'll first need to install ESLint:

``
$ 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 ;
`

It could be the case, however, that you're using multiple rendering libraries in a project, like for example 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
- lit-a11y/alt-text
- lit-a11y/anchor-has-content
- lit-a11y/anchor-is-valid
- lit-a11y/aria-activedescendant-has-tabindex
- lit-a11y/aria-attr-valid-value
- lit-a11y/aria-attrs
- lit-a11y/aria-role
- lit-a11y/aria-unsupported-elements
- lit-a11y/autocomplete-valid
- lit-a11y/click-events-have-key-events
- lit-a11y/heading-has-content
- lit-a11y/iframe-title
- lit-a11y/img-redundant-alt
- lit-a11y/list
- lit-a11y/mouse-events-have-key-events
- lit-a11y/no-access-key
- lit-a11y/no-autofocus
- lit-a11y/no-distracting-elements
- lit-a11y/no-invalid-change-handler
- lit-a11y/no-redundant-role
- lit-a11y/role-has-required-aria-attrs
- lit-a11y/role-supports-aria-attr
- lit-a11y/scope
- lit-a11y/tabindex-no-positive
- lit-a11y/valid-lang