[9.0] [Search][a11y] show tooltip show more or fewer fields (#237913) (#238334)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[Search][a11y] show tooltip show more or fewer fields
(#237913)](#237913)

<!--- Backport version: 10.0.2 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Saarika
Bhasi","email":"55930906+saarikabhasi@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-10-08T17:13:11Z","message":"[Search][a11y]
show tooltip show more or fewer fields (#237913)\n\n## Summary\n\nTool
tip is not shown when navigated via keyboard. Adding ref helps
with\nshowing the tool tip when show more/hide button is on
focus.\n\n\n### Testing instructions: \n1. In Stateful. Create an Index
with documents more than 3 fields. Open\ndocuments page and has more
than 3 documents\n2. Navigate to the first (or any) table while using
only keyboard by\npressing Tab key.\n3. Navigate to Show more fields
button.\n4. Press Esc.\n5. Press Enter.\n6. Observe tooltips for the
button.\n\nAlso test for: \nSame with the opposite: when user navigates
to Show more button ->\npresses Enter -> presses Esc -> presses Enter.
Result: no tooltip\npresent on Show more button.\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] The PR
description includes the appropriate Release Notes section,\nand the
correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[ ] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*`
labels.","sha":"37446f0fdd3bb523a1ef21bec06a835cdcd2df1c","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","v8.16.0","backport:version","v8.17.0","v8.18.0","v9.1.0","v8.19.0","v9.3.0","v9.1.6"],"title":"[Search][a11y]
show tooltip show more or fewer
fields","number":237913,"url":"https://github.com/elastic/kibana/pull/237913","mergeCommit":{"message":"[Search][a11y]
show tooltip show more or fewer fields (#237913)\n\n## Summary\n\nTool
tip is not shown when navigated via keyboard. Adding ref helps
with\nshowing the tool tip when show more/hide button is on
focus.\n\n\n### Testing instructions: \n1. In Stateful. Create an Index
with documents more than 3 fields. Open\ndocuments page and has more
than 3 documents\n2. Navigate to the first (or any) table while using
only keyboard by\npressing Tab key.\n3. Navigate to Show more fields
button.\n4. Press Esc.\n5. Press Enter.\n6. Observe tooltips for the
button.\n\nAlso test for: \nSame with the opposite: when user navigates
to Show more button ->\npresses Enter -> presses Esc -> presses Enter.
Result: no tooltip\npresent on Show more button.\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] The PR
description includes the appropriate Release Notes section,\nand the
correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[ ] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*`
labels.","sha":"37446f0fdd3bb523a1ef21bec06a835cdcd2df1c"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.16","8.17","8.18"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.17","label":"v8.17.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/238113","number":238113,"state":"MERGED","mergeCommit":{"sha":"67aed2b807fa129a35a4dc0ee3dff230fef07f1d","message":"[9.1]
[Search][a11y] show tooltip show more or fewer fields (#237913)
(#238113)\n\n# Backport\n\nThis will backport the following commits from
`main` to `9.1`:\n- [[Search][a11y] show tooltip show more or fewer
fields\n(#237913)](https://github.com/elastic/kibana/pull/237913)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by:
Saarika Bhasi
<55930906+saarikabhasi@users.noreply.github.com>"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/238328","number":238328,"state":"OPEN"},{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/237913","number":237913,"mergeCommit":{"message":"[Search][a11y]
show tooltip show more or fewer fields (#237913)\n\n## Summary\n\nTool
tip is not shown when navigated via keyboard. Adding ref helps
with\nshowing the tool tip when show more/hide button is on
focus.\n\n\n### Testing instructions: \n1. In Stateful. Create an Index
with documents more than 3 fields. Open\ndocuments page and has more
than 3 documents\n2. Navigate to the first (or any) table while using
only keyboard by\npressing Tab key.\n3. Navigate to Show more fields
button.\n4. Press Esc.\n5. Press Enter.\n6. Observe tooltips for the
button.\n\nAlso test for: \nSame with the opposite: when user navigates
to Show more button ->\npresses Enter -> presses Esc -> presses Enter.
Result: no tooltip\npresent on Show more button.\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] The PR
description includes the appropriate Release Notes section,\nand the
correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[ ] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*`
labels.","sha":"37446f0fdd3bb523a1ef21bec06a835cdcd2df1c"}}]}]
BACKPORT-->

Author: saarikabhasi

x-pack/solutions/search/packages/kbn-search-index-documents/components/result/result.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 import {
   EuiButtonIcon,
@@ -65,6 +65,7 @@ export const Result: React.FC<ResultProps> = ({
         });
   const toolTipContent = <>{tooltipText}</>;
 
+  const tooltipRef = useRef<EuiToolTip>(null);
   return (
     <EuiSplitPanel.Outer hasBorder={true} data-test-subj="search-index-documents-result">
       <EuiSplitPanel.Inner paddingSize="m" color="plain" className="resultHeaderContainer">
@@ -103,7 +104,7 @@ export const Result: React.FC<ResultProps> = ({
             )}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiToolTip position="left" content={toolTipContent}>
+            <EuiToolTip position="left" content={toolTipContent} ref={tooltipRef}>
               <EuiButtonIcon
                 size="xs"
                 iconType={isExpanded ? 'fold' : 'unfold'}
@@ -112,6 +113,7 @@ export const Result: React.FC<ResultProps> = ({
                 onClick={(e: React.MouseEvent<HTMLElement>) => {
                   e.stopPropagation();
                   setIsExpanded(!isExpanded);
+                  tooltipRef.current?.showToolTip();
                 }}
                 aria-label={tooltipText}
               />