带有 ant design-SubMenu 的键盘导航（可访问性）

Question

我需要使我的网站易于访问。我正在使用 ant-design 菜单，我相信 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 那里。