From 41bd5a669c0f688b3a97f6344a8401658aa96184 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 19 Nov 2024 03:53:42 +1100
Subject: [PATCH] [8.16] Search fix documents table a11y (#200232) (#200585)

# Backport

This will backport the following commits from `main` to `8.16`:
- [Search fix documents table a11y
(#200232)](https://github.com/elastic/kibana/pull/200232)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Sander
Philipse","email":"94373878+sphilipse@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-18T15:00:12Z","message":"Search
fix documents table a11y (#200232)\n\n## Summary\r\n\r\nThis improves
the accessibility of the documents table by:\r\n1. Adding header rows
with titles\r\n2. Adding an accessible table description\r\n3. Adding an
accessible popover to the field type
icon\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"79a26e3fd2b2cb43468e378802788db4ef621976","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Search","v8.16.0","backport:version","v8.17.0","v8.16.1","v8.18.0"],"title":"Search
fix documents table
a11y","number":200232,"url":"https://github.com/elastic/kibana/pull/200232","mergeCommit":{"message":"Search
fix documents table a11y (#200232)\n\n## Summary\r\n\r\nThis improves
the accessibility of the documents table by:\r\n1. Adding header rows
with titles\r\n2. Adding an accessible table description\r\n3. Adding an
accessible popover to the field type
icon\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"79a26e3fd2b2cb43468e378802788db4ef621976"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x","8.18"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/200232","number":200232,"mergeCommit":{"message":"Search
fix documents table a11y (#200232)\n\n## Summary\r\n\r\nThis improves
the accessibility of the documents table by:\r\n1. Adding header rows
with titles\r\n2. Adding an accessible table description\r\n3. Adding an
accessible popover to the field type
icon\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"79a26e3fd2b2cb43468e378802788db4ef621976"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Sander Philipse <94373878+sphilipse@users.noreply.github.com>
---
 .../components/result/result.tsx              |  1 +
 .../components/result/result_field.tsx        | 57 ++++++++++++-------
 .../components/result/results_fields.tsx      | 26 ++++++++-
 .../kbn-search-index-documents/tsconfig.json  |  1 -
 4 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/packages/kbn-search-index-documents/components/result/result.tsx b/packages/kbn-search-index-documents/components/result/result.tsx
index 14b6c58ebf861..207a4770b97f2 100644
--- a/packages/kbn-search-index-documents/components/result/result.tsx
+++ b/packages/kbn-search-index-documents/components/result/result.tsx
@@ -121,6 +121,7 @@ export const Result: React.FC<ResultProps> = ({
       <EuiHorizontalRule margin="none" />
       <EuiSplitPanel.Inner paddingSize="m">
         <ResultFields
+          documentId={metaData.id}
           isExpanded={isExpanded}
           fields={isExpanded ? fields : fields.slice(0, defaultVisibleFields)}
         />
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 e82991032afbc..acd495f71cd44 100644
--- a/packages/kbn-search-index-documents/components/result/result_field.tsx
+++ b/packages/kbn-search-index-documents/components/result/result_field.tsx
@@ -7,11 +7,19 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 
-import { EuiTableRow, EuiTableRowCell, EuiText, EuiToken } from '@elastic/eui';
+import {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPopover,
+  EuiTableRow,
+  EuiTableRowCell,
+  EuiText,
+} from '@elastic/eui';
 
-import { euiThemeVars } from '@kbn/ui-theme';
+import { i18n } from '@kbn/i18n';
 import { ResultFieldProps } from './result_types';
 import { PERMANENTLY_TRUNCATED_FIELDS } from './constants';
 import { ResultFieldValue } from './result_field_value';
@@ -63,26 +71,35 @@ export const ResultField: React.FC<ResultFieldProps> = ({
   isExpanded,
 }) => {
   const shouldTruncate = !isExpanded || PERMANENTLY_TRUNCATED_FIELDS.includes(fieldType);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const fieldTypeLabel = i18n.translate('searchIndexDocuments.result.fieldTypeAriaLabel', {
+    defaultMessage: 'This field is of the type {fieldType}',
+    values: { fieldType },
+  });
 
   return (
     <EuiTableRow className="resultField">
-      <EuiTableRowCell className="resultFieldRowCell" width={euiThemeVars.euiSizeL} valign="middle">
-        <span>
-          <EuiToken
-            className="resultField__token"
-            iconType={iconType || (fieldType ? iconMap[fieldType] : defaultToken)}
-          />
-        </span>
-      </EuiTableRowCell>
-      <EuiTableRowCell
-        className="resultFieldRowCell"
-        width="20%"
-        truncateText={!isExpanded}
-        valign="middle"
-      >
-        <EuiText size="s" color="default">
-          {fieldName}
-        </EuiText>
+      <EuiTableRowCell className="resultFieldRowCell" valign="middle" truncateText={!isExpanded}>
+        <EuiFlexGroup direction="row" alignItems="center" gutterSize="xs" justifyContent="center">
+          <EuiFlexItem grow={false}>
+            <EuiPopover
+              button={
+                <EuiButtonIcon
+                  onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+                  iconType={iconType || (fieldType ? iconMap[fieldType] : defaultToken)}
+                />
+              }
+              isOpen={isPopoverOpen}
+            >
+              {fieldTypeLabel}
+            </EuiPopover>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiText size="s" color="default">
+              {fieldName}
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiTableRowCell>
       <EuiTableRowCell className="resultFieldRowCell" truncateText={shouldTruncate} valign="middle">
         <ResultFieldValue fieldValue={fieldValue} fieldType={fieldType} isExpanded={isExpanded} />
diff --git a/packages/kbn-search-index-documents/components/result/results_fields.tsx b/packages/kbn-search-index-documents/components/result/results_fields.tsx
index e25ede0fe0463..9684d41d28c6b 100644
--- a/packages/kbn-search-index-documents/components/result/results_fields.tsx
+++ b/packages/kbn-search-index-documents/components/result/results_fields.tsx
@@ -9,19 +9,39 @@
 
 import React from 'react';
 
-import { EuiTable, EuiTableBody } from '@elastic/eui';
+import { EuiTable, EuiTableBody, EuiTableHeader, EuiTableHeaderCell } from '@elastic/eui';
 
+import { i18n } from '@kbn/i18n';
 import { ResultField } from './result_field';
 import { ResultFieldProps } from './result_types';
 
 interface Props {
+  documentId: string;
   fields: ResultFieldProps[];
   isExpanded: boolean;
 }
 
-export const ResultFields: React.FC<Props> = ({ fields, isExpanded }) => {
+export const ResultFields: React.FC<Props> = ({ documentId, fields, isExpanded }) => {
   return (
-    <EuiTable>
+    <EuiTable
+      aria-label={i18n.translate('searchIndexDocuments.resultFields.tableLabel', {
+        defaultMessage: 'Fields for the document with ID {documentId}',
+        values: { documentId },
+      })}
+    >
+      <EuiTableHeader>
+        <EuiTableHeaderCell width="20%">
+          {i18n.translate('searchIndexDocuments.resultFields.fieldTypeHeaderLabel', {
+            defaultMessage: 'Field',
+          })}
+        </EuiTableHeaderCell>
+        <EuiTableHeaderCell>
+          {i18n.translate('searchIndexDocuments.resultFields.contentstableHeaderLabel', {
+            defaultMessage: 'Contents',
+          })}
+        </EuiTableHeaderCell>
+      </EuiTableHeader>
+
       <EuiTableBody>
         {fields.map((field) => (
           <ResultField
diff --git a/packages/kbn-search-index-documents/tsconfig.json b/packages/kbn-search-index-documents/tsconfig.json
index cffc6f03fbbd5..4290e62de320a 100644
--- a/packages/kbn-search-index-documents/tsconfig.json
+++ b/packages/kbn-search-index-documents/tsconfig.json
@@ -18,7 +18,6 @@
   "kbn_references": [
     "@kbn/i18n",
     "@kbn/i18n-react",
-    "@kbn/ui-theme",
     "@kbn/core",
     "@kbn/core-elasticsearch-server",
   ]