github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[9.0] [ObsUX] [A11y] Fix focus on metadata table content (#216628) (#216779)

Browse source 
# Backport

This will backport the following commits from `main` to `9.0`:
- [[ObsUX] [A11y] Fix focus on metadata table content
(#216628)](https://github.com/elastic/kibana/pull/216628)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT
[{"author":{"name":"Miriam","email":"31922082+MiriamAparicio@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-04-02T09:25:05Z","message":"[ObsUX]
[A11y] Fix focus on metadata table content (#216628)\n\nCloses
https://github.com/elastic/kibana/issues/195014\n\n### Summary\n\nHost
Detail page has a Metadata tab with expandable table rows. These\nrows
add content to the page in an unexpected reading order. Content\nshould
be expanded underneath the show more / less trigger. Focus should\nstay
on the
toggle.\n\nBefore\n\n\n7993abdc-b693-4c0f-a161-8533cf6b2e3b","sha":"7b1d7bf08a8e48b0f0f5b57573e250faa7acf265","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:obs-ux-infra_services","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[ObsUX]
[A11y] Fix focus on metadata table
content","number":216628,"url":"https://github.com/elastic/kibana/pull/216628","mergeCommit":{"message":"[ObsUX]
[A11y] Fix focus on metadata table content (#216628)\n\nCloses
https://github.com/elastic/kibana/issues/195014\n\n### Summary\n\nHost
Detail page has a Metadata tab with expandable table rows. These\nrows
add content to the page in an unexpected reading order. Content\nshould
be expanded underneath the show more / less trigger. Focus should\nstay
on the
toggle.\n\nBefore\n\n\n7993abdc-b693-4c0f-a161-8533cf6b2e3b","sha":"7b1d7bf08a8e48b0f0f5b57573e250faa7acf265"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.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":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/216628","number":216628,"mergeCommit":{"message":"[ObsUX]
[A11y] Fix focus on metadata table content (#216628)\n\nCloses
https://github.com/elastic/kibana/issues/195014\n\n### Summary\n\nHost
Detail page has a Metadata tab with expandable table rows. These\nrows
add content to the page in an unexpected reading order. Content\nshould
be expanded underneath the show more / less trigger. Focus should\nstay
on the
toggle.\n\nBefore\n\n\n7993abdc-b693-4c0f-a161-8533cf6b2e3b","sha":"7b1d7bf08a8e48b0f0f5b57573e250faa7acf265"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Miriam <31922082+MiriamAparicio@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2025-04-02 13:16:04 +02:00 • committed by GitHub
parent e82175e4c5
commit 1be9db400e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 37 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

52
x-pack/solutions/observability/plugins/infra/public/components/asset_details/components/expandable_content.tsx
View file

@ -8,7 +8,7 @@
import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import React, { useEffect, useRef } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import useToggle from 'react-use/lib/useToggle';
import type { Field } from '../tabs/metadata/utils';
@ -19,24 +19,39 @@ interface ExpandableContentProps {
export const ExpandableContent = (props: ExpandableContentProps) => {
const { values } = props;
const [isExpanded, toggle] = useToggle(false);
const showLessRef = useRef<HTMLAnchorElement | null>(null);
const showMoreRef = useRef<HTMLAnchorElement | null>(null);
const list = Array.isArray(values) ? values : [values];
const [first, ...others] = list;
const hasOthers = others.length > 0;
const shouldShowMore = hasOthers && !isExpanded;
const hasInteracted = useRef(false);
const handleToggle = () => {
hasInteracted.current = true;
toggle();
};
useEffect(() => {
if (!hasInteracted.current) return;
if (isExpanded) {
showLessRef.current?.focus();
} else {
showMoreRef.current?.focus();
}
}, [isExpanded]);
return (
<EuiFlexGroup gutterSize="xs" responsive={false} alignItems="baseline" wrap direction="column">
<EuiFlexItem className="eui-textTruncate">
<EuiToolTip delay="long" content={first}>
<p className="eui-textTruncate">{first}</p>
</EuiToolTip>
{shouldShowMore && (
<>
{' ... '}
<EuiLink
data-test-subj="infraAssetDetailsExpandableContentCountMoreLink"
onClick={toggle}
onClick={handleToggle}
ref={showMoreRef}
>
<FormattedMessage
id="xpack.infra.assetDetails.tabs.metadata.seeMore"
@ -48,17 +63,24 @@ export const ExpandableContent = (props: ExpandableContentProps) => {
</EuiLink>
</>
)}
{hasOthers && isExpanded && (
<EuiFlexItem>
<EuiLink
data-test-subj="infraExpandableContentShowLessLink"
onClick={handleToggle}
ref={showLessRef}
>
{i18n.translate('xpack.infra.assetDetails.tabs.metadata.seeLess', {
defaultMessage: 'Show less',
})}
</EuiLink>
</EuiFlexItem>
)}
<EuiToolTip delay="long" content={first}>
<p className="eui-textTruncate">{first}</p>
</EuiToolTip>
</EuiFlexItem>
{isExpanded && others.map((item, index) => <EuiFlexItem key={index}>{item}</EuiFlexItem>)}
{hasOthers && isExpanded && (
<EuiFlexItem>
<EuiLink data-test-subj="infraExpandableContentShowLessLink" onClick={toggle}>
{i18n.translate('xpack.infra.assetDetails.tabs.metadata.seeLess', {
defaultMessage: 'Show less',
})}
</EuiLink>
</EuiFlexItem>
)}
</EuiFlexGroup>
);
};