(Accessibility) Nested buttons in visualization editor (#125088)

* (Accessibility) Nested buttons in visualization editor

* Update tests and snapshots

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/vis_default_editor/public/components/__snapshots__/agg.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`DefaultEditorAgg component should init with the default set of props 1`
   data-test-subj="visEditorAggAccordion1"
   element="div"
   extraAction={
-    <div>
+    <React.Fragment>
       <EuiToolTip
         content="Enable   aggregation"
         delay="regular"
@@ -32,7 +32,7 @@ exports[`DefaultEditorAgg component should init with the default set of props 1`
           onClick={[Function]}
         />
       </EuiToolTip>
-    </div>
+    </React.Fragment>
   }
   id="visEditorAggAccordion1"
   initialIsOpen={true}

src/plugins/vis_default_editor/public/components/__snapshots__/agg_group.test.tsx.snap

@@ -23,6 +23,7 @@ exports[`DefaultEditorAgg component should init with the default set of props 1`
     >
       <EuiDraggable
         customDragHandle={true}
+        disableInteractiveElementBlocking={true}
         draggableId="agg_group_dnd_metrics_1"
         index={0}
         key="1"
@@ -31,6 +32,7 @@ exports[`DefaultEditorAgg component should init with the default set of props 1`
       </EuiDraggable>
       <EuiDraggable
         customDragHandle={true}
+        disableInteractiveElementBlocking={true}
         draggableId="agg_group_dnd_metrics_3"
         index={1}
         key="3"

src/plugins/vis_default_editor/public/components/agg.test.tsx

@@ -171,9 +171,9 @@ describe('DefaultEditorAgg component', () => {
 
     it('should not have actions', () => {
       const comp = shallow(<DefaultEditorAgg {...defaultProps} />);
-      const actions = shallow(comp.prop('extraAction'));
+      const actions = comp.prop('extraAction');
 
-      expect(actions.children().exists()).toBeFalsy();
+      expect(actions).toBeNull();
     });
 
     it('should have disable and remove actions', () => {

src/plugins/vis_default_editor/public/components/agg.tsx

@@ -13,7 +13,6 @@ import {
   EuiButtonIcon,
   EuiButtonIconProps,
   EuiSpacer,
-  EuiIconTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -198,6 +197,7 @@ function DefaultEditorAgg({
     if (isDraggable) {
       actionIcons.push({
         id: 'dragHandle',
+        color: 'text',
         type: 'grab',
         tooltip: i18n.translate('visDefaultEditor.agg.modifyPriorityButtonTooltip', {
           defaultMessage: 'Modify priority of {schemaTitle} {aggTitle} by dragging',
@@ -219,39 +219,23 @@ function DefaultEditorAgg({
         dataTestSubj: 'removeDimensionBtn',
       });
     }
-    return (
-      <div {...dragHandleProps}>
-        {actionIcons.map((icon) => {
-          if (icon.id === 'dragHandle') {
-            return (
-              <EuiIconTip
-                key={icon.id}
-                type={icon.type}
-                content={icon.tooltip}
-                iconProps={{
-                  ['aria-label']: icon.tooltip,
-                  ['data-test-subj']: icon.dataTestSubj,
-                }}
-                position="bottom"
-              />
-            );
-          }
-
-          return (
-            <EuiToolTip key={icon.id} position="bottom" content={icon.tooltip}>
-              <EuiButtonIcon
-                disabled={icon.disabled}
-                iconType={icon.type}
-                color={icon.color as EuiButtonIconProps['color']}
-                onClick={icon.onClick}
-                aria-label={icon.tooltip}
-                data-test-subj={icon.dataTestSubj}
-              />
-            </EuiToolTip>
-          );
-        })}
-      </div>
-    );
+    return actionIcons.length ? (
+      <>
+        {actionIcons.map((icon) => (
+          <EuiToolTip key={icon.id} position="bottom" content={icon.tooltip}>
+            <EuiButtonIcon
+              disabled={icon.disabled}
+              iconType={icon.type}
+              color={icon.color as EuiButtonIconProps['color']}
+              onClick={icon.onClick}
+              aria-label={icon.tooltip}
+              data-test-subj={icon.dataTestSubj}
+              {...(icon.id === 'dragHandle' ? dragHandleProps : {})}
+            />
+          </EuiToolTip>
+        ))}
+      </>
+    ) : null;
   };
 
   const buttonContent = (

src/plugins/vis_default_editor/public/components/agg_group.tsx

@@ -153,6 +153,7 @@ function DefaultEditorAggGroup({
                 index={index}
                 draggableId={`agg_group_dnd_${groupName}_${agg.id}`}
                 customDragHandle={true}
+                disableInteractiveElementBlocking // Allows button to be drag handle
               >
                 {(provided) => (
                   <DefaultEditorAgg