Как исправить ошибку eslint на события мыши?

Question

[Александра]

Всем привет, подскажите пожалуйста, что нужно сделать при подобном предупреждении - ESLint: @mouseout or @mouseleave must be accompanied by @focusout or @blur for accessibility.(vuejs-accessibility/mouse-events-have-key-events) ESLint: @mouseover, @mouseenter, or @hover must be accompanied by @focusin or focus for accessibility.(vuejs-accessibility/mouse-events-have-key-events)

<component
    :is="component"
    ref="container"
    class="s-button"
    :class="classes"
    :style="styles"
    :disabled="disabled"
    :rel="rel"
    v-bind="componentProperties"
    @click="onClick"
    @mouseenter="handleMouseListener"
    @mouseleave="handleMouseListener"
  >

Такое решение кажется костыльным (перестает ругаться), может можно как то прокинуть события через v-bind?

<component
    :is="component"
    ref="container"
    class="s-button"
    :class="classes"
    :style="styles"
    :disabled="disabled"
    :rel="rel"
    v-bind="componentProperties"
    @click="onClick"
    @mouseenter="handleMouseListener"
    @mouseleave="handleMouseListener"
    @focus="handleMouseListener"
    @focusin="handleMouseListener"
    @blur="handleMouseListener"
    @focusout="handleMouseListener"
  >

Comments

[WbICHA]

Для начала можно заглянуть в словарь английского и найти перевод союза "or".

Answer 1

[vıtalıyırtlach]

Если проекту данные правила необходимы то лучше оставить так, но если в правилах нет необходимости их можно отключить в eslint

Answer 2

[Aetae]

Чтобы исправить эту и многие иные ошибки надо включить мозг. Прям остановиться, нажать кнопку power on, и таки прочитать: кто тебе пишет, что тебе пишет, почему он тебе такое пишет.

Итак:
Кто тебе пишет? Пишет тебе набор правил vuejs-accessibility(vuejs-доступность по нашему). Этот набор правил сам по себе появиться не мог, он ставится дополнительным плагином. Если ты не знаешь откуда он у тебя взялся и тебе плевать на всяких инвалидов - можешь смело удалить этот плагин из eslint и забыть.

Что тебе пишет? Коли по-басурмански ты не разумеешь, то тебе поможет гугл-транслейт:
1. @mouseout или @mouseleave должны сопровождаться @focusout или @blur для доступности.
2. @mouseover, @mouseenter или @hover должны сопровождаться @focusin или @focus для доступности.

Почему он тебе такое пишет? Вот тут запускай свой мозг на все 146% и начинай по-нстоящему думать. Почему же совместно с @mouseenter нам может понадобится @focusin, если нам это советует правило по доступности? Думай, думай...
Может быть для того, чтобы человек без возможности оперировать мышью смог таки с помощью клавиатуры вызвать связанные события, мм? И небольшое дублирование кода, которое поможет таким людям, совсем не страшно.

P.S. Пока не выключен мозг - подумай ещё:
1. К каким последствиям приведёт бездумное (лишь-бы-eslint-заткнулся) добавление одновременно @focus и @focusin?
2. Не будет ли конфликтов внутри функций в случае получения элементом фокуса таки мышкой?
...