[EuiDraggable] Convert broken focus styles

`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
elastic · Sep 14, 2023 · 6e1823e · 6e1823e
1 parent 03341cc
commit 6e1823e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
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 */
     `,