[Search][a11y] Fix tooltip missing on keyboard navigation (elastic#20…

…1385) ## Closes elastic#196707 Move the `EuiButtonEmpty` element to inside the `EuiTooltip`. The tooltip being nested inside the button was preventing the tooltip from appearing when focusing with a keyboard.
banderror · Nov 27, 2024 · 0131eb2 · 0131eb2
1 parent 2e418d4
commit 0131eb2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/...s/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx b/...s/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx
@@ -51,17 +51,11 @@ export const TrainedModelHealthPopover: React.FC<InferencePipeline> = (pipeline)
   const { pipelineName } = pipeline;
 
   const actionButton = (
-    <EuiButtonEmpty
-      iconSide="right"
-      flush="both"
-      iconType="boxesHorizontal"
-      onClick={() => setIsPopOverOpen(!isPopOverOpen)}
-    >
-      <TrainedModelHealth
-        modelState={pipeline.modelState}
-        modelStateReason={pipeline.modelStateReason}
-      />
-    </EuiButtonEmpty>
+    <TrainedModelHealth
+      modelState={pipeline.modelState}
+      modelStateReason={pipeline.modelStateReason}
+      onClickAction={() => setIsPopOverOpen(!isPopOverOpen)}
+    />
   );
 
   const showConfirmDeleteModal = () => {
@@ -81,6 +75,7 @@ export const TrainedModelHealthPopover: React.FC<InferencePipeline> = (pipeline)
             <EuiFlexItem>
               <span>
                 <EuiButtonEmpty
+                  data-test-subj="enterpriseSearchTrainedModelHealthPopoverFixIssueInTrainedModelsButton"
                   data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-fixIssueInTrainedModels`}
                   size="s"
                   flush="both"
@@ -101,6 +96,7 @@ export const TrainedModelHealthPopover: React.FC<InferencePipeline> = (pipeline)
           <EuiFlexItem>
             <span>
               <EuiButtonEmpty
+                data-test-subj="enterpriseSearchTrainedModelHealthPopoverViewInStackManagementButton"
                 data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-stackManagement`}
                 size="s"
                 flush="both"
@@ -119,6 +115,7 @@ export const TrainedModelHealthPopover: React.FC<InferencePipeline> = (pipeline)
           <EuiFlexItem>
             <span>
               <EuiButtonEmpty
+                data-test-subj="enterpriseSearchTrainedModelHealthPopoverDetachPipelineButton"
                 data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-detachPipeline`}
                 size="s"
                 flush="both"

diff --git a/...lications/enterprise_search_content/components/search_index/pipelines/ml_model_health.tsx b/...lications/enterprise_search_content/components/search_index/pipelines/ml_model_health.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { EuiHealth, EuiToolTip } from '@elastic/eui';
+import { EuiButtonEmpty, EuiHealth, EuiToolTip } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -113,12 +113,14 @@ export interface TrainedModelHealthProps {
   modelState: TrainedModelState | MlModelDeploymentState;
   modelStateReason?: string;
   isDownloadable?: boolean;
+  onClickAction?: Function;
 }
 
 export const TrainedModelHealth: React.FC<TrainedModelHealthProps> = ({
   modelState,
   modelStateReason,
   isDownloadable,
+  onClickAction,
 }) => {
   let modelHealth: {
     healthColor: string;
@@ -207,7 +209,19 @@ export const TrainedModelHealth: React.FC<TrainedModelHealthProps> = ({
   }
   return (
     <EuiToolTip content={modelHealth.tooltipText}>
-      <EuiHealth color={modelHealth.healthColor}>{modelHealth.healthText}</EuiHealth>
+      {onClickAction ? (
+        <EuiButtonEmpty
+          data-test-subj="enterpriseSearchTrainedModelHealthPopoverButton"
+          iconSide="right"
+          flush="both"
+          iconType="boxesHorizontal"
+          onClick={() => onClickAction()}
+        >
+          <EuiHealth color={modelHealth.healthColor}>{modelHealth.healthText}</EuiHealth>
+        </EuiButtonEmpty>
+      ) : (
+        <EuiHealth color={modelHealth.healthColor}>{modelHealth.healthText}</EuiHealth>
+      )}
     </EuiToolTip>
   );
 };