chore(vertical-menu): fix focus indicators

Author: damienrobson-sage

src/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.tsx

@@ -145,6 +145,9 @@ const BaseItem = forwardRef<HTMLElement, BaseItemProps>(
       let siblings;
       let siblingsAtDepth;
 
+      // If in responsive mode, do not toggle the menu
+      if (responsiveDisplay) return;
+
       switch (e.key) {
         case "Tab":
           siblingsAtDepth =

src/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.style.ts

@@ -96,7 +96,7 @@ export const StyledResponsiveMenuItem = styled.button<StyledResponsiveMenuItemPr
     css`
       cursor: default;
       justify-content: space-around;
-      width: 88%;
+      width: 80%;
     `}
 
   &:hover {
@@ -196,15 +196,15 @@ export const StyledNestedMenu = styled.div<{
       responsive &&
       css`
         font-weight: 500;
-        width: 84%;
+        width: 70%;
 
         ${depth &&
         depth >= 1 &&
         css`
           font-weight: 400;
           margin-left: var(--spacing200);
           margin-right: var(--spacing200);
-          width: 79%;
+          width: 63%;
         `}
       `}
   }

src/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.component.tsx

@@ -202,7 +202,7 @@ const BaseMenu = ({
               reduceMotion={reduceMotion}
               ref={menuRef}
               responsive
-              top="40px"
+              top={responsiveMode ? "48px" : "40px"}
               width={width}
             >
               {children}

src/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu.style.ts

@@ -36,13 +36,13 @@ export const StyledButton = styled(Button)<StyledButtonProps>`
     -webkit-box-shadow: ${addFocusStyling(true)};
     box-shadow: ${addFocusStyling(true)};
     border: 1px solid black;
-
     outline: transparent 3px solid;
   }
 `;
 
 export const StyledCloseButton = styled(Button)`
   border-radius: 0;
+
   [data-component="icon"] {
     color: var(--colorsUtilityYang100);
   }