I need to make my site accessible. I'm using ant-design Menu, and the Menu.Submenu is not keyboard accessible, i believe. By adding tabindex i can tab to the submenu, but clicking ENTER nothing happens- the submenu doesn't open, i have no way of programatically openning it.
Under handleKeyPress i'm able to register the ENTER click event on the submenu title but i cant get the submenu to open and show the items. Is there functionality for that?
Perhaps there's a way and i'm missing something?
<Menu.SubMenu onKeyPress={(event) => this.handleKeyPress(event,
"EditYourProfileSubMenu")} onTitleClick={()=>{alert('title clicked')}}
tabIndex={0} title="Edit Your Profile" style={{ color: 'white' }}>
It would be very nice to have an entire Menu which is keyboard accessible, including navigation with arrows and automatic enter click triggers click events. But i'll also be happy with a way to programatically open ant design SubMenu.
I'm still waiting for a better solution, maybe someone will reply to https://github.com/ant-design/ant-design/issues/14356
I found a meantime hacky solution for this- using Menu's openKeys prop(see https://ant.design/components/menu/). It gets an array of submenu keys to determine which are open. So using onKeyDown i listened to these events and added/removed the right submenu key from the array (using State, of course).
<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>
Adding openKeys field to menu messes with the mouse click flow, so i had to add onTitleClick and add the key to openKeys there also.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With