[8.18] [A11y][APM] Improve aria-label for correlations (#217512) (#217808)

# Backport

This will backport the following commits from `main` to `8.18`:
- [[A11y][APM] Improve `aria-label` for correlations
(#217512)](https://github.com/elastic/kibana/pull/217512)

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

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

<!--BACKPORT [{"author":{"name":"Sergi
Romeu","email":"sergi.romeu@elastic.co"},"sourceCommit":{"committedDate":"2025-04-10T09:52:11Z","message":"[A11y][APM]
Improve `aria-label` for correlations (#217512)\n\n## Summary\n\nCloses
https://github.com/elastic/kibana/issues/194975\n\nThis PR improves the
`aria-label` attributes in the latency correlations\npage to add more
context about the selected
field.","sha":"6190ca8c140a4faba7a75b70a33e79736dd937fe","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","apm","Team:obs-ux-infra_services","backport:version","a11y","v8.18.0","v9.1.0","v8.19.0","v9.0.1"],"title":"[A11y][APM]
Improve `aria-label` for
correlations","number":217512,"url":"https://github.com/elastic/kibana/pull/217512","mergeCommit":{"message":"[A11y][APM]
Improve `aria-label` for correlations (#217512)\n\n## Summary\n\nCloses
https://github.com/elastic/kibana/issues/194975\n\nThis PR improves the
`aria-label` attributes in the latency correlations\npage to add more
context about the selected
field.","sha":"6190ca8c140a4faba7a75b70a33e79736dd937fe"}},"sourceBranch":"main","suggestedTargetBranches":["8.18","8.x","9.0"],"targetPullRequestStates":[{"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/217512","number":217512,"mergeCommit":{"message":"[A11y][APM]
Improve `aria-label` for correlations (#217512)\n\n## Summary\n\nCloses
https://github.com/elastic/kibana/issues/194975\n\nThis PR improves the
`aria-label` attributes in the latency correlations\npage to add more
context about the selected
field.","sha":"6190ca8c140a4faba7a75b70a33e79736dd937fe"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.0","label":"v9.0.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Sergi Romeu <sergi.romeu@elastic.co>
This commit is contained in:
Kibana Machine 2025-04-10 14:10:47 +02:00 committed by GitHub
parent 3bdc2d40c3
commit 70ed457075
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 22 additions and 23 deletions

View file

@ -11295,20 +11295,16 @@
"xpack.apm.correlations.failedTransactions.helpPopover.title": "Corrélations des transactions ayant échoué",
"xpack.apm.correlations.failedTransactions.panelTitle": "Distribution de la latence des transactions ayant échoué",
"xpack.apm.correlations.failedTransactions.tableTitle": "Corrélations",
"xpack.apm.correlations.fieldContextPopover.descriptionTooltipContent": "Afficher le top 10 des valeurs de champ",
"xpack.apm.correlations.fieldContextPopover.notTopTenValueMessage": "Le terme sélectionné n'est pas dans le top 10",
"xpack.apm.correlations.fieldContextPopover.topFieldValuesAriaLabel": "Afficher le top 10 des valeurs de champ",
"xpack.apm.correlations.highImpactText": "Élevé",
"xpack.apm.correlations.latencyCorrelations.advancedStatisticsLabel": "Statistiques avancées",
"xpack.apm.correlations.latencyCorrelations.advancedStatisticsTooltipContent": "Activer des informations statistiques supplémentaires pour obtenir les résultats de la corrélation.",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.actionsLabel": "Filtre",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.correlationColumnDescription": "Score de corrélation [0-1] d'un attribut ; plus le score est élevé, plus un attribut augmente la latence.",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.correlationLabel": "Corrélation",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.excludeDescription": "Filtrer la valeur",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.excludeLabel": "Exclure",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.fieldNameLabel": "Nom du champ",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.fieldValueLabel": "Valeur du champ",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.filterDescription": "Filtrer par valeur",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.filterLabel": "Filtre",
"xpack.apm.correlations.latencyCorrelations.errorTitle": "Une erreur est survenue lors de la récupération des corrélations",
"xpack.apm.correlations.latencyCorrelations.fallbackCorrelationBadgeMessage": "Très bas",

View file

@ -11280,20 +11280,16 @@
"xpack.apm.correlations.failedTransactions.helpPopover.title": "失敗したトランザクションの相関関係",
"xpack.apm.correlations.failedTransactions.panelTitle": "失敗したトランザクションの遅延分布",
"xpack.apm.correlations.failedTransactions.tableTitle": "相関関係",
"xpack.apm.correlations.fieldContextPopover.descriptionTooltipContent": "上位10フィールド値を表示",
"xpack.apm.correlations.fieldContextPopover.notTopTenValueMessage": "選択した用語は上位10件にありません",
"xpack.apm.correlations.fieldContextPopover.topFieldValuesAriaLabel": "上位10フィールド値を表示",
"xpack.apm.correlations.highImpactText": "高",
"xpack.apm.correlations.latencyCorrelations.advancedStatisticsLabel": "詳細統計情報",
"xpack.apm.correlations.latencyCorrelations.advancedStatisticsTooltipContent": "相関関係結果の詳細統計情報を有効にします。",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.actionsLabel": "フィルター",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.correlationColumnDescription": "属性の相関関係スコア[0-1]。スコアが大きいほど、属性の遅延が大きくなります。",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.correlationLabel": "相関関係",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.excludeDescription": "値を除外",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.excludeLabel": "除外",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.fieldNameLabel": "フィールド名",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.fieldValueLabel": "フィールド値",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.filterDescription": "値でフィルタリング",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.filterLabel": "フィルター",
"xpack.apm.correlations.latencyCorrelations.errorTitle": "相関関係の取得中にエラーが発生しました",
"xpack.apm.correlations.latencyCorrelations.fallbackCorrelationBadgeMessage": "非常に低い",

View file

@ -11303,20 +11303,16 @@
"xpack.apm.correlations.failedTransactions.helpPopover.title": "失败事务相关性",
"xpack.apm.correlations.failedTransactions.panelTitle": "失败事务延迟分布",
"xpack.apm.correlations.failedTransactions.tableTitle": "相关性",
"xpack.apm.correlations.fieldContextPopover.descriptionTooltipContent": "显示排名前 10 字段值",
"xpack.apm.correlations.fieldContextPopover.notTopTenValueMessage": "选定的词未排名前 10",
"xpack.apm.correlations.fieldContextPopover.topFieldValuesAriaLabel": "显示排名前 10 字段值",
"xpack.apm.correlations.highImpactText": "高",
"xpack.apm.correlations.latencyCorrelations.advancedStatisticsLabel": "高级统计信息",
"xpack.apm.correlations.latencyCorrelations.advancedStatisticsTooltipContent": "启用相关性结果的其他统计信息。",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.actionsLabel": "筛选",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.correlationColumnDescription": "属性的相关性分数 [0-1];分数越大,属性越会增加延迟。",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.correlationLabel": "相关性",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.excludeDescription": "筛除值",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.excludeLabel": "排除",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.fieldNameLabel": "字段名称",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.fieldValueLabel": "字段值",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.filterDescription": "按值筛选",
"xpack.apm.correlations.latencyCorrelations.correlationsTable.filterLabel": "筛选",
"xpack.apm.correlations.latencyCorrelations.errorTitle": "提取关联性时发生错误",
"xpack.apm.correlations.latencyCorrelations.fallbackCorrelationBadgeMessage": "极低",

View file

@ -264,7 +264,8 @@ export function FieldStatsPopover({
content={i18n.translate(
'xpack.apm.correlations.fieldContextPopover.descriptionTooltipContent',
{
defaultMessage: 'Show top 10 field values',
defaultMessage: 'Show top 10 field values for {fieldName}',
values: { fieldName },
}
)}
>
@ -276,7 +277,8 @@ export function FieldStatsPopover({
aria-label={i18n.translate(
'xpack.apm.correlations.fieldContextPopover.topFieldValuesAriaLabel',
{
defaultMessage: 'Show top 10 field values',
defaultMessage: 'Show top 10 field values for {fieldName}',
values: { fieldName },
}
)}
data-test-subj={'apmCorrelationsContextPopoverButton'}

View file

@ -20,6 +20,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
import { useUiTracker } from '@kbn/observability-shared-plugin/public';
import { ProcessorEvent } from '@kbn/observability-plugin/common';
import { css } from '@emotion/react';
import { FieldStatsPopover } from './context_popover/field_stats_popover';
import { asPreciseDecimal } from '../../../../common/utils/formatters';
import type { LatencyCorrelation } from '../../../../common/correlations/latency_correlations/types';
@ -198,10 +199,11 @@ export function LatencyCorrelations({ onFilter }: { onFilter: () => void }) {
'xpack.apm.correlations.latencyCorrelations.correlationsTable.filterLabel',
{ defaultMessage: 'Filter' }
),
description: i18n.translate(
'xpack.apm.correlations.latencyCorrelations.correlationsTable.filterDescription',
{ defaultMessage: 'Filter by value' }
),
description: ({ fieldName }) =>
i18n.translate(
'xpack.apm.correlations.latencyCorrelations.correlationsTable.filterDescription',
{ defaultMessage: 'Filter by {fieldName}', values: { fieldName } }
),
icon: 'plusInCircle',
type: 'icon',
onClick: ({ fieldName, fieldValue }: LatencyCorrelation) =>
@ -216,10 +218,11 @@ export function LatencyCorrelations({ onFilter }: { onFilter: () => void }) {
'xpack.apm.correlations.latencyCorrelations.correlationsTable.excludeLabel',
{ defaultMessage: 'Exclude' }
),
description: i18n.translate(
'xpack.apm.correlations.latencyCorrelations.correlationsTable.excludeDescription',
{ defaultMessage: 'Filter out value' }
),
description: ({ fieldName }) =>
i18n.translate(
'xpack.apm.correlations.latencyCorrelations.correlationsTable.excludeDescription',
{ defaultMessage: 'Filter out {fieldName}', values: { fieldName } }
),
icon: 'minusInCircle',
type: 'icon',
onClick: ({ fieldName, fieldValue }: LatencyCorrelation) =>
@ -289,7 +292,13 @@ export function LatencyCorrelations({ onFilter }: { onFilter: () => void }) {
return (
<div data-test-subj="apmLatencyCorrelationsTabContent">
<EuiFlexGroup style={{ minHeight: MIN_TAB_TITLE_HEIGHT }} alignItems="center" gutterSize="s">
<EuiFlexGroup
css={css`
min-height: ${MIN_TAB_TITLE_HEIGHT};
`}
alignItems="center"
gutterSize="s"
>
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h5 data-test-subj="apmCorrelationsLatencyCorrelationsChartTitle">