Skip to content

Commit

Permalink
[8.x] Search fix documents table a11y (#200232) (#200586)
Browse files Browse the repository at this point in the history 
# Backport

This will backport the following commits from `main` to `8.x`:
- [Search fix documents table a11y
(#200232)](#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":"[email protected]"},"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
<[email protected]>","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
<[email protected]>","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
<[email protected]>","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 <[email protected]>
  • Loading branch information
@kibanamachine @sphilipse
kibanamachine and sphilipse authored Nov 18, 2024
1 parent cdeb8b6 commit 68aa8a3
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 24 deletions.
1 change: 1 addition & 0 deletions packages/kbn-search-index-documents/components/result/result.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
/>
Expand Down
57 changes: 37 additions & 20 deletions packages/kbn-search-index-documents/components/result/result_field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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} />
Expand Down
26 changes: 23 additions & 3 deletions packages/kbn-search-index-documents/components/result/results_fields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion packages/kbn-search-index-documents/tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
"kbn_references": [
"@kbn/i18n",
"@kbn/i18n-react",
"@kbn/ui-theme",
"@kbn/core",
"@kbn/core-elasticsearch-server",
]
Expand Down

0 comments on commit 68aa8a3

Please sign in to comment.