fix(MenuItem_Anchor_tooltipTarget): Focus state fixes

Update implementation and color for focus states of Anchor, MenuItem, and focusable Tooltip target.
Codecademy · Oct 10, 2023 · 28ccb9d · 28ccb9d
1 parent 7c691ea
commit 28ccb9d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 13 deletions.
diff --git a/packages/gamut/src/Anchor/index.tsx b/packages/gamut/src/Anchor/index.tsx
@@ -41,6 +41,9 @@ const anchorVariants = variant({
       textDecoration: 'none',
       color: 'text-disabled',
     },
+    [ButtonSelectors.FOCUS_VISIBLE]: {
+      outline: 'none',
+    },
     [ButtonSelectors.OUTLINE_FOCUS_VISIBLE]: {
       opacity: 1,
     },
@@ -51,19 +54,12 @@ const anchorVariants = variant({
       [ButtonSelectors.HOVER]: {
         textDecoration: 'underline',
       },
-      [ButtonSelectors.FOCUS_VISIBLE]: {
-        color: 'text',
-      },
     },
     inline: {
       display: 'inline',
       whiteSpace: 'initial',
       textDecoration: 'underline',
-      [ButtonSelectors.OUTLINE]: {
-        display: 'none',
-      },
       [ButtonSelectors.FOCUS_VISIBLE]: {
-        outline: 'currentColor auto 4px',
         textDecoration: 'underline',
       },
     },

diff --git a/packages/gamut/src/Menu/elements.tsx b/packages/gamut/src/Menu/elements.tsx
@@ -1,7 +1,6 @@
 import {
   styledOptions,
   system,
-  theme,
   transitionConcat,
 } from '@codecademy/gamut-styles';
 import { StyleProps, variance } from '@codecademy/variance';
@@ -11,6 +10,11 @@ import { ComponentProps, forwardRef } from 'react';
 import { sharedStates } from '../Box/props';
 import { resetStyles, Selectors } from '../ButtonBase/ButtonBase';
 
+enum MenuItemSelectors {
+  OUTLINE = '&:after',
+  OUTLINE_FOCUS_VISIBLE = '&:focus-visible:after',
+}
+
 type ListStyleProps = StyleProps<typeof listProps>;
 
 type StyleStateProps = StyleProps<typeof sharedStates>;
@@ -81,8 +85,20 @@ const interactiveVariants = system.variant({
       'linear'
     ),
     [Selectors.FOCUS_VISIBLE]: {
-      outline: `${theme.colors.primary} auto 2px`,
-      outlineOffset: '-2px',
+      outline: 'none',
+    },
+    [MenuItemSelectors.OUTLINE]: {
+      content: "''",
+      position: 'absolute',
+      inset: 4,
+      borderRadius: '4px',
+      border: 2,
+      borderColor: 'primary',
+      opacity: 0,
+      zIndex: 0,
+    },
+    [MenuItemSelectors.OUTLINE_FOCUS_VISIBLE]: {
+      opacity: 1,
     },
   },
   variants: {

diff --git a/packages/gamut/src/ToolTip/elements.tsx b/packages/gamut/src/ToolTip/elements.tsx
@@ -1,8 +1,9 @@
-import { css, theme } from '@codecademy/gamut-styles';
+import { css } from '@codecademy/gamut-styles';
 import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
 
 import { Box } from '../Box';
+import { Selectors } from '../ButtonBase/ButtonBase';
 import {
   toolTipAlignmentVariants,
   toolTipBodyAlignments,
@@ -13,15 +14,33 @@ export const TooltipWrapper = styled.div(
   css({ position: 'relative', display: 'inline-flex' })
 );
 
+enum TargetSelectors {
+  OUTLINE = '&:before',
+  OUTLINE_FOCUS_VISIBLE = '&:focus-visible:before',
+}
+
 export const TargetContainer = styled.div(
   css({
     cursor: 'pointer',
     border: 'none',
     background: 'none',
     padding: 0,
 
-    '&:focus-visible': {
-      outline: `0.3rem auto ${theme.colors['primary-hover']}`,
+    [Selectors.FOCUS_VISIBLE]: {
+      outline: 'none',
+    },
+    [TargetSelectors.OUTLINE]: {
+      content: "''",
+      position: 'absolute',
+      inset: -2,
+      borderRadius: '4px',
+      border: 2,
+      borderColor: 'primary',
+      opacity: 0,
+      zIndex: 0,
+    },
+    [TargetSelectors.OUTLINE_FOCUS_VISIBLE]: {
+      opacity: 1,
     },
   })
 );