From 141c29433a43f7f74809435d08af0ceae1ab85e8 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Mon, 16 Sep 2024 10:07:50 +0200
Subject: [PATCH] refactor: remove tabindex from drag wrapper for fully custom
 draggable elements

- ensure we use the rowing tabindex and don't add additional unwanted tab stops
---
 .../datagrid/body/header/data_grid_header_cell.tsx         | 1 +
 packages/eui/src/components/drag_and_drop/draggable.tsx    | 7 ++++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx
index 4ab244a4cda8..298c20d79d6b 100644
--- a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx
+++ b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx
@@ -317,6 +317,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
             {({ draggableProps, dragHandleProps }, { isDragging }) => {
               const {
                 role, // extracting role to not pass it along
+                tabIndex, // we want to use the columnheader rowing tabindex instead
                 'aria-describedby': ariaDescribedby,
                 ...restDragHandleProps
               } = dragHandleProps ?? {};
diff --git a/packages/eui/src/components/drag_and_drop/draggable.tsx b/packages/eui/src/components/drag_and_drop/draggable.tsx
index 31e211cd8c44..02951b070bd3 100644
--- a/packages/eui/src/components/drag_and_drop/draggable.tsx
+++ b/packages/eui/src/components/drag_and_drop/draggable.tsx
@@ -82,6 +82,7 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
     >
       {(provided, snapshot, rubric) => {
         const { isDragging } = snapshot;
+        const isFullyCustomDragHandle = customDragHandle === 'custom';
 
         const cssStyles = [
           styles.euiDraggable,
@@ -102,7 +103,7 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
         return (
           <>
             <div
-              {...(customDragHandle === 'custom' && isDragging
+              {...(isFullyCustomDragHandle && isDragging
                 ? {}
                 : provided.draggableProps)}
               {...(!hasCustomDragHandle ? provided.dragHandleProps : {})}
@@ -117,14 +118,14 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
               role={
                 hasInteractiveChildren
                   ? 'group'
-                  : customDragHandle === 'custom'
+                  : isFullyCustomDragHandle
                   ? undefined // prevent wrapper role from removing semantics of the children
                   : provided.dragHandleProps?.role
               }
               // If the container includes an interactive element, we remove the tabindex=0
               // because [role="group"] does not permit or warrant a tab stop
               tabIndex={
-                hasInteractiveChildren
+                hasInteractiveChildren || isFullyCustomDragHandle
                   ? undefined
                   : provided.dragHandleProps?.tabIndex
               }