From 6c1c260baf5a6fef3d4890ab2e617090daec852c Mon Sep 17 00:00:00 2001
From: Gaurav Gupta <gaurav5430@gmail.com>
Date: Sat, 21 May 2022 00:03:20 +0530
Subject: [PATCH] fix(side-navbar): keyboard a11y

replace div with button to allow activation using space and enter

Signed-off-by: Gaurav Gupta<gaurav5430@gmail.com>
---
 src/components/form-field/form-field.tsx | 2 +-
 src/components/nav-bar/nav-bar.scss      | 4 ++++
 src/components/nav-bar/nav-bar.tsx       | 4 ++--
 stories/page.tsx                         | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/form-field/form-field.tsx b/src/components/form-field/form-field.tsx
index 1dd5b3d4..d25887d4 100644
--- a/src/components/form-field/form-field.tsx
+++ b/src/components/form-field/form-field.tsx
@@ -4,7 +4,7 @@ import * as ReactForm from 'react-form';
 
 import { Select as ArgoSelect, SelectOption, SelectProps } from '../select/select';
 
-const uuid = require('uuid/v1');
+const uuid = require('uuid');
 
 require('./form-field.scss');
 
diff --git a/src/components/nav-bar/nav-bar.scss b/src/components/nav-bar/nav-bar.scss
index afc295fc..4963c58a 100644
--- a/src/components/nav-bar/nav-bar.scss
+++ b/src/components/nav-bar/nav-bar.scss
@@ -105,5 +105,9 @@ $nav-break-height-sm: 746px;
     .nav-bar__item {
         margin: 10px 0;
         font-size: 25px;
+        font-family: inherit;
+        line-height: 1.5;
+        display: block;
+        width: 100%;
     }
 }
diff --git a/src/components/nav-bar/nav-bar.tsx b/src/components/nav-bar/nav-bar.tsx
index a3e32d45..47e9ec31 100644
--- a/src/components/nav-bar/nav-bar.tsx
+++ b/src/components/nav-bar/nav-bar.tsx
@@ -35,10 +35,10 @@ export const NavBar: React.FunctionComponent<NavBarProps> = (props: NavBarProps,
                 <div className='nav-bar__version'>{props.version && props.version()}</div>
                 {(props.items || []).map((item) => (
                     <Tooltip content={item.title} placement='right' arrow={true} key={item.path + item.title}>
-                        <div className={classNames('nav-bar__item', { active: isActiveRoute(locationPath, item.path) })}
+                        <button type="button" className={classNames('nav-bar__item', { active: isActiveRoute(locationPath, item.path) })}
                             onClick={() => context.router.history.push(item.path)}>
                             <i className={item.iconClassName}/>
-                        </div>
+                        </button>
                     </Tooltip>
                 ))}
             </div>
diff --git a/stories/page.tsx b/stories/page.tsx
index b708c51b..729976d1 100644
--- a/stories/page.tsx
+++ b/stories/page.tsx
@@ -1,6 +1,6 @@
 import { Store, withState } from '@dump247/storybook-state';
 import { storiesOf } from '@storybook/react';
-import createHistory from 'history/createBrowserHistory';
+import { createBrowserHistory as createHistory } from 'history';
 import * as React from 'react';
 import { Route, Router } from 'react-router';
 import { timer } from 'rxjs';