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.
You'll first need to install ESLint:
$ npm i eslint --save-dev
Next, install eslint-plugin-lit-a11y
:
$ npm install eslint-plugin-lit-a11y --save-dev
Note: If you installed ESLint globally (using the -g
flag) then you must also install eslint-plugin-lit-a11y
globally.
Add lit-a11y
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{ "plugins": ["lit-a11y"] }
Then configure the rules you want to use under the rules section.
{ "rules": { "lit-a11y/rule-name": 2 } }
You may also extend the recommended configuration like so:
{ "extends": ["plugin:lit-a11y/recommended"] }
By default, any tagged template literal that starts with html
is linted. Example:
html`<img />`;
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:
{ "settings": { "litHtmlSources": true } }
This will cause the plugin to lint only html
tagged template literals that are imported from either 'lit-html'
or 'lit-element'
.
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:
{ "settings": { "litHtmlSources": ["@apollo-elements/lit-apollo"] } }