时间戳

首页 > 解决方案 > 如何修复警告“添加到非交互元素的交互无无效交互”

ember.js - 如何修复警告“添加到非交互元素的交互无无效交互”

问题描述

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

添加到非交互元素的交互 no-invalid-interactive

这方面的一个例子是：

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

当您单击该操作时，它应该将您带到一条新路线。

我有哪些选择可以以正确的方式修复它，以便它可以访问？

标签： ember.jsaccessibilityember.js-3

解决方案

这里的解决方案取决于操作应该做什么。

重构触发转换的动作

由于此操作将用户带到新路线，因此它应该是链接元素，<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

推荐阅读