fix: Menus with accessory in-front of label cannot be navigated with keyboard letters

fix: Flash of outline state when focusing menu item with keyboard

app/components/ContextMenu/MenuItem.tsx

@@ -71,12 +71,11 @@ const MenuItem = (
           ])}
         >
           {selected !== undefined && (
-            <>
+            <MenuIconWrapper aria-hidden>
               {selected ? <CheckmarkIcon /> : <Spacer />}
-              &nbsp;
-            </>
+            </MenuIconWrapper>
           )}
-          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
+          {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
           {children}
         </MenuAnchor>
       );

app/components/ContextMenu/Template.tsx

@@ -126,7 +126,7 @@ function Template({ items, actions, context, ...menu }: Props) {
           item.type !== "separator" &&
           item.type !== "heading"
         ) {
-          item.icon = item.icon || <MenuIconWrapper />;
+          item.icon = item.icon || <MenuIconWrapper aria-hidden />;
         }
 
         if (item.type === "route") {
@@ -220,7 +220,7 @@ function Title({
 }) {
   return (
     <Flex align="center">
-      {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
+      {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
       {title}
     </Flex>
   );

app/components/ContextMenu/index.tsx

@@ -223,6 +223,12 @@ export const Position = styled.div`
   position: absolute;
   z-index: ${depths.menu};
 
+  &.focus-visible {
+    transition-delay: 250ms;
+    transition-property: outline-width;
+    transition-duration: 0;
+  }
+
   /*
    * overrides make mobile-first coding style challenging
    * so we explicitly define mobile breakpoint here

shared/styles/globals.ts

@@ -106,10 +106,12 @@ export default createGlobalStyle<Props>`
 
   .js-focus-visible :focus:not(.focus-visible) {
     outline: none;
+    outline-width: 0;
   }
 
   .js-focus-visible .focus-visible {
     outline-color: ${s("accent")};
     outline-offset: -1px;
+    outline-width: initial;
   }
 `;