Improve dom nesting

src/components/SideBar/MenuItem.tsx

@@ -43,6 +43,18 @@ const useStyles = makeStyles(
       opacity: 1,
       transition: theme.transitions.duration.shortest + "ms"
     },
+    menuItemBtn: {
+      "&:focus": {
+        color: theme.palette.primary.main,
+        outline: 0
+      },
+      background: "none",
+      border: "none",
+      color: "inherit",
+      display: "inline-flex",
+      margin: 0,
+      padding: 0
+    },
     paper: {
       borderRadius: 16,
       cursor: "default",
@@ -58,8 +70,6 @@ const useStyles = makeStyles(
         color: theme.palette.primary.main,
         outline: 0
       },
-      background: "none",
-      border: "none",
       borderBottomRightRadius: 100,
       borderTopRightRadius: 100,
       color: fade(theme.palette.text.primary, 0.6),
@@ -89,7 +99,8 @@ const useStyles = makeStyles(
         }
       },
       "&:hover, &:focus": {
-        color: theme.palette.primary.main
+        color: theme.palette.primary.main,
+        outline: 0
       },
       background: "none",
       border: "none",
@@ -109,7 +120,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
 }) => {
   const classes = useStyles({});
   const [open, setOpen] = React.useState(false);
-  const anchor = React.useRef<HTMLButtonElement>(null);
+  const anchor = React.useRef<HTMLDivElement>(null);
 
   const handleClick = (event: React.MouseEvent, menuItem: IMenuItem) => {
     if (menuItem.children) {
@@ -121,7 +132,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
   };
 
   return (
-    <button
+    <div
       className={classNames(classes.root, {
         [classes.rootActive]: active,
         [classes.rootExpanded]: !isMenuShrunk
@@ -129,18 +140,20 @@ const MenuItem: React.FC<MenuItemProps> = ({
       ref={anchor}
       onClick={event => handleClick(event, menuItem)}
     >
-      {menuItem.icon && <SVG className={classes.icon} src={menuItem.icon} />}
+      <button className={classes.menuItemBtn}>
-      <Typography
+        {menuItem.icon && <SVG className={classes.icon} src={menuItem.icon} />}
-        aria-label={menuItem.ariaLabel}
+        <Typography
-        className={classNames(classes.label, {
+          aria-label={menuItem.ariaLabel}
-          [classes.hideLabel]: isMenuShrunk
+          className={classNames(classes.label, {
-        })}
+            [classes.hideLabel]: isMenuShrunk
-        variant="body2"
+          })}
-        data-test="menu-item-label"
+          variant="body2"
-        data-test-id={menuItem.testingContextId}
+          data-test="menu-item-label"
-      >
+          data-test-id={menuItem.testingContextId}
-        {menuItem.label}
+        >
-      </Typography>
+          {menuItem.label}
+        </Typography>
+      </button>
       {menuItem.children && (
         <Popper
           className={classes.popper}
@@ -176,7 +189,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
           </ClickAwayListener>
         </Popper>
       )}
-    </button>
+    </div>
   );
 };
 

src/components/SideBar/SideBar.tsx

@@ -93,6 +93,7 @@ const SideBar: React.FC<SideBarProps> = ({
               isMenuShrunk={isShrunk}
               menuItem={menuItem}
               onClick={onMenuItemClick}
+              key={menuItem.ariaLabel}
             />
           );
         })}

src/components/SideBar/utils.ts

@@ -11,11 +11,14 @@ export function isMenuActive(location: string, menuItem: IMenuItem) {
     );
   }
 
-  return location.split("?")[0] === orderDraftListUrl().split("?")[0] &&
+  const activeUrl = location.split("?")[0];
-    menuItem.url.split("?")[0] === orderListUrl().split("?")[0]
+  const menuItemUrl = menuItem.url.split("?")[0];
+
+  return activeUrl === orderDraftListUrl().split("?")[0] &&
+    menuItemUrl === orderListUrl().split("?")[0]
     ? false
-    : !!matchPath(location.split("?")[0], {
+    : !!matchPath(activeUrl, {
-        exact: menuItem.url.split("?")[0] === "/",
+        exact: menuItemUrl === "/",
-        path: menuItem.url.split("?")[0]
+        path: menuItemUrl
       });
 }