带有蚂蚁设计的键盘导航（辅助功能）-子菜单

Question

我需要使我的网站可访问。我正在使用 ant-design Menu，我相信 Menu.Submenu 不能通过键盘访问。通过添加 tabindex，我可以将选项卡添加到子菜单，但单击 ENTER 没有任何反应 - 子菜单未打开，我无法以编程方式打开它。

在 handleKeyPress 下，我可以在子菜单标题上注册 ENTER 单击事件，但我无法打开子菜单并显示项目。有这个功能吗？

也许有办法，我错过了什么？

<Menu.SubMenu onKeyPress={(event) => this.handleKeyPress(event, 
"EditYourProfileSubMenu")} onTitleClick={()=>{alert('title clicked')}} 
tabIndex={0} title="Edit Your Profile" style={{ color: 'white' }}>

拥有一个可通过键盘访问的整个菜单会非常好，包括带箭头的导航和自动输入点击触发点击事件。但我也会对以编程方式打开 ant design SubMenu 的方法感到满意。

Answer 1

我还在等待更好的解决方案，也许有人会回复 https://github.com/ant-design/ant-design/issues/14356

我同时找到了一个 hacky 解决方案 - 使用 Menu 的 openKeys 属性（参见https://ant.design/components/menu/）。它获取一组子菜单键来确定哪些是打开的。因此，我使用 onKeyDown 监听这些事件，并从数组中添加/删除了正确的子菜单键（当然使用 State）。

<Menu
   openKeys={this.controller.getMainMenuOpenKeys()}
   ...> 
...
    <Menu.SubMenu key={"EditYourProfileSubMenu"} 
        onKeyDown={(event) => this.handleKeyPress(event, "EditYourProfileSubMenu", true)} 
        onTitleClick={() => { 
        this.controller.setMainMenuOpenKeys(["EditYourProfileSubMenu"]) }} //sets the state which openKeys listens to
        tabIndex={0} 
        title="Edit Your Profile" style={{ color: 'white' }}>
       ...
   </Menu.SubMenu>
</Menu>

将 openKeys 字段添加到菜单会扰乱鼠标单击流程，因此我必须添加 onTitleClick 并将密钥也添加到 openKeys 中。