Explicitly hide the focus ring in Chrome

zooniverse · Jun 27, 2024 · 30cda16 · 30cda16
1 parent ea7e3f6
commit 30cda16
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/...SubjectViewer/components/InteractionLayer/components/TranscribedLines/TranscribedLines.js b/...SubjectViewer/components/InteractionLayer/components/TranscribedLines/TranscribedLines.js
@@ -15,6 +15,10 @@ export const ConsensusLine = styled('g')`
   cursor: pointer;
   filter: drop-shadow(1px 1px 4px #5c5c5c);
 
+  &:focus {
+    outline: none;
+  }
+
   &:focus-visible {
     ${props => css`outline: solid 4px ${props.focusColor};`}
   }

diff --git a/packages/lib-classifier/src/plugins/drawingTools/components/Mark/Mark.js b/packages/lib-classifier/src/plugins/drawingTools/components/Mark/Mark.js
@@ -7,7 +7,11 @@ import draggable from '../draggable'
 const STROKE_WIDTH = 2
 const SELECTED_STROKE_WIDTH = 4
 
-const StyledGroup = styled('g')`
+const StyledGroup = styled.g`
+  &:focus {
+    outline: none;
+  }
+
   &:focus-visible {
     ${(props) =>
     css`