Merge branch 'trap-focus-in-note-menu' of https://github.com/openstax…

…/rex-web into trap-focus-in-note-menu
openstax · Jul 17, 2024 · b7c2cf8 · b7c2cf8
2 parents 3750321 + 4198cb8
commit b7c2cf8
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/src/app/content/highlights/components/ColorIndicator.tsx b/src/app/content/highlights/components/ColorIndicator.tsx
@@ -3,7 +3,6 @@ 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];
@@ -106,11 +105,6 @@ 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,6 +7,7 @@ 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;
@@ -61,6 +62,10 @@ const ColorButton = styled(({className, size, style, ...props}: ColorButtonProps
     height: 0;
     width: 0;
   }
+
+  :focus-within {
+    ${defaultFocusOutline}
+  }
 `;
 
 type NavKeys = 'Home' | 'End' | 'ArrowLeft' | 'ArrowRight' | ' ' | 'Enter';