fix: [Obs Infrastructure > Inventory][KEYBOARD]: Kubernetes Pods Crea…

…te Inventory Rule modal has tooltip that does not take keyboard focus (#184407) Closes: elastic/observability-dev#3416 ## Description The Obs Applications > Infrastructure > Kubernetes Pods view a tooltip in the Create Inventory Rule modal that does not take keyboard focus. This needs to be adjusted so keyboard users get the benefit of the tooltip information. Screenshot attached below. ### Steps to recreate 1. Open the [Obs Inventory](https://issue-serverless-bdwqw-pr183659-f2d99b.kb.eu-west-1.aws.qa.elastic.cloud/app/metrics/inventory) view 2. Click the first dropdown and switch from `Hosts` to `Kubernetes Pods` 3. Click on a pod to open the Kubernetes pod popover 4. Click "Create Inventory Rule" button (has the bell icon) 5. Press `Tab` to move through the Create Inventory Rule modal 6. Verify the tooltip next to "Alert me if there is no data" never opens ### What was changed?: 1. EuiToolTip was replaced with EuiIconTip as a more accessible component. 2. The fix was applied to similar duplicate places.
elastic · Jun 4, 2024 · e3ca2c5 · e3ca2c5
1 parent 01a2926
commit e3ca2c5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 22 deletions.
diff --git a/.../plugins/observability_solution/infra/public/alerting/inventory/components/expression.tsx b/.../plugins/observability_solution/infra/public/alerting/inventory/components/expression.tsx
@@ -12,11 +12,10 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
+  EuiIconTip,
   EuiHealth,
-  EuiIcon,
   EuiSpacer,
   EuiText,
-  EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
@@ -360,14 +359,14 @@ export const Expressions: React.FC<Props> = (props) => {
             {i18n.translate('xpack.infra.metrics.alertFlyout.alertOnNoData', {
               defaultMessage: "Alert me if there's no data",
             })}{' '}
-            <EuiToolTip
+            <EuiIconTip
+              type="questionInCircle"
+              color="subdued"
               content={i18n.translate('xpack.infra.metrics.alertFlyout.noDataHelpText', {
                 defaultMessage:
                   'Enable this to trigger the action if the metric(s) do not report any data over the expected time period, or if the alert fails to query Elasticsearch',
               })}
-            >
-              <EuiIcon type="questionInCircle" color="subdued" />
-            </EuiToolTip>
+            />
           </>
         }
         checked={ruleParams.alertOnNoData}

diff --git a/...s/observability_solution/infra/public/alerting/metric_threshold/components/expression.tsx b/...s/observability_solution/infra/public/alerting/metric_threshold/components/expression.tsx
@@ -11,12 +11,11 @@ import {
   EuiCheckbox,
   EuiFieldSearch,
   EuiFormRow,
-  EuiIcon,
+  EuiIconTip,
   EuiLink,
   EuiPanel,
   EuiSpacer,
   EuiText,
-  EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -370,17 +369,17 @@ export const Expressions: React.FC<Props> = (props) => {
                 {i18n.translate('xpack.infra.metrics.alertFlyout.alertOnNoData', {
                   defaultMessage: "Alert me if there's no data",
                 })}{' '}
-                <EuiToolTip
+                <EuiIconTip
+                  type="questionInCircle"
+                  color="subdued"
                   content={
                     (disableNoData ? `${docCountNoDataDisabledHelpText} ` : '') +
                     i18n.translate('xpack.infra.metrics.alertFlyout.noDataHelpText', {
                       defaultMessage:
                         'Enable this to trigger the action if the metric(s) do not report any data over the expected time period, or if the alert fails to query Elasticsearch',
                     })
                   }
-                >
-                  <EuiIcon type="questionInCircle" color="subdued" />
-                </EuiToolTip>
+                />
               </>
             }
             checked={ruleParams.alertOnNoData}
@@ -471,17 +470,17 @@ export const Expressions: React.FC<Props> = (props) => {
             {i18n.translate('xpack.infra.metrics.alertFlyout.alertOnGroupDisappear', {
               defaultMessage: 'Alert me if a group stops reporting data',
             })}{' '}
-            <EuiToolTip
+            <EuiIconTip
+              type="questionInCircle"
+              color="subdued"
               content={
                 (disableNoData ? `${docCountNoDataDisabledHelpText} ` : '') +
                 i18n.translate('xpack.infra.metrics.alertFlyout.groupDisappearHelpText', {
                   defaultMessage:
                     'Enable this to trigger the action if a previously detected group begins to report no results. This is not recommended for dynamically scaling infrastructures that may rapidly start and stop nodes automatically.',
                 })
               }
-            >
-              <EuiIcon type="questionInCircle" color="subdued" />
-            </EuiToolTip>
+            />
           </>
         }
         disabled={!hasGroupBy}

diff --git a/...ion/observability/public/components/custom_threshold/custom_threshold_rule_expression.tsx b/...ion/observability/public/components/custom_threshold/custom_threshold_rule_expression.tsx
@@ -15,13 +15,12 @@ import {
   EuiFormErrorText,
   EuiFormRow,
   EuiHorizontalRule,
-  EuiIcon,
+  EuiIconTip,
   EuiLink,
   EuiLoadingSpinner,
   EuiSpacer,
   EuiText,
   EuiTitle,
-  EuiToolTip,
 } from '@elastic/eui';
 import { ISearchSource, Query } from '@kbn/data-plugin/common';
 import { DataView } from '@kbn/data-views-plugin/common';
@@ -603,17 +602,17 @@ export default function Expressions(props: Props) {
                 defaultMessage: 'Alert me if a group stops reporting data',
               }
             )}{' '}
-            <EuiToolTip
+            <EuiIconTip
+              type="questionInCircle"
+              color="subdued"
               content={i18n.translate(
                 'xpack.observability.customThreshold.rule.alertFlyout.groupDisappearHelpText',
                 {
                   defaultMessage:
                     'Enable this to trigger the action if a previously detected group begins to report no results. This is not recommended for dynamically scaling infrastructures that may rapidly start and stop nodes automatically.',
                 }
               )}
-            >
-              <EuiIcon type="questionInCircle" color="subdued" />
-            </EuiToolTip>
+            />
           </>
         }
         disabled={!hasGroupBy}