From 3d28d466d0b090a5a8e4f7a6d85b97383aa3944a Mon Sep 17 00:00:00 2001
From: Roman Pidkostelnyi <63608794+RomanPidkostelnyi@users.noreply.github.com>
Date: Wed, 19 Jul 2023 14:45:12 +0300
Subject: [PATCH] feat: enable keyboard navigation (#2361)

---
 src/components/SideMenu/MenuItem.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/SideMenu/MenuItem.tsx b/src/components/SideMenu/MenuItem.tsx
index 88e0ac32..151404f7 100644
--- a/src/components/SideMenu/MenuItem.tsx
+++ b/src/components/SideMenu/MenuItem.tsx
@@ -44,7 +44,13 @@ export class MenuItem extends React.Component<MenuItemProps> {
   render() {
     const { item, withoutChildren } = this.props;
     return (
-      <MenuItemLi onClick={this.activate} depth={item.depth} data-item-id={item.id} role="menuitem">
+      <MenuItemLi
+        tabIndex={0}
+        onClick={this.activate}
+        depth={item.depth}
+        data-item-id={item.id}
+        role="menuitem"
+      >
         {item.type === 'operation' ? (
           <OperationMenuItemContent {...this.props} item={item as OperationModel} />
         ) : (
@@ -96,7 +102,7 @@ export const OperationMenuItemContent = observer((props: OperationMenuItemConten
       ) : (
         <OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
       )}
-      <MenuItemTitle width="calc(100% - 38px)">
+      <MenuItemTitle tabIndex={0} width="calc(100% - 38px)">
         {item.sidebarLabel}
         {props.children}
       </MenuItemTitle>