diff --git a/app/components/ContextMenu/MenuItem.tsx b/app/components/ContextMenu/MenuItem.tsx index 9fbf7c2bb..a535fd137 100644 --- a/app/components/ContextMenu/MenuItem.tsx +++ b/app/components/ContextMenu/MenuItem.tsx @@ -71,12 +71,11 @@ const MenuItem = ( ])} > {selected !== undefined && ( - <> + {selected ? : } -   - + )} - {icon && {icon}} + {icon && {icon}} {children} ); diff --git a/app/components/ContextMenu/Template.tsx b/app/components/ContextMenu/Template.tsx index 8c79f5b8d..fd874ffaa 100644 --- a/app/components/ContextMenu/Template.tsx +++ b/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 || ; + item.icon = item.icon || ; } if (item.type === "route") { @@ -220,7 +220,7 @@ function Title({ }) { return ( - {icon && {icon}} + {icon && {icon}} {title} ); diff --git a/app/components/ContextMenu/index.tsx b/app/components/ContextMenu/index.tsx index 277a420c5..766eb33e2 100644 --- a/app/components/ContextMenu/index.tsx +++ b/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 diff --git a/shared/styles/globals.ts b/shared/styles/globals.ts index 60fbafcfc..7fac03c79 100644 --- a/shared/styles/globals.ts +++ b/shared/styles/globals.ts @@ -106,10 +106,12 @@ export default createGlobalStyle` .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; } `;