Use focus indicator on ColorIndicator, not ColorPicker

openstax · Jul 17, 2024 · 3750321 · 3750321
1 parent e681421
commit 3750321
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/app/content/highlights/components/ColorIndicator.tsx b/src/app/content/highlights/components/ColorIndicator.tsx
@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components/macro';
 import { Check } from 'styled-icons/fa-solid/Check';
 import { isDefined } from '../../../guards';
 import { highlightStyles } from '../../constants';
+import { defaultFocusOutline } from '../../../theme';
 
 interface StyleProps {
   style: typeof highlightStyles[number];
@@ -105,6 +106,11 @@ const ColorIndicator = styled(Hoc)`
       display: block;
     `}
   }
+
+  input:focus + ${FocusedStyle} {
+    display: block;
+    ${defaultFocusOutline}
+  }
 `;
 
 export default ColorIndicator;
diff --git a/src/app/content/highlights/components/ColorPicker.tsx b/src/app/content/highlights/components/ColorPicker.tsx
@@ -7,7 +7,6 @@ import { highlightStyles } from '../../constants';
 import { cardPadding } from '../constants';
 import ColorIndicator from './ColorIndicator';
 import { HTMLDivElement, HTMLInputElement } from '@openstax/types/lib.dom';
-import { defaultFocusOutline } from '../../../theme';
 
 interface SingleSelectProps {
   color?: HighlightColorEnum;
@@ -62,10 +61,6 @@ const ColorButton = styled(({className, size, style, ...props}: ColorButtonProps
     height: 0;
     width: 0;
   }
-
-  :focus-within {
-    ${defaultFocusOutline}
-  }
 `;
 
 type NavKeys = 'Home' | 'End' | 'ArrowLeft' | 'ArrowRight' | ' ' | 'Enter';