Skip to content

Commit

Permalink
fix: [Obs Alerts > Alert Detail][KEYBOARD]: Table header has tooltips…
Browse files Browse the repository at this point in the history 
… that must be keyboard focusable (#183523)

Closes: elastic/observability-dev#3379

## Description

The Obs Alert Detail view has a table with several tooltips that are not
keyboard focusable. Screenshot attached below.

### Steps to recreate

1. Open the [Obs
Alerts](https://keepserverless-qa-oblt-b4ba07.kb.eu-west-1.aws.qa.elastic.cloud/app/observability/alerts)
table
2. Click the "Manage Rules" link
3. Create a new rule and verify it appears in the Rules table if you
have none that are generating alerts
4. When the rule appears in the Rules table, click the `[ ... ]` menu
and then click "Run rule"
5. After the rule runs, go back to the `Alerts` view and click on the `[
... ]` menu in the data grid, then click on "View alert details"
6. Tab through the page until you get to the table
7. Verify the tooltips can be accessed with mouse hover, but not
keyboard focus

### What was changed?: 

1. **EuiTooltip** was replaced to **EuiIconTip**


### Screen 


https://github.com/elastic/kibana/assets/20072247/11d66ff6-9139-43fe-93fd-94c6dbb3be4e
  • Loading branch information
@alexwizp
alexwizp committed May 16, 2024
1 parent 7e10ada commit 38e7ab2
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 132 deletions.
126 changes: 68 additions & 58 deletions ...ops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,8 @@ import {
EuiBadge,
EuiBasicTable,
EuiCode,
EuiIcon,
EuiIconTip,
EuiText,
EuiToolTip,
} from '@elastic/eui';

import type { FieldStatsServices } from '@kbn/unified-field-list/src/components/field_stats';
Expand Down Expand Up @@ -150,22 +148,19 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
/>
)}
{type === SIGNIFICANT_ITEM_TYPE.LOG_PATTERN && (
<EuiToolTip
<EuiIconTip
type="aggregate"
data-test-subj={'aiopsLogPatternIcon'}
css={{ marginLeft: euiTheme.euiSizeS, marginRight: euiTheme.euiSizeXS }}
size="m"
content={i18n.translate(
'xpack.aiops.fieldContextPopover.descriptionTooltipLogPattern',
{
defaultMessage:
'The field value for this field shows an example of the identified significant text field pattern.',
}
)}
>
<EuiIcon
type="aggregate"
data-test-subj={'aiopsLogPatternIcon'}
css={{ marginLeft: euiTheme.euiSizeS, marginRight: euiTheme.euiSizeXS }}
size="m"
/>
</EuiToolTip>
/>
)}

<span title={fieldName} className="eui-textTruncate">
Expand Down Expand Up @@ -206,21 +201,27 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
position="top"
content={i18n.translate('xpack.aiops.logRateAnalysis.resultsTable.logRateColumnTooltip', {
defaultMessage:
'A visual representation of the impact of the field on the message rate difference',
})}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTable.logRateLabel"
defaultMessage="Log rate"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTable.logRateLabel"
defaultMessage="Log rate"
/>
&nbsp;
<EuiIconTip
size="s"
position="top"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTable.logRateColumnTooltip',
{
defaultMessage:
'A visual representation of the impact of the field on the message rate difference',
}
)}
/>
</>
),
render: (_, { histogram, fieldName, fieldValue }) => (
<MiniHistogram
Expand Down Expand Up @@ -252,21 +253,27 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
position="top"
content={i18n.translate('xpack.aiops.logRateAnalysis.resultsTable.pValueColumnTooltip', {
defaultMessage:
'The significance of changes in the frequency of values; lower values indicate greater change; sorting this column will automatically do a secondary sort on the doc count column.',
})}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTable.pValueLabel"
defaultMessage="p-value"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTable.pValueLabel"
defaultMessage="p-value"
/>
&nbsp;
<EuiIconTip
size="s"
position="top"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTable.pValueColumnTooltip',
{
defaultMessage:
'The significance of changes in the frequency of values; lower values indicate greater change; sorting this column will automatically do a secondary sort on the doc count column.',
}
)}
/>
</>
),
render: (pValue: number | null) => pValue?.toPrecision(3) ?? NOT_AVAILABLE,
sortable: true,
Expand All @@ -278,23 +285,26 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTable.impactLabelColumnTooltip',
{
defaultMessage: 'The level of impact of the field on the message rate difference.',
}
)}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTable.impactLabel"
defaultMessage="Impact"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTable.impactLabel"
defaultMessage="Impact"
/>
&nbsp;
<EuiIconTip
size="s"
position="top"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTable.impactLabelColumnTooltip',
{
defaultMessage: 'The level of impact of the field on the message rate difference.',
}
)}
/>
</>
),
render: (_, { pValue }) => {
if (typeof pValue !== 'number') return NOT_AVAILABLE;
Expand Down
159 changes: 85 additions & 74 deletions ...lic/components/log_rate_analysis_results_table/log_rate_analysis_results_table_groups.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,10 @@ import {
EuiBadge,
EuiBasicTable,
EuiButtonIcon,
EuiIcon,
EuiScreenReaderOnly,
EuiSpacer,
EuiText,
EuiToolTip,
EuiIconTip,
RIGHT_ALIGNMENT,
useEuiTheme,
euiPaletteColorBlind,
Expand Down Expand Up @@ -176,25 +175,28 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
'data-test-subj': 'aiopsLogRateAnalysisResultsGroupsTableColumnGroup',
field: 'group',
name: (
<EuiToolTip
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.groupColumnTooltip',
{
defaultMessage:
'Displays up to {maxItemCount} group items sorted by uniqueness and document count. Expand row to see all field/value pairs.',
values: { maxItemCount: MAX_GROUP_BADGES },
}
)}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.groupLabel"
defaultMessage="Group"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.groupLabel"
defaultMessage="Group"
/>
&nbsp;
<EuiIconTip
position="top"
size="s"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.groupColumnTooltip',
{
defaultMessage:
'Displays up to {maxItemCount} group items sorted by uniqueness and document count. Expand row to see all field/value pairs.',
values: { maxItemCount: MAX_GROUP_BADGES },
}
)}
/>
</>
),
render: (_, { uniqueItemsCount, groupItemsSortedByUniqueness }) => {
const valuesBadges = [];
Expand Down Expand Up @@ -262,24 +264,27 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.logRateColumnTooltip',
{
defaultMessage:
'A visual representation of the impact of the group on the message rate difference.',
}
)}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.logRateLabel"
defaultMessage="Log rate"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.logRateLabel"
defaultMessage="Log rate"
/>
&nbsp;
<EuiIconTip
size="s"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.logRateColumnTooltip',
{
defaultMessage:
'A visual representation of the impact of the group on the message rate difference.',
}
)}
/>
</>
),
render: (_, { histogram, id }) => (
<MiniHistogram
Expand Down Expand Up @@ -313,24 +318,27 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.pValueColumnTooltip',
{
defaultMessage:
'The significance of changes in the frequency of values; lower values indicate greater change; sorting this column will automatically do a secondary sort on the doc count column.',
}
)}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.pValueLabel"
defaultMessage="p-value"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.pValueLabel"
defaultMessage="p-value"
/>
&nbsp;
<EuiIconTip
size="s"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.pValueColumnTooltip',
{
defaultMessage:
'The significance of changes in the frequency of values; lower values indicate greater change; sorting this column will automatically do a secondary sort on the doc count column.',
}
)}
/>
</>
),
render: (pValue: number | null) => pValue?.toPrecision(3) ?? NOT_AVAILABLE,
sortable: true,
Expand All @@ -342,23 +350,26 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.impactLabelColumnTooltip',
{
defaultMessage: 'The level of impact of the group on the message rate difference',
}
)}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.impactLabel"
defaultMessage="Impact"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.impactLabel"
defaultMessage="Impact"
/>
&nbsp;
<EuiIconTip
size="s"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.impactLabelColumnTooltip',
{
defaultMessage: 'The level of impact of the group on the message rate difference',
}
)}
/>
</>
),
render: (_, { pValue }) => {
if (!pValue) return NOT_AVAILABLE;
Expand Down

0 comments on commit 38e7ab2

Please sign in to comment.