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

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

3 голосов
/ 17 мая 2019

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

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

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

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

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

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

1 Ответ

5 голосов
/ 17 мая 2019

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

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

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

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

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

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

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

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

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

Узнать больше

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

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

...