Клавиатура навигации (доступность) с муравьиным дизайном - SubMenu - PullRequest
0 голосов
/ 15 января 2019

Мне нужно сделать мой сайт доступным. Я использую 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.

1 Ответ

0 голосов
/ 25 января 2019

Я все еще жду лучшего решения, возможно, кто-то ответит на https://github.com/ant-design/ant-design/issues/14356

Я нашел хакерское решение для этого - с помощью опоры 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...