Keyboard navigation (accessibility) with ant design- SubMenu

user_4725119 0
Viewed 3089

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.

antd reactjs accessibility
1 Answers

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.

user_47251190
Related