Improve focus outline in a few places

elan-ev · Aug 1, 2023 · 92f8a5f · 92f8a5f
1 parent d6e2b30
commit 92f8a5f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/layout/header.tsx b/src/layout/header.tsx
@@ -195,8 +195,7 @@ const HeaderButton = forwardRef<HTMLButtonElement, HeaderButtonProps>(
           outline: `2px solid ${COLORS.neutral50}`,
           backgroundColor: isLight ? COLORS.neutral70 : COLORS.neutral10,
         },
-        "--color-focus": isLight ? COLORS.neutral10 : COLORS.neutral90,
-        ...focusStyle(),
+        ...focusStyle({}, isLight ? COLORS.neutral10 : COLORS.accent8),
 
         "> svg": {
           fontSize: 22,

diff --git a/src/steps/review/control-box.tsx b/src/steps/review/control-box.tsx
@@ -7,7 +7,7 @@ import { useStudioState, useDispatch, Dispatcher } from "../../studio-state";
 import { useSettings } from "../../settings";
 import CutHereIcon from "./cut-here-icon.svg";
 import CutMarkerIcon from "./cut-marker.svg";
-import { COLORS } from "../../util";
+import { COLORS, focusStyle } from "../../util";
 import { ALMOST_ZERO } from ".";
 import { PreviewHandle } from "./preview";
 import { SHORTCUTS, ShortcutKeys, useShortcut, useShowAvailableShortcuts } from "../../shortcuts";
@@ -389,7 +389,8 @@ const Controls: React.FC<SharedProps> = ({ currentTime, previewController }) =>
             justifyContent: "center",
             alignItems: "center",
             fontSize: 24,
-            "&:hover": {
+            ...focusStyle({ offset: 1 }),
+            "&:hover, :focus-visible": {
               backgroundColor: COLORS.accent8,
             },
           }}
@@ -504,6 +505,7 @@ const CutControls: React.FC<CutControlsProps> = (
           padding: "4px 8px",
           paddingTop: 4,
           borderRadius: 4,
+          ...focusStyle(),
           "&:disabled": {
             opacity: 0.3,
           },

diff --git a/src/util/index.tsx b/src/util/index.tsx
@@ -13,8 +13,16 @@ export const COLORS = APPKIT_CONFIG.colors;
 /** Breakpoint values */
 export const BREAKPOINTS = APPKIT_CONFIG.breakpoints;
 
-export const focusStyle = (options?: Parameters<typeof appkitFocusStyle>[1]) =>
-  appkitFocusStyle(APPKIT_CONFIG, options);
+export const focusStyle = (options?: Parameters<typeof appkitFocusStyle>[1], color?: string) => {
+  let config = APPKIT_CONFIG;
+  if (color) {
+    config = {
+      colors: { ...APPKIT_CONFIG.colors, focus: color },
+      breakpoints: APPKIT_CONFIG.breakpoints,
+    };
+  }
+  return appkitFocusStyle(config, options);
+};
 
 /**
  * Checks if we app is running on a mobile device.