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

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

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

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

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

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

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

Всего 1 ответ


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

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

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

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

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

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

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

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

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

Учить больше

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


Есть идеи?

10000