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