Я не могу зафиксировать изменения в файле из-за сбоя задачи eslint --fix перед фиксацией, которая возвращает следующие ошибки:
× eslint --fix:
C:\Users\user\source\repos\project\project-frontend\src\components\Header.tsx
654:61 error Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events
654:61 error Static HTML elements with event handlers require a role jsx-a11y/no-static-element-interactions
✖ 2 problems (2 errors, 0 warnings)
Я попытался исправить эти ошибки, добавив прослушиватель клавиатуры и роль к компоненту и его дочернему компоненту кнопки в строке 654 указанного файла, что не сработало.
<Snackbar
role = "alert"
tabIndex = {0}
style = {{ right: '24px', textAlign: 'center' }}
anchorOrigin = {{
vertical: 'bottom',
horizontal: 'left'
}}
open = {openLgpd}
onClose = {handleCloseLgpd}
onKeyDown = {handleCloseLgpd}
message = "This is a message!"
action = {
<Button role = "button" color = "secondary" size = "small" onKeyDown = {handleCloseLgpd} onClick {handleCloseLgpd}>
OK
</Button>
}
/>
Я также пытался игнорировать эти ошибки, добавляя свойство aria-hidden к этому компоненту и его дочернему элементу, но это тоже не сработало:
<Snackbar
aria-hidden
tabIndex = {0}
style = {{ right: '24px', textAlign: 'center' }}
anchorOrigin = {{
vertical: 'bottom',
horizontal: 'left'
}}
open = {openLgpd}
onClose = {handleCloseLgpd}
message = "This is a message!"
action = {
<Button role = "button" color = "secondary" size = "small" aria-hidden onClick = {handleCloseLgpd}>
OK
</Button>
}
/>
Отрендеренный компонент выглядит так: компонент закусочной
Когда я попытался полностью удалить этот компонент, eslint вернул точно такие же ошибки в строке, которой даже не было в этом файле. Я не знаю, что может быть причиной этого. Я использую сборщик модулей Webpack, если это помогает.
Компонент Button присваивается как значение свойству действия Snackbar. Я только пытался добавить реквизиты role, aria-hidden и onKeyDown, чтобы решить эту ошибку, но, как я уже сказал, это не сработало. Так что нет, я не думаю, что он использует этот реквизит. Я добавил ссылку на изображение того, как выглядит визуализированный компонент.
«Линия, которой не существует» звучит странно/подозрительно. Как вы используете это как хук перед фиксацией?





Я смог решить эту проблему через час или два поиска в Google и понимания того, как работает ESLint, но я смог опубликовать ответ здесь только сейчас. Извини за это. Вот что я узнал:
Поскольку мой код был в основном написан на TypeScript, ESLint мог линтинговать скомпилированный код JavaScript (поскольку ESLint был создан специально для JavaScript, а не для TypeScript), что выдавало ошибки в строках файла JS, которые не соответствовали строкам моего файла TS. Не стесняйтесь исправлять меня, если я ошибаюсь, поскольку я не углубился настолько, чтобы полностью понять основную причину этой проблемы, просто решите ее и...
Чтобы лучше отображать сообщения об ошибках ESLint в VS Code, я установил его официальное расширение., который выделяет ошибки в правильных строках в текстовом редакторе (независимо от того, работаете ли вы с JS или TS) и предлагает их быстрое решение.
Вот и все, спасибо всем, кто прокомментировал. Надеюсь, это может быть полезно.
Какой является
Button? Он на самом деле используетrole,aria-hidden,onKeyDownреквизит?