O with occluded right edge to appear also as a C Open Web Components Guides Docs Blog

EsLint Plugin Lit A11y: no-invalid-change-handler

Enforce usage of @blur over/in parallel with @change on select menu elements for accessibility. @blur should be used instead of @change, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users. @blur is a more declarative action by the user: for instance in a dropdown, using the arrow keys to toggle between options will trigger the @change event in some browsers. Regardless, when a change of context results from an @blur event or an @change event, the user should be notified of the change unless it occurs below the currently focused element.

Rule Details

This rule aims to prevent accessibility problems with <select> and <option> controls.

Examples of incorrect code for this rule:

html` <select @change=${foo}></select> `;
html` <option @change=${foo}></option> `;

Examples of correct code for this rule:

html` <select @blur=${foo}></select> `;
html`
  <select @change="${foo}" @blur="${foo}"></div>
`;

When Not To Use It

If you do not use <select> controls in your lit-html templates, or you are certain that your usage of change conforms to WCAG 2.1

Further Reading