From f3a49dc3647bf96c7584572b6e8be41add9e969c Mon Sep 17 00:00:00 2001
From: "miriam.aparicio" <miriam.aparicio@gmail.com>
Date: Tue, 1 Apr 2025 12:14:48 +0100
Subject: [PATCH 1/2] fix focus on metadata table content

---
 .../components/expandable_content.tsx         | 48 +++++++++++++------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/x-pack/solutions/observability/plugins/infra/public/components/asset_details/components/expandable_content.tsx b/x-pack/solutions/observability/plugins/infra/public/components/asset_details/components/expandable_content.tsx
index d96ee11101464..afc16b3d596ae 100644
--- a/x-pack/solutions/observability/plugins/infra/public/components/asset_details/components/expandable_content.tsx
+++ b/x-pack/solutions/observability/plugins/infra/public/components/asset_details/components/expandable_content.tsx
@@ -8,7 +8,7 @@
 import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiToolTip } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { useRef } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import useToggle from 'react-use/lib/useToggle';
 import type { Field } from '../tabs/metadata/utils';
@@ -19,24 +19,35 @@ interface ExpandableContentProps {
 export const ExpandableContent = (props: ExpandableContentProps) => {
   const { values } = props;
   const [isExpanded, toggle] = useToggle(false);
+  const showLessRef = useRef<HTMLAnchorElement | null>(null);
+  const showMoreRef = useRef<HTMLAnchorElement | null>(null);
 
   const list = Array.isArray(values) ? values : [values];
   const [first, ...others] = list;
   const hasOthers = others.length > 0;
   const shouldShowMore = hasOthers && !isExpanded;
 
+  const handleToggle = () => {
+    toggle();
+
+    setTimeout(() => {
+      if (isExpanded) {
+        showMoreRef.current?.focus();
+      } else {
+        showLessRef.current?.focus();
+      }
+    }, 0);
+  };
+
   return (
     <EuiFlexGroup gutterSize="xs" responsive={false} alignItems="baseline" wrap direction="column">
       <EuiFlexItem className="eui-textTruncate">
-        <EuiToolTip delay="long" content={first}>
-          <p className="eui-textTruncate">{first}</p>
-        </EuiToolTip>
         {shouldShowMore && (
           <>
-            {' ... '}
             <EuiLink
               data-test-subj="infraAssetDetailsExpandableContentCountMoreLink"
-              onClick={toggle}
+              onClick={handleToggle}
+              ref={showMoreRef}
             >
               <FormattedMessage
                 id="xpack.infra.assetDetails.tabs.metadata.seeMore"
@@ -48,17 +59,24 @@ export const ExpandableContent = (props: ExpandableContentProps) => {
             </EuiLink>
           </>
         )}
+        {hasOthers && isExpanded && (
+          <EuiFlexItem>
+            <EuiLink
+              data-test-subj="infraExpandableContentShowLessLink"
+              onClick={handleToggle}
+              ref={showLessRef}
+            >
+              {i18n.translate('xpack.infra.assetDetails.tabs.metadata.seeLess', {
+                defaultMessage: 'Show less',
+              })}
+            </EuiLink>
+          </EuiFlexItem>
+        )}
+        <EuiToolTip delay="long" content={first}>
+          <p className="eui-textTruncate">{first}</p>
+        </EuiToolTip>
       </EuiFlexItem>
       {isExpanded && others.map((item, index) => <EuiFlexItem key={index}>{item}</EuiFlexItem>)}
-      {hasOthers && isExpanded && (
-        <EuiFlexItem>
-          <EuiLink data-test-subj="infraExpandableContentShowLessLink" onClick={toggle}>
-            {i18n.translate('xpack.infra.assetDetails.tabs.metadata.seeLess', {
-              defaultMessage: 'Show less',
-            })}
-          </EuiLink>
-        </EuiFlexItem>
-      )}
     </EuiFlexGroup>
   );
 };

From 53363a36cfbbf2af110385a2ba76f5772a0bfbd8 Mon Sep 17 00:00:00 2001
From: "miriam.aparicio" <miriam.aparicio@gmail.com>
Date: Tue, 1 Apr 2025 15:38:54 +0100
Subject: [PATCH 2/2] useEffect instead of timeout

---
 .../components/expandable_content.tsx         | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/x-pack/solutions/observability/plugins/infra/public/components/asset_details/components/expandable_content.tsx b/x-pack/solutions/observability/plugins/infra/public/components/asset_details/components/expandable_content.tsx
index afc16b3d596ae..f013faaeed8e7 100644
--- a/x-pack/solutions/observability/plugins/infra/public/components/asset_details/components/expandable_content.tsx
+++ b/x-pack/solutions/observability/plugins/infra/public/components/asset_details/components/expandable_content.tsx
@@ -8,7 +8,7 @@
 import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiToolTip } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import useToggle from 'react-use/lib/useToggle';
 import type { Field } from '../tabs/metadata/utils';
@@ -26,19 +26,23 @@ export const ExpandableContent = (props: ExpandableContentProps) => {
   const [first, ...others] = list;
   const hasOthers = others.length > 0;
   const shouldShowMore = hasOthers && !isExpanded;
+  const hasInteracted = useRef(false);
 
   const handleToggle = () => {
+    hasInteracted.current = true;
     toggle();
-
-    setTimeout(() => {
-      if (isExpanded) {
-        showMoreRef.current?.focus();
-      } else {
-        showLessRef.current?.focus();
-      }
-    }, 0);
   };
 
+  useEffect(() => {
+    if (!hasInteracted.current) return;
+
+    if (isExpanded) {
+      showLessRef.current?.focus();
+    } else {
+      showMoreRef.current?.focus();
+    }
+  }, [isExpanded]);
+
   return (
     <EuiFlexGroup gutterSize="xs" responsive={false} alignItems="baseline" wrap direction="column">
       <EuiFlexItem className="eui-textTruncate">