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

  • 7 августа 2023 г. 7:01
Ответы на вопрос 9
Если вы получили ошибку, связанную с обработчиком событий мыши в ESLint, причина может заключаться в нарушении правил доступности в вашем коде. Например, если вы используете события мыши, такие как onClick, но без аналогичной клавиатуры событий (например, onKeyPress, onKeyUp, onKeyDown), ESLint выдаст предупреждение или ошибку.

Есть несколько способов исправить это, в зависимости от ваших конкретных нужд:

1. Добавьте соответствующие события клавиатуры. В большинстве случаев это наиболее желаемое решение, так как оно увеличивает доступность вашего приложения.

Пример: 

```jsx
<div onClick={this.handleClick} onKeyPress={this.handleKeyPress}>
   Content
</div>
```

2. Если правило доступности не требуется для вашего проекта или определенного компонента, вы можете отключить это правило в файле конфигурации ESLint или непосредственно в вашем файле JSX/JS.

```jsx
/* eslint jsx-a11y/click-events-have-key-events: 0 */
<div onClick={this.handleClick}>
   Content
</div>
```

Пожалуйста, учтите, что доступность важна для обеспечения доступа людей с ограниченными возможностями к вашему веб-сайту или приложению. Отключайте эти правила только в случае абсолютной необходимости.
Если в проекте необходимы данные правила, то их лучше оставить. Однако, если правила не нужны, можно отключить их в eslint.
Для исправления ошибок, необходимо активировать мозг. Остановитесь и задумайтесь: кто пишет эти правила, почему они пишутся и что они представляют. Когда вы понимаете это:
1. Правила vuejs-accessibility (vuejs-доступность) устанавливаются в качестве дополнительного плагина. Если вы не знаете, как они появились в eslint и вам безразличны вопросы доступности, вы можете безопасно удалить этот плагин и забыть о нем.
2. Если трудно понять, что написано на басурманском, вам поможет Google Translate: @mouseout или @mouseleave должны быть использованы вместе с @focusout или @blur для обеспечения доступности. @mouseover, @mouseenter или @hover должны быть использованы вместе с @focusin или @focus для обеспечения доступности.
Почему вам пишут такие правила? Это требует активации вашего мозга на 146%. Подумайте, почему вместе с @mouseenter может понадобиться @focusin в соответствии с правилами доступности. Возможно, чтобы человек без возможности использовать мышь мог вызвать связанные события с помощью клавиатуры. Дублирование кода для помощи таким людям несет незначительные риски.
P.S. Пока вы не выключили мозг, подумайте также о следующем:
1. Какие последствия могут возникнуть при бездумном добавлении одновременно @focus и @focusin?
2. Могут ли возникнуть конфликты в функциях, если элемент получает фокус и мышью?
Похожие вопросы