[EuiDraggable] Convert broken focus styles

cee-chen · cee-chen · commit 6e1823e6661f · 2023-09-13T17:47:05.000-07:00
`euiFocusRing` mixin doesn't work because of `:focus-visible`

prefer just an auto outline to match prod behavior, the outline is just more focused on the child item

not sure what the custom drag handle CSS is for, drag handle focus outlines work fine as-is
diff --git a/src/components/drag_and_drop/_draggable.scss b/src/components/drag_and_drop/_draggable.scss
@@ -1,6 +0,0 @@
-.euiDraggable {
-  &:focus > .euiDraggable__item,
-  &.euiDraggable--hasCustomDragHandle > .euiDraggable__item [data-react-beautiful-dnd-drag-handle]:focus {
-    @include euiFocusRing;
-  }
-}
diff --git a/src/components/drag_and_drop/draggable.styles.ts b/src/components/drag_and_drop/draggable.styles.ts
@@ -16,6 +16,14 @@ export const euiDraggableStyles = (euiThemeContext: UseEuiTheme) => {
 
   return {
     euiDraggable: css`
+      &:focus {
+        outline: none;
+
+        & > .euiDraggable__item {
+          outline: auto;
+        }
+      }
+
       /* !importants in this file override inline styles on JS-inserted HTML elements */
       /* stylelint-disable declaration-no-important */
     `,
