From a9646999d08befe5bc606d0a33c7dbbdf6444f16 Mon Sep 17 00:00:00 2001
From: Sander Philipse <94373878+sphilipse@users.noreply.github.com>
Date: Mon, 25 Nov 2024 17:22:16 +0100
Subject: [PATCH] [Search] Fix button without a11y aria-label (#201236)

Also adds a tooltip to the document count to explain why the count might differ.
---
 .../components/result/result_field.tsx                    | 6 ++++++
 .../public/components/quick_stats/quick_stat.tsx          | 8 ++++++++
 .../public/components/quick_stats/quick_stats.tsx         | 5 +++++
 3 files changed, 19 insertions(+)

diff --git a/packages/kbn-search-index-documents/components/result/result_field.tsx b/packages/kbn-search-index-documents/components/result/result_field.tsx
index acd495f71cd44..cfc9263cf87fe 100644
--- a/packages/kbn-search-index-documents/components/result/result_field.tsx
+++ b/packages/kbn-search-index-documents/components/result/result_field.tsx
@@ -85,6 +85,12 @@ export const ResultField: React.FC<ResultFieldProps> = ({
             <EuiPopover
               button={
                 <EuiButtonIcon
+                  aria-label={i18n.translate(
+                    'searchIndexDocuments.result.fieldTypeButtonAriaLabel',
+                    {
+                      defaultMessage: "Show this field's type",
+                    }
+                  )}
                   onClick={() => setIsPopoverOpen(!isPopoverOpen)}
                   iconType={iconType || (fieldType ? iconMap[fieldType] : defaultToken)}
                 />
diff --git a/x-pack/plugins/search_indices/public/components/quick_stats/quick_stat.tsx b/x-pack/plugins/search_indices/public/components/quick_stats/quick_stat.tsx
index cdd5f12408480..9df28ccec4bd6 100644
--- a/x-pack/plugins/search_indices/public/components/quick_stats/quick_stat.tsx
+++ b/x-pack/plugins/search_indices/public/components/quick_stats/quick_stat.tsx
@@ -18,6 +18,7 @@ import {
   EuiText,
   useEuiTheme,
   useGeneratedHtmlId,
+  EuiIconTip,
 } from '@elastic/eui';
 
 interface BaseQuickStatProps {
@@ -33,6 +34,7 @@ interface BaseQuickStatProps {
   }>;
   setOpen: (open: boolean) => void;
   first?: boolean;
+  tooltipContent?: string;
 }
 
 export const QuickStat: React.FC<BaseQuickStatProps> = ({
@@ -45,6 +47,7 @@ export const QuickStat: React.FC<BaseQuickStatProps> = ({
   secondaryTitle,
   iconColor,
   content,
+  tooltipContent,
   ...rest
 }) => {
   const { euiTheme } = useEuiTheme();
@@ -93,6 +96,11 @@ export const QuickStat: React.FC<BaseQuickStatProps> = ({
                 {secondaryTitle}
               </EuiText>
             </EuiFlexItem>
+            {tooltipContent && (
+              <EuiFlexItem>
+                <EuiIconTip content={tooltipContent} />
+              </EuiFlexItem>
+            )}
           </EuiFlexGroup>
         </EuiPanel>
       }
diff --git a/x-pack/plugins/search_indices/public/components/quick_stats/quick_stats.tsx b/x-pack/plugins/search_indices/public/components/quick_stats/quick_stats.tsx
index e051fee17d2e2..de1ebe0a8dccf 100644
--- a/x-pack/plugins/search_indices/public/components/quick_stats/quick_stats.tsx
+++ b/x-pack/plugins/search_indices/public/components/quick_stats/quick_stats.tsx
@@ -28,6 +28,7 @@ export interface QuickStatsProps {
   index: Index;
   mappings: Mappings;
   indexDocuments: IndexDocuments;
+  tooltipContent?: string;
 }
 
 export const SetupAISearchButton: React.FC = () => {
@@ -107,6 +108,10 @@ export const QuickStats: React.FC<QuickStatsProps> = ({ index, mappings, indexDo
                 description: index.size ?? '0b',
               },
             ]}
+            tooltipContent={i18n.translate('xpack.searchIndices.quickStats.documentCountTooltip', {
+              defaultMessage:
+                'This excludes nested documents, which Elasticsearch uses internally to store chunks of vectors.',
+            })}
             first
           />
         </EuiFlexItem>