eslint-plugin-vuejs-a11y

Appearance

no-onchange ​

Deprecated

This rule is based on reports of behavior of old browsers (eg. IE 10 and below). In the meantime, this behavior has been corrected, both in newer versions of browsers as well as in the DOM spec.

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.

🔧 Options ​

This rule takes no arguments.

✔ Succeed ​

vue
<template>
  <select @blur="handleBlur">
    <option />
  </select>

  <select>
    <option @blur="handleBlur" @change="handleChange" />
  </select>
</template>

❌ Fail ​

vue
<template>
  <select @change="handleChange" />
</template>

📚 Resources ​