在不使用 javascript 的情况下自定义下拉菜单中的键盘导航

Question

我有一个 angular 应用程序，其中有一个组件具有 div 样式作为按钮并单击它打开或关闭另一个 div 列表。

我需要让这个应用程序易于访问。 我可以使用 angular (keyup.enter) 事件处理输入，当打开 div 列表时，我想将焦点移动到该列表中的第一项。 目前我需要在打开列表时按 Tab 键移动焦点。

有什么方法可以使用 ARIA 角色自动移动焦点。 我不想编写 javascript 来处理按键向下/向上和焦点转移代码。

也可以对 windows 和 mac 机器事件使用 angular (keyup.enter) 而不是在 angualar typescript 中编写 keydown 处理程序并匹配键码。

这是供参考的虚拟代码

<div>
<div role="button" tabindex="0">
</div>

<div *ngIf="showList" role="list">
<div role="listitem" tabindex="0">
</div>
<div role="listitem" tabindex="0">
</div>
</div>
</div>

尝试使用 aria roles menu, menuitem 但无法移动焦点并且无法使用列表中的箭头键导航

Answer 1

不好意思，如果要自定义go，需要一路go，自己实现键盘接口。

ARIA 角色不实现交互，它们仅传达交互的本质以管理用户的期望，或提供获取元素的快捷方式。

可能有一些库可以帮助您应用默认模式，如ARIA 创作实践指南 (APG)中所述

如果您检查APG 上的 Select-Only Combobox 示例，您会注意到您还需要一些更多的 ARIA 属性以符合下拉列表中的标准：

• aria-expanded在按钮上显示列表当前是否展开
• aria-haspopup=listbox显示按钮打开列表
• 一个可访问的名称，当然（ aria-label或真实文本内容）
• role=combobox而不是按钮，实际上
• role=option而不是listitem
• aria-selected在活动选项上

尽可能使用本机组件通常是个好建议。 它们针对平台进行了优化，速度快，易于访问且需要的资源更少。

您可以应用一些样式和技巧，例如隐藏初始的、未聚焦的输入。 CSS 属性accent-color还允许现代浏览器中的一些基本样式。