ESlint jsx-a11y/anchor-is-valid 警告

Question

ESlint 好像很清楚；它希望在锚标记内使用有效链接。但我想以这种方式使用它，我不想用按钮或其他东西替换这个锚。

此外，警告不是持久的。有时它会消失。我想知道为什么会这样？实际上使用没有引用的锚有什么问题？

警告来自以下代码。

 <a
   key={randKey}
   className="list-icons-item"
   data-action={this.props.headerElements[i]}>
 </a>

如何禁用此警告或最佳做法是什么？

Answer 1

这个问题是一个复杂问题的简单例子。如果代码的目的是关注this.props.headerElements[i]，则给this.props.headerElements[i] 一个ID 并在链接的href 中引用该ID。让默认行为发挥作用。不需要进一步的脚本逻辑。

如果不涉及导航，那么正如@Andy 指出的那样，锚点不合适。使用the documentation for the rule 强烈推荐的按钮。

当控件看起来像一个链接并离开页面或改变页面上的焦点时，根据WAI ARIA specifications，链接是语义上正确的选择。如果您需要关注的内容将显示为您的点击处理程序逻辑的一部分，那么您可能会发现 ESlint jsx-a11y anchor-is-valid 警告适得其反。在这种情况下，最好使用具有显式角色和 tabindex 属性的锚点，并在您的 .eslintrc 文件中抑制规则或将其关闭，正如@Andy 上面提到的那样。

<a
   role="link"
   tabIndex="0"
   key={randKey}
   className="list-icons-item"
   data-action={this.props.headerElements[i]}>

语义与外观不同时会产生成本。考虑一个盲人用户呼叫您的 Web 应用程序的帮助台并被指示单击一个链接，但只听到屏幕阅读器中宣布的一个按钮。考虑一个只有部分视力的用户遇到一个看起来像链接并且功能像链接但被标记为按钮的控件。用户将听到屏幕阅读器中宣布的一件事并看到其他内容。

需要在项目生命周期的早期考虑这些权衡，以便在整个应用程序中与您的处理保持一致。