Search fix documents table a11y (elastic#200232)

## Summary This improves the accessibility of the documents table by: 1. Adding header rows with titles 2. Adding an accessible table description 3. Adding an accessible popover to the field type icon --------- Co-authored-by: kibanamachine <[email protected]>
jesuswr · Nov 18, 2024 · 3f86fd0 · 3f86fd0
1 parent 01e03fd
commit 3f86fd0
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -18,7 +18,6 @@
   "kbn_references": [
     "@kbn/i18n",
     "@kbn/i18n-react",
-    "@kbn/ui-theme",
     "@kbn/core",
     "@kbn/core-elasticsearch-server",
   ]