fix: [Obs Inventory][KEYBOARD]: The map view tooltips must be availab…

…le on keyboard focus (#187861) Closes: elastic/observability-accessibility#43 Closes: elastic/observability-accessibility#18 ## Description - elastic/observability-accessibility#43: The Observability Inventory map view has a grid of map tiles that each accept a mouse event to show a tooltip. This tooltip must also be available when the tile receives keyboard focus. - elastic/observability-accessibility#18: The Inventory > Kubernetes Pods popover stays open when I click "Create Inventory Rule" and the modal dialog opens. This creates an odd stacking order and obscures content for users at smaller viewport width. ## Steps to recreate 1. Open [Inventory Hosts map view](https://keep-serverless-fyzdg-f07c50.kb.eu-west-1.aws.qa.elastic.cloud/app/metrics/inventory?inventoryViewId=%270%27&waffleFilter=(expression:%27%27,kind:kuery)&waffleTime=(currentTime:1719523489979,isAutoReloading:!f)&waffleOptions=(accountId:%27%27,autoBounds:!t,boundsOverride:(max:1,min:0),customMetrics:!(),customOptions:!(),groupBy:!(),legend:(palette:cool,reverseColors:!f,steps:10),metric:(type:cpu),nodeType:host,region:%27%27,sort:(by:name,direction:desc),timelineOpen:!f,view:map)&assetDetailsFlyout=(assetType:!n,detailsItemId:!n)&assetDetails=!n) 2. Change Hosts to Kubernetes Clusters 3. Try to select specific node using the keyboard ## Screens https://github.com/user-attachments/assets/9ab3b20d-1144-48ed-9760-363f43bafb4b https://github.com/user-attachments/assets/e41bba9f-f3c5-4ce7-bba4-98cf26a2137a
elastic · Aug 22, 2024 · e782811 · e782811
1 parent 44fafb8
commit e782811
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 55 deletions.
diff --git a/...bservability_solution/infra/public/pages/metrics/inventory_view/components/table_view.tsx b/...bservability_solution/infra/public/pages/metrics/inventory_view/components/table_view.tsx
@@ -82,6 +82,7 @@ export const TableView = (props: Props) => {
             isOpen={openPopoverId === uniqueID}
             closePopover={closePopover}
             anchorPosition="rightCenter"
+            zIndex={0}
           >
             <NodeContextMenu
               node={item.node}

diff --git a/...servability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node.tsx b/...servability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node.tsx
@@ -48,7 +48,6 @@ export const Node = ({
   setFlyoutUrlState,
   detailsItemId,
 }: Props) => {
-  const [isToolTipOpen, { off: hideToolTip, on: showToolTip }] = useBoolean(false);
   const [isPopoverOpen, { off: closePopover, toggle: togglePopover }] = useBoolean(false);
 
   const metric = first(node.metrics);
@@ -57,58 +56,52 @@ export const Node = ({
   const value = formatter(rawValue);
 
   const isContainerAssetViewEnabled = useUiSetting(enableInfrastructureContainerAssetView);
-
   const showContainerAssetDetailPage = nodeType === 'container' && isContainerAssetViewEnabled;
+  const isFlyoutMode = nodeType === 'host' || showContainerAssetDetailPage;
 
   const toggleAssetPopover = () => {
-    if (nodeType === 'host' || showContainerAssetDetailPage) {
+    if (isFlyoutMode) {
       setFlyoutUrlState({ detailsItemId: node.id, assetType: nodeType });
     } else {
       togglePopover();
     }
   };
 
   const nodeSquare = (
-    <NodeSquare
-      squareSize={squareSize}
-      togglePopover={toggleAssetPopover}
-      showToolTip={showToolTip}
-      hideToolTip={hideToolTip}
-      color={color}
-      nodeName={node.name}
-      value={value}
-      showBorder={detailsItemId === node.id || isPopoverOpen}
-    />
+    <EuiToolTip
+      delay="regular"
+      position="right"
+      content={<ConditionalToolTip currentTime={currentTime} node={node} nodeType={nodeType} />}
+    >
+      <div>
+        <NodeSquare
+          squareSize={squareSize}
+          togglePopover={toggleAssetPopover}
+          color={color}
+          nodeName={node.name}
+          value={value}
+          showBorder={detailsItemId === node.id || isPopoverOpen}
+        />
+      </div>
+    </EuiToolTip>
   );
 
-  return (
-    <>
-      {isPopoverOpen ? (
-        <EuiPopover
-          button={nodeSquare}
-          isOpen={isPopoverOpen}
-          closePopover={closePopover}
-          anchorPosition="downCenter"
-          style={{ height: squareSize }}
-        >
-          <NodeContextMenu
-            node={node}
-            nodeType={nodeType}
-            options={options}
-            currentTime={currentTime}
-          />
-        </EuiPopover>
-      ) : isToolTipOpen ? (
-        <EuiToolTip
-          delay="regular"
-          position="right"
-          content={<ConditionalToolTip currentTime={currentTime} node={node} nodeType={nodeType} />}
-        >
-          {nodeSquare}
-        </EuiToolTip>
-      ) : (
-        nodeSquare
-      )}
-    </>
+  return !isFlyoutMode ? (
+    <EuiPopover
+      button={nodeSquare}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      anchorPosition="downCenter"
+      zIndex={0}
+    >
+      <NodeContextMenu
+        node={node}
+        nodeType={nodeType}
+        options={options}
+        currentTime={currentTime}
+      />
+    </EuiPopover>
+  ) : (
+    nodeSquare
   );
 };
diff --git a/...lity_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx b/...lity_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx
@@ -66,8 +66,8 @@ const NodeContainerSmall = ({ children, ...props }: NodeProps & { color: string
     {children}
   </div>
 );
-const ValueInner = ({ children, ...props }: NodeProps<HTMLButtonElement>) => (
-  <button
+const ValueInner = ({ children, ...props }: NodeProps) => (
+  <div
     css={css`
       position: absolute;
       top: 0;
@@ -89,10 +89,11 @@ const ValueInner = ({ children, ...props }: NodeProps<HTMLButtonElement>) => (
         box-shadow: none;
       }
     `}
+    tabIndex={0}
     {...props}
   >
     {children}
-  </button>
+  </div>
 );
 const SquareOuter = ({ children, ...props }: NodeProps & { color: string }) => (
   <div
@@ -154,17 +155,13 @@ const Value = ({ children, ...props }: NodeProps & { color: string }) => (
 export const NodeSquare = ({
   squareSize,
   togglePopover,
-  showToolTip,
-  hideToolTip,
   color,
   nodeName,
   value,
   showBorder,
 }: {
   squareSize: number;
   togglePopover: UseBooleanHandlers['toggle'];
-  showToolTip: () => void;
-  hideToolTip: () => void;
   color: string;
   nodeName: string;
   value: string;
@@ -184,9 +181,6 @@ export const NodeSquare = ({
       style={{ width: squareSize || 0, height: squareSize || 0 }}
       onClick={togglePopover}
       onKeyPress={togglePopover}
-      onFocus={showToolTip}
-      onMouseOver={showToolTip}
-      onMouseLeave={hideToolTip}
       className="buttonContainer"
     >
       <SquareOuter color={color} style={style}>
@@ -217,10 +211,8 @@ export const NodeSquare = ({
       style={{ width: squareSize || 0, height: squareSize || 0, ...style }}
       onClick={togglePopover}
       onKeyPress={togglePopover}
-      onMouseOver={showToolTip}
-      onFocus={showToolTip}
-      onMouseLeave={hideToolTip}
       color={color}
+      tabIndex={0}
     />
   );
 };