Typescript Angular的锚标记问题

【问题标题】：anchor tag question for Typecript AngularTypescript Angular的锚标记问题
【发布时间】：2022-02-09 04:26:52
【问题描述】：

<a id="supportLink" (click)="navigate(url.state)">click</a>

我正在对一些现有代码进行一些可访问性工作。我有一些带有点击事件绑定到它们的锚标签。我注意到这里也没有 href 属性，因为单击事件正确处理路由并且单击键盘上的输入也会触发偶数。我希望它是可选项卡的，但因为没有 href 属性它不是可选项卡，所以我添加了一个 tabindex="0。这现在使我的标签可选项卡，但现在单击键盘上的输入不会触发我的事件。我发现将以下代码添加到我的 a 标记键中，单击事件可以正常工作，单击它或按 Enter。

href="javascript:void(0)"

这是可接受的可访问性标准代码吗？...或者有人推荐更好的方法吗？

【问题讨论】：

标签： angular accessibility href anchor

【解决方案1】：

您可以在标签中使用(keydown)="EnterSubmit($event, url.state)。

在 .ts 中：

EnterSubmit(e,state){
     if (e.keyCode === 13) {
      alert("Submitted with enter.")
   }
}

以上补充

您还需要将焦点设置在锚标记上。您可以使用 viewChild 或简单的 DOM 方式来实现：

document.getElementById("supportLink")?.focus();

如果您希望将重点放在页面加载上，请在 ngAfterViewInit() 中编写此内容。最终的 HTML 代码：

<a id="supportLink" (click)="navigate(url.state)" (keydown)="EnterSubmit($event, url.state)" tabindex="0">click</a>`

【讨论】：