ember.js - 如何修复警告 "interaction added to non-interactive element no-invalid-interactive"

Question

我刚刚将我的 Ember 插件从 3.0 版升级到了 3.8 版，现在我收到了这个警告:

Interaction added to non-interactive element 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 validator告诉我们你不能把 div 放在按钮里面。您可以使用 Phrasing Content这是非 interactive ，例如 <span> .

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

了解更多

要在应用程序中发现更多可访问性问题，请尝试 ember-a11y-testing它会审核您的应用是否存在问题，并为您提供有关如何修复这些问题的报告。

这个问题是在“我可以问一个问题”第 2 季第 3 集的一部分中回答的。如果您想看到我们完整地讨论这个答案，您可以在此处查看视频: https://youtu.be/nQsG1zjl8H4