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:

{
  "plugins": ["lit-a11y"]
}

Then configure the rules you want to use under the rules section.

{
  "rules": {
    "lit-a11y/rule-name": 2
  }
}

Configuration

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', '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:

{
  "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

Change Log

4.1.4

Patch Changes

• e304436c: Makes regex for detecting custom elements match the spec closer

4.1.3

Patch Changes

• 6bdc6f5d: remove axobject-query

4.1.2

Patch Changes

• 325d7703: Changed context.getSourceCode to context.sourceCode with backward compatibility

4.1.1

Patch Changes

• e3ac8bb9: Bump 'eslint-plugin-lit' version.

4.1.0

Minor Changes

• 76a2e824: added no-aria-slot rule to prevent invalid aria- and role attributes from appearing on slots

4.0.0

Major Changes

• 14e4270a: feat: new a11y rules

3.0.0

Major Changes

• 935c8ffe: Drop support for Node@14

2.4.1

Patch Changes

• c5a675d5: fix(deps): update dependency parse5 to v7

2.4.0

Minor Changes

• 30d18829: Update dependency emoji-regex to v10

2.3.0

Minor Changes

• 6525833a: Update aria-query to v5, fix switch role rules

2.2.3

Patch Changes

• fc3e9317: Fix bug #2490 in scope rule

2.2.2

Patch Changes

• 61e2668f: update eslint, eslint-config-airbnb-base and eslint-plugin-import

2.2.1

Patch Changes

• c7997ff2: Fix bug #2466 issue in role-supports-aria-attr

2.2.0

Minor Changes

• f5e728d7: Add valid-lang rule

2.1.0

Minor Changes

• 45e0c17e: eslint-plugin-lit-a11y: use template-analyzer directly from lit plugin

2.0.0

Major Changes

• ed2b36e8: chore: remove intl list format
• ed2b36e8: Remove eslint dependency (in favour of peer dependency)

1.1.0

Minor Changes

• f411714e: Check tagged template literals of the package lit by default

Patch Changes

• 40837d10: - use latest axe-core
  • allow not required attributes in role testing

1.1.0-next.1

Patch Changes

• 40837d10: - use latest axe-core
  • allow not required attributes in role testing

1.1.0-next.0

Minor Changes

• f411714e: Check tagged template literals of the package lit by default

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.1 (2020-10-23)

Bug Fixes

• eslint-plugin-lit-a11y: guard against placeholders (#1941) (492b53f)

1.0.0 (2020-10-23)

Features

• eslint-plugin-lit-a11y: change default (#1936) (c76ceeb)

BREAKING CHANGES

• eslint-plugin-lit-a11y: initial release

Co-authored-by: Benny Powers web@bennypowers.com

0.5.6 (2020-10-22)

Note: Version bump only for package eslint-plugin-lit-a11y

0.5.5 (2020-10-21)

Bug Fixes

• eslint-plugin-lit-a11y: add pkg.json links (#1922) (364a031)

0.5.4 (2020-10-21)

Bug Fixes

• eslint-plugin-lit-a11y: check for tabIndex property (#1918) (02381b3)

0.5.3 (2020-10-21)

Bug Fixes

• eslint-plugin-lit-a11y: qualified specifiers (#1917) (5b52a5a), closes #1911 #1916

0.5.2 (2020-10-20)

Note: Version bump only for package eslint-plugin-lit-a11y

0.5.1 (2020-10-18)

Bug Fixes

• eslint-plugin-lit-a11y: fix reporting locations (#1910) (fb8c15d)
• eslint-plugin-lit-a11y: refactors and fixes rules (#1906) (752ae09)

0.5.0 (2020-10-18)

Features

• eslint-plugin-lit-a11y: detect lit-html (#1908) (ea8b181)

0.4.2 (2020-10-18)

Bug Fixes

• eslint-plugin-lit-a11y: aria-label img role (#1899) (b22dc15)
• eslint-plugin-lit-a11y: revert custom placeholder logic (#1907) (956597a)

0.4.1 (2020-10-17)

Bug Fixes

• eslint-plugin-lit-a11y: report errors on correct location (35975e1)
• eslint-plugin-lit-a11y: support member and conditional expressions (#1890) (74db27a)

0.4.0 (2020-10-16)

Features

• eslint-plugin-lit-a11y: allow only valid scopes (#1892) (a725038)

0.3.1 (2020-10-16)

Note: Version bump only for package eslint-plugin-lit-a11y

0.3.0 (2020-10-15)

Features

• eslint-plugin-lit-a11y: add heading-has-content function calls (#1883) (fb06880)
• eslint-plugin-lit-a11y: allow alt-text role img and presentation (#1884) (7ce1aa4)

0.2.2 (2020-10-15)

Note: Version bump only for package eslint-plugin-lit-a11y

0.2.0 (2020-10-15)

Features

• eslint-plugin-lit-a11y: add click-events-have-key-events whitelist (#1881) (a14bded)

0.1.0 (2020-10-14)

Features

• add eslint-plugin-lit-a11y (#1781) (3232d0d), closes #1871