fix: [Obs AI Ops > Anomaly Detection][KEYBOARD]: Anomalies table has …

…a number of tooltips that cannot receive keyboard focus (elastic#184198) Closes: elastic/observability-dev#3397 ## Description The Obs Anomaly Detection Single Metric Viewer has an Anomalies table with at least three tooltips that cannot be reached by keyboard focus. Screenshot attached below. ### Steps to recreate 1. Open the [Obs Anomaly Detection](https://issue-serverless-alpbx-pr180406-c06b1b.kb.eu-west-1.aws.qa.elastic.cloud/app/ml/jobs) view 2. Create a new anomaly detection job 3. From the Anomaly Detection Jobs table, click the Single Metric Viewer icon 4. Tab through the page, to the Anomalies table underneath the chart 5. Keep tabbing through the table 6. Verify the tooltips in the Severity, Actual, and Typical columns do not become visible
fkanout · May 29, 2024 · d5842d7 · d5842d7
1 parent 81191c9
commit d5842d7
Showing 1 changed file with 41 additions and 32 deletions.
diff --git a/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js b/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiButtonIcon, EuiLink, EuiScreenReaderOnly, EuiToolTip, EuiIcon } from '@elastic/eui';
+import { EuiButtonIcon, EuiLink, EuiScreenReaderOnly, EuiIconTip } from '@elastic/eui';
 
 import React from 'react';
 import { get } from 'lodash';
@@ -116,19 +116,22 @@ export function getColumns(
       field: 'severity',
       'data-test-subj': 'mlAnomaliesListColumnSeverity',
       name: (
-        <EuiToolTip
-          content={i18n.translate('xpack.ml.overview.anomalyDetection.tableSeverityTooltip', {
-            defaultMessage:
-              'A normalized score between 0-100, which indicates the relative significance of the anomaly record results.',
+        <span>
+          {i18n.translate('xpack.ml.anomaliesTable.severityColumnName', {
+            defaultMessage: 'Severity',
           })}
-        >
-          <span>
-            {i18n.translate('xpack.ml.anomaliesTable.severityColumnName', {
-              defaultMessage: 'Severity',
+          &nbsp;
+          <EuiIconTip
+            size="s"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            content={i18n.translate('xpack.ml.overview.anomalyDetection.tableSeverityTooltip', {
+              defaultMessage:
+                'A normalized score between 0-100, which indicates the relative significance of the anomaly record results.',
             })}
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </span>
-        </EuiToolTip>
+          />
+        </span>
       ),
       render: (score, item) => (
         <SeverityCell score={score} isMultiBucketAnomaly={isMultiBucketAnomaly(item.source)} />
@@ -196,18 +199,21 @@ export function getColumns(
       field: 'actualSort',
       'data-test-subj': 'mlAnomaliesListColumnActual',
       name: (
-        <EuiToolTip
-          content={i18n.translate('xpack.ml.overview.anomalyDetection.tableActualTooltip', {
-            defaultMessage: 'The actual values in the anomaly record results.',
+        <span>
+          {i18n.translate('xpack.ml.anomaliesTable.actualSortColumnName', {
+            defaultMessage: 'Actual',
           })}
-        >
-          <span>
-            {i18n.translate('xpack.ml.anomaliesTable.actualSortColumnName', {
-              defaultMessage: 'Actual',
+          &nbsp;
+          <EuiIconTip
+            size="s"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            content={i18n.translate('xpack.ml.overview.anomalyDetection.tableActualTooltip', {
+              defaultMessage: 'The actual values in the anomaly record results.',
             })}
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </span>
-        </EuiToolTip>
+          />
+        </span>
       ),
       render: (actual, item) => {
         const fieldFormat = mlFieldFormatService.getFieldFormat(
@@ -226,18 +232,21 @@ export function getColumns(
       field: 'typicalSort',
       'data-test-subj': 'mlAnomaliesListColumnTypical',
       name: (
-        <EuiToolTip
-          content={i18n.translate('xpack.ml.overview.anomalyDetection.tableTypicalTooltip', {
-            defaultMessage: 'The typical values in the anomaly record results.',
+        <span>
+          {i18n.translate('xpack.ml.anomaliesTable.typicalSortColumnName', {
+            defaultMessage: 'Typical',
           })}
-        >
-          <span>
-            {i18n.translate('xpack.ml.anomaliesTable.typicalSortColumnName', {
-              defaultMessage: 'Typical',
+          &nbsp;
+          <EuiIconTip
+            size="s"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            content={i18n.translate('xpack.ml.overview.anomalyDetection.tableTypicalTooltip', {
+              defaultMessage: 'The typical values in the anomaly record results.',
             })}
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </span>
-        </EuiToolTip>
+          />
+        </span>
       ),
       render: (typical, item) => {
         const fieldFormat = mlFieldFormatService.getFieldFormat(