From 3750321014c5fb516d9d50357e77816eb988ef52 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Wed, 17 Jul 2024 12:25:27 -0500
Subject: [PATCH] Use focus indicator on ColorIndicator, not ColorPicker

---
 src/app/content/highlights/components/ColorIndicator.tsx | 6 ++++++
 src/app/content/highlights/components/ColorPicker.tsx    | 5 -----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/content/highlights/components/ColorIndicator.tsx b/src/app/content/highlights/components/ColorIndicator.tsx
index 452b5298f1b..ff47716da87 100644
--- 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
index 0e81b665663..415ae6f8c2b 100644
--- 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';