diff --git a/src/components/SideMenu/MenuItem.tsx b/src/components/SideMenu/MenuItem.tsx index 19f89718..2b7577b0 100644 --- a/src/components/SideMenu/MenuItem.tsx +++ b/src/components/SideMenu/MenuItem.tsx @@ -2,14 +2,14 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { ShelfIcon } from '../../common-elements/shelfs'; +import type { IMenuItem } from '../../services'; import { OperationModel } from '../../services'; -import { shortenHTTPVerb } from '../../utils/openapi'; -import { MenuItems } from './MenuItems'; -import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements'; import { l } from '../../services/Labels'; import { scrollIntoViewIfNeeded } from '../../utils'; +import { shortenHTTPVerb } from '../../utils/openapi'; import { OptionsContext } from '../OptionsProvider'; -import type { IMenuItem } from '../../services'; +import { MenuItems } from './MenuItems'; +import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements'; export interface MenuItemProps { item: IMenuItem; @@ -47,9 +47,18 @@ export class MenuItem extends React.Component { { + // Space or Enter key will activate the menu item + if (evt.key === 'Enter' || evt.key === ' ') { + this.props.onActivate!(this.props.item); + evt.stopPropagation(); + } + }} depth={item.depth} data-item-id={item.id} role="menuitem" + aria-label={item.sidebarLabel} + aria-expanded={item.expanded} > {item.type === 'operation' ? (