Question

我需要使我的网站可访问。我相信我使用的是蚂蚁设计的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' }}>

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

Answer 1

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

我使用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中。

带有蚂蚁设计的键盘导航（可访问性）-SubMenu

1 个答案: