jsx_a11y/anchor-is-valid 正确性

它做什么

具有有效 href 属性的 HTML <a> 元素正式定义为表示超链接. 也就是说，一个 HTML 文档和另一个 HTML 文档之间的链接，或一个 HTML 文档内部的一个位置和同一文档内部另一个位置之间的链接。

虽然以前可以在锚点元素上附加逻辑，但随着 JSX 库的出现，现在可以更轻松地在任何 HTML 元素上附加逻辑，包括锚点。

此规则旨在防止用户在点击锚点时附加逻辑，并且还可以确保提供给锚点元素的 href 有效。如果锚点有附加逻辑，则规则建议将其转变为 button，因为这很可能是用户想要的。

锚 <a></a> 元素应用于导航，而 <button></button> 应用于用户交互。

考虑以下内容

<>
  <a href="javascript:void(0)" onClick={foo}>
    Perform action
  </a>
  <a href="#" onClick={foo}>
    Perform action
  </a>
  <a onClick={foo}>Perform action</a>
</>

所有这些锚实现都表示该元素仅用于执行 JavaScript 代码。以上所有内容都应替换为

<button onClick={foo}>Perform action</button>

`

为什么不好？

有很多原因解释了为什么锚点不应该有逻辑且必须有正确的 href 属性

• 可能会破坏用户导航的正确流程，例如用户希望在另一个标签中打开链接，但默认的“点击”行为被阻止
• 它可能是无效链接的来源，并且爬行器无法导航网站，有风险会降低 SEO 排名

示例

有效

<>
  <a href={`https://www.javascript.com`}>navigate here</a>
  <a href={somewhere}>navigate here</a>
  <a {...spread}>navigate here</a>
</>

无效

<>
  <a href={null}>navigate here</a>
  <a href={undefined}>navigate here</a>
  <a href>navigate here</a>
  <a href="javascript:void(0)">navigate here</a>
  <a href="https://example.com" onClick={something}>
    navigate here
  </a>
</>

参考

• WCAG 2.1.1

参考

• 规则来源