Skip to content

Commit ec25cdb

Browse files
rmyzrmyz
committed
[A11y][APM] Use nameTooltip api for dependencies tables (#215940)
## Summary Closes #195041 This PR addresses the issue where the table name's tooltip cannot be focused with keyboard. ## Video https://github.com/user-attachments/assets/bec887fd-5a3b-4fa9-b84b-17a1a4187fbc (cherry picked from commit 35f8739) # Conflicts: # x-pack/plugins/observability_solution/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx # x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx # x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/index.tsx
1 parent c5492ad commit ec25cdb

4 files changed

Lines changed: 24 additions & 41 deletions

File tree

‎x-pack/plugins/observability_solution/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
SpanMetricGroup,
2020
} from '../../../shared/dependencies_table/get_span_metric_columns';
2121
import { EmptyMessage } from '../../../shared/empty_message';
22-
import { ITableColumn, ManagedTable } from '../../../shared/managed_table';
22+
import { type ITableColumn, ManagedTable } from '../../../shared/managed_table';
2323
import { getComparisonEnabled } from '../../../shared/time_comparison/get_comparison_enabled';
2424
import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
2525
import { DependencyOperationDetailLink } from '../../dependency_operation_detail_view/dependency_operation_detail_link';

‎x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx‎

Lines changed: 21 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@
55
* 2.0.
66
*/
77
import React from 'react';
8-
import { EuiFlexGroup, EuiFlexItem, EuiIconTip, RIGHT_ALIGNMENT } from '@elastic/eui';
8+
import { EuiFlexGroup, EuiFlexItem, RIGHT_ALIGNMENT } from '@elastic/eui';
99
import { i18n } from '@kbn/i18n';
1010
import { ChartType, getTimeSeriesColor } from '../charts/helper/get_timeseries_color';
1111
import { ListMetric } from '../list_metric';
12-
import { ITableColumn } from '../managed_table';
13-
import { FETCH_STATUS, isPending } from '../../../hooks/use_fetcher';
12+
import { type FETCH_STATUS, isPending } from '../../../hooks/use_fetcher';
1413
import {
1514
asMillisecondDuration,
1615
asPercent,
@@ -19,6 +18,7 @@ import {
1918
import { Coordinate } from '../../../../typings/timeseries';
2019
import { ImpactBar } from '../impact_bar';
2120
import { isFiniteNumber } from '../../../../common/utils/is_finite_number';
21+
import type { ITableColumn } from '../managed_table';
2222

2323
export interface SpanMetricGroup {
2424
latency: number | null;
@@ -106,24 +106,15 @@ export function getSpanMetricColumns({
106106
},
107107
{
108108
field: 'failureRate',
109-
name: (
110-
<>
111-
{i18n.translate('xpack.apm.dependenciesTable.columnErrorRate', {
112-
defaultMessage: 'Failed transaction rate',
113-
})}
114-
&nbsp;
115-
<EuiIconTip
116-
size="s"
117-
color="subdued"
118-
type="questionInCircle"
119-
content={i18n.translate('xpack.apm.dependenciesTable.columnErrorRateTip', {
120-
defaultMessage:
121-
"The percentage of failed transactions for the selected service. HTTP server transactions with a 4xx status code (client error) aren't considered failures because the caller, not the server, caused the failure.",
122-
})}
123-
className="eui-alignCenter"
124-
/>
125-
</>
126-
),
109+
name: i18n.translate('xpack.apm.dependenciesTable.columnErrorRate', {
110+
defaultMessage: 'Failed transaction rate',
111+
}),
112+
nameTooltip: {
113+
content: i18n.translate('xpack.apm.dependenciesTable.columnErrorRateTip', {
114+
defaultMessage:
115+
"The percentage of failed transactions for the selected service. HTTP server transactions with a 4xx status code (client error) aren't considered failures because the caller, not the server, caused the failure.",
116+
}),
117+
},
127118
align: RIGHT_ALIGNMENT,
128119
render: (_, { failureRate, currentStats, previousStats }) => {
129120
const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
@@ -147,24 +138,15 @@ export function getSpanMetricColumns({
147138
},
148139
{
149140
field: 'impact',
150-
name: (
151-
<>
152-
{i18n.translate('xpack.apm.dependenciesTable.columnImpact', {
153-
defaultMessage: 'Impact',
154-
})}
155-
&nbsp;
156-
<EuiIconTip
157-
size="s"
158-
color="subdued"
159-
type="questionInCircle"
160-
className="eui-alignCenter"
161-
content={i18n.translate('xpack.apm.dependenciesTable.columnImpactTip', {
162-
defaultMessage:
163-
'The most used and slowest endpoints in your service. Calculated by multiplying latency by throughput.',
164-
})}
165-
/>
166-
</>
167-
),
141+
name: i18n.translate('xpack.apm.dependenciesTable.columnImpact', {
142+
defaultMessage: 'Impact',
143+
}),
144+
nameTooltip: {
145+
content: i18n.translate('xpack.apm.dependenciesTable.columnImpactTip', {
146+
defaultMessage:
147+
'The most used and slowest endpoints in your service. Calculated by multiplying latency by throughput.',
148+
}),
149+
},
168150
align: RIGHT_ALIGNMENT,
169151
render: (_, { impact, previousStats }) => {
170152
return (

‎x-pack/plugins/observability_solution/apm/public/components/shared/dependencies_table/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import type { ConnectionStatsItemWithComparisonData } from '../../../../common/c
1212
import { useBreakpoints } from '../../../hooks/use_breakpoints';
1313
import { FETCH_STATUS } from '../../../hooks/use_fetcher';
1414
import { EmptyMessage } from '../empty_message';
15-
import { ITableColumn, ManagedTable } from '../managed_table';
15+
import { type ITableColumn, ManagedTable } from '../managed_table';
1616
import { OverviewTableContainer } from '../overview_table_container';
1717
import { TruncateWithTooltip } from '../truncate_with_tooltip';
1818
import { getSpanMetricColumns, SpanMetricGroup } from './get_span_metric_columns';

‎x-pack/plugins/observability_solution/apm/public/components/shared/managed_table/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export interface ITableColumn<T extends object> {
3434
width?: string;
3535
sortable?: boolean;
3636
truncateText?: boolean;
37+
nameTooltip?: EuiBasicTableColumn<T>['nameTooltip'];
3738
render?: (value: any, item: T) => unknown;
3839
}
3940

0 commit comments

Comments
 (0)