Как исправить предупреждение "добавлено взаимодействие с неинтерактивным элементом no-invalid-interactive"

Question

Я только что обновил свое дополнение Ember с версии 3.0 до версии 3.8, и теперь я получаю это предупреждение:

Взаимодействие добавлено к неинтерактивному элементу no-invalid-interactive

Примером этого является что-то вроде:

<div class="some-class" onclick={{action "selectDate" "today"}}>
    <div> more content </div>
</div>

Когда вы нажимаете на действие, оно должно привести вас к новому маршруту.

Какие есть варианты исправить это так, чтобы оно было доступно?

Answer 1

Решение здесь зависит от того, что действие должно сделать.

Рефакторинг действия, которое запускает переход

Поскольку это действие переносит пользователя на новый маршрут, оно должно быть элементом ссылки, <a> и не кнопка. Это дает пользователям вспомогательных технологий / средств чтения с экрана подсказку, что взаимодействие приведет их куда-то в приложение.

Это можно изменить на ссылку в Ember, которая обернет содержимое в <a>:

{{#link-to someRoute}}
    <div> more content </div>
{{/link-to}}

someRoute может быть вычисленным свойством, если оно должно быть информировано несколькими частями данных. В противном случае это может быть строка.

Рефакторинг взаимодействия, которое держит вас на той же странице

В тех случаях, когда действие не переносит вас на другую страницу, может быть целесообразно использовать <button>, Примером этого может быть кнопка, которая разворачивает складной контейнер или переключает настройку. Тем не менее, валидатор w3 говорит нам, что вы не можете поместить div внутри кнопок. Вы можете использовать Фразирующий Контент, который не является интерактивным, например: <span>,

<button class="some-class" onclick={{action "toggleSomething"}}>
    <span> more content </span>
</button>

Учить больше

Чтобы выявить больше проблем с доступностью в приложении, попробуйте ember-a11y-testing, который проверяет ваше приложение на наличие проблем и дает отчет о том, как их исправить.

---

На этот вопрос был дан ответ в рамках 2-го сезона 3-го сезона "Могу я задать вопрос". Если вы хотите, чтобы мы обсудили этот ответ полностью, вы можете посмотреть видео здесь: https://youtu.be/nQsG1zjl8H4