From 5abd42ae13845466d33833cd7dad01ef2787ce3a Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 19 Aug 2024 10:31:07 -0700
Subject: [PATCH] [PR feedback] Fix focus outline for webkit browsers

- Chrome/Edge's auto style defaults to currentColor which is the empty shade, so its invisible

- Safari's is just godawful
---
 packages/eui/src/components/form/form.styles.test.tsx | 2 +-
 packages/eui/src/components/form/form.styles.ts       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/eui/src/components/form/form.styles.test.tsx b/packages/eui/src/components/form/form.styles.test.tsx
index 7d39a7b5865..4fd5cddcb96 100644
--- a/packages/eui/src/components/form/form.styles.test.tsx
+++ b/packages/eui/src/components/form/form.styles.test.tsx
@@ -263,7 +263,7 @@ describe('euiFormCustomControlStyles', () => {
               }
 
               &:has(input:focus-visible) {
-                outline-style: auto;
+                outline: 2px solid #07C;
                 outline-offset: 2px;
               }
 
diff --git a/packages/eui/src/components/form/form.styles.ts b/packages/eui/src/components/form/form.styles.ts
index cb3a3a2acb2..3fb08bd23ce 100644
--- a/packages/eui/src/components/form/form.styles.ts
+++ b/packages/eui/src/components/form/form.styles.ts
@@ -393,7 +393,7 @@ export const euiFormCustomControlStyles = (euiThemeContext: UseEuiTheme) => {
         }
 
         &:has(input:focus-visible) {
-          outline-style: auto;
+          outline: ${euiTheme.focus.width} solid ${controlVars.colors.selected};
           outline-offset: ${euiTheme.focus.width};
         }