如何修复警告 "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

此处的解决方案取决于操作应该做什么。

重构触发转换的动作

由于此操作会将用户带到新路线，因此它应该是 link 元素，<a> 而不是按钮。这为辅助 technology/screen reader 用户提供了一个线索，即交互会将他们带到应用程序中的新地方。

这可以重构为 Ember 中的 link-to，它将内容包装在 <a>:

中

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

someRoute 可以是一个计算属性如果它需要被多个数据通知。否则，它可能是一个字符串。

重构让您保持同步的交互

如果操作不会将您带到其他页面，则使用 <button> 可能比较合适。这方面的一个例子是展开可折叠容器或切换设置的按钮。但是，w3 validator tells us that you can't put divs inside of buttons. You can use Phrasing Content that is non-interactive，例如<span>.

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

了解更多

要发现应用程序中的更多辅助功能问题，请尝试 ember-a11y-testing，它会审核您的应用程序是否存在问题，并向您报告如何解决这些问题。

此问题已作为 "May I Ask a Question" 第 2 季第 3 集的一部分得到解答。如果您希望看到我们完整讨论此答案，您可以在此处观看视频：https://youtu.be/nQsG1zjl8H4

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

How to fix warning "interaction added to non-interactive element no-invalid-interactive"

accessibility

ember.js

ember.js-3