refactor: remove tabindex from drag wrapper for fully custom draggabl…

…e elements - ensure we use the rowing tabindex and don't add additional unwanted tab stops
elastic · Sep 16, 2024 · 141c294 · 141c294
1 parent c63545a
commit 141c294
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 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
@@ -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
@@ -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
               }