不使用javascript的自定义下拉菜单中的键盘导航
不使用javascript的自定义下拉菜单中的键盘导航
提问于 2022-11-29 23:21:59
我有一个角度应用程序，其中有一个组件，它的div样式作为按钮，并点击它打开或关闭另一个div列表。
我需要让这个应用程序可以访问。我可以用角度(keyup.enter)事件来处理enter事件，当div列表打开时，我想将焦点移到列表中的第一项。当前，当列表打开时，我需要按选项卡来移动焦点。
是否有任何方法自动移动焦点使用ARIA-角色。我不想编写javascript来处理键向下/向上和焦点转移的代码。
另外，是否可以在windows和mac机器事件中使用角(keyup.enter)，而不是用angualar类型记录和匹配键代码编写下键处理程序。
这是供参考的虚拟代码。
<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角色菜单、菜单项，但无法移动焦点，也无法使用列表中的箭头键导航。
回答 1
Stack Overflow用户
发布于 2022-11-30 00:49:57
对不起，但是如果您想要自定义，您需要一直走下去，自己实现键盘接口。
ARIA角色不实现交互，它们只交流交互的本质，以管理用户的期望，或者提供获取元素的快捷方式。
可能有一些库可以帮助您应用默认模式，如ARIA创作实践指南(APG)中所述。
如果您检查仅选择APG上的组合框示例，您将注意到您还需要更多的ARIA属性来符合下拉列表中的标准：
aria-expanded用于在按钮上公开列表当前是否展开aria-haspopup=listbox公开按钮打开列表- 当然是可访问的名称(
aria-label或真实文本内容) - 实际上是
role=combobox而不是纽扣 role=option而不是listitem- 活动选项上的
aria-selected
在可能的时候使用本机组件通常是很好的建议。他们被优化为该平台，快速，高度可访问，并需要较少的资源。
您可以应用一些样式和技巧，比如隐藏初始的、无焦点的输入。accent-color还允许在现代浏览器中使用一些基本样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74624131
复制相关文章
相似问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
