[Infra] Change popovers to use actual buttons (#175090)

closes [#172561](#172561) ## Summary This PR makes all popovers/tooltips across Hosts view and asset details interactable via the keyboard https://github.com/elastic/kibana/assets/2767137/db784fd2-9428-4239-b3ee-6782738c7c63 ## How to test - Setup a local Kibana instance - Navigate to Infrastructure > Hosts - Start hitting tab until you reach an icon, then press space to open the popover and esc to close it. --------- Co-authored-by: Kibana Machine <[email protected]>
elastic · Jan 22, 2024 · 89504a8 · 89504a8
1 parent a8bb2a5
commit 89504a8
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 49 deletions.
diff --git a/x-pack/plugins/infra/public/components/asset_details/links/link_to_alerts_page.tsx b/x-pack/plugins/infra/public/components/asset_details/links/link_to_alerts_page.tsx
@@ -58,7 +58,7 @@ export const LinkToAlertsHomePage = () => {
   const linkToAlertsPage = http.basePath.prepend(ALERTS_PATH);
 
   return (
-    <RedirectAppLinks coreStart={services}>
+    <RedirectAppLinks coreStart={services} style={{ display: 'inline-block' }}>
       <EuiLink data-test-subj="assetDetailsTooltipDocumentationLink" href={linkToAlertsPage}>
         <FormattedMessage
           id="xpack.infra.assetDetails.table.tooltip.alertsLink"

diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/common/popover.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/common/popover.tsx
@@ -6,7 +6,6 @@
  */
 
 import { EuiPopover, EuiIcon, type IconType, type IconColor, type IconSize } from '@elastic/eui';
-import { css } from '@emotion/react';
 import React from 'react';
 import { useBoolean } from '../../../../hooks/use_boolean';
 
@@ -28,16 +27,13 @@ export const Popover = ({
     <EuiPopover
       panelPaddingSize="s"
       button={
-        <EuiIcon
-          data-test-subj={props['data-test-subj']}
-          type={icon}
-          color={iconColor ?? 'text'}
-          size={iconSize ?? 'original'}
-          onClick={togglePopover}
-          css={css`
-            cursor: pointer;
-          `}
-        />
+        <button onClick={togglePopover} data-test-subj={props['data-test-subj']}>
+          <EuiIcon
+            type="questionInCircle"
+            color={iconColor ?? 'text'}
+            size={iconSize ?? 'original'}
+          />
+        </button>
       }
       isOpen={isPopoverOpen}
       offset={10}

diff --git a/...etrics/hosts/components/table/popover.tsx → ...trics/hosts/components/common/popover.tsx b/...etrics/hosts/components/table/popover.tsx → ...trics/hosts/components/common/popover.tsx
@@ -5,17 +5,15 @@
  * 2.0.
  */
 
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback } from 'react';
 import { EuiPopover, EuiIcon } from '@elastic/eui';
-import { css } from '@emotion/react';
 import { useBoolean } from '../../../../../hooks/use_boolean';
 
 export const Popover = ({ children }: { children: React.ReactNode }) => {
-  const buttonRef = useRef<HTMLDivElement | null>(null);
   const [isPopoverOpen, { off: closePopover, toggle: togglePopover }] = useBoolean(false);
 
   const onButtonClick = useCallback(
-    (e: React.MouseEvent<SVGElement>) => {
+    (e: React.MouseEvent<HTMLButtonElement>) => {
       e.preventDefault();
       e.stopPropagation();
       togglePopover();
@@ -26,17 +24,10 @@ export const Popover = ({ children }: { children: React.ReactNode }) => {
   return (
     <EuiPopover
       panelPaddingSize="s"
-      ownFocus={false}
-      buttonRef={(el) => (buttonRef.current = el)}
       button={
-        <EuiIcon
-          data-test-subj="hostsViewTableColumnPopoverButton"
-          type="questionInCircle"
-          css={css`
-            cursor: pointer;
-          `}
-          onClick={onButtonClick}
-        />
+        <button onClick={onButtonClick} data-test-subj="hostsViewTableColumnPopoverButton">
+          <EuiIcon type="questionInCircle" />
+        </button>
       }
       isOpen={isPopoverOpen}
       closePopover={closePopover}

diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/search_bar/controls_title.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/search_bar/controls_title.tsx
@@ -6,31 +6,33 @@
  */
 
 import React from 'react';
-import { EuiFormLabel, EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFormLabel, EuiText, EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { availableControlsPanels } from '../../hooks/use_control_panels_url_state';
-import { Popover } from '../table/popover';
+import { Popover } from '../common/popover';
 
 const helpMessages = {
   [availableControlsPanels.SERVICE_NAME]: (
-    <FormattedMessage
-      id="xpack.infra.hostsViewPage.serviceNameControl.popoverHelpLabel"
-      defaultMessage="Services detected via {APMDocs}"
-      values={{
-        APMDocs: (
-          <EuiLink
-            href="https://ela.st/docs-infra-apm"
-            target="_blank"
-            data-test-subj="hostsViewServiceNameControlPopoverHelpLink"
-          >
-            <FormattedMessage
-              id="xpack.infra.hostsViewPage.serviceNameControl.popoverHelpLink"
-              defaultMessage="APM"
-            />
-          </EuiLink>
-        ),
-      }}
-    />
+    <EuiText size="xs">
+      <FormattedMessage
+        id="xpack.infra.hostsViewPage.serviceNameControl.popoverHelpLabel"
+        defaultMessage="Services detected via {APMDocs}"
+        values={{
+          APMDocs: (
+            <EuiLink
+              href="https://ela.st/docs-infra-apm"
+              target="_blank"
+              data-test-subj="hostsViewServiceNameControlPopoverHelpLink"
+            >
+              <FormattedMessage
+                id="xpack.infra.hostsViewPage.serviceNameControl.popoverHelpLink"
+                defaultMessage="APM"
+              />
+            </EuiLink>
+          ),
+        }}
+      />
+    </EuiText>
   ),
 };
 

diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/search_bar/limit_options.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/search_bar/limit_options.tsx
@@ -62,7 +62,9 @@ export const LimitOptions = ({ limit, onChange }: Props) => {
           })}
           anchorClassName="eui-fullWidth"
         >
-          <EuiIcon type="iInCircle" size="m" />
+          <button data-test-subj="hostsViewLimitOptionsButton">
+            <EuiIcon type="iInCircle" />
+          </button>
         </EuiToolTip>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>

diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/table/column_header.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/table/column_header.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { EuiFlexGroup } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { TooltipContent } from '../../../../../components/lens/metric_explanation/tooltip_content';
-import { Popover } from './popover';
+import { Popover } from '../common/popover';
 
 interface Props {
   label: string;

diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metrics_grid.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metrics_grid.tsx
@@ -11,7 +11,7 @@ import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
 import useAsync from 'react-use/lib/useAsync';
 import { HostMetricsExplanationContent } from '../../../../../../components/lens';
 import { Chart } from './chart';
-import { Popover } from '../../table/popover';
+import { Popover } from '../../common/popover';
 import { useMetricsDataViewContext } from '../../../hooks/use_data_view';
 
 export const MetricsGrid = () => {