Skip to content

Commit ae41e86

Browse files
alexwizpalexwizp
committed
Fix violations of the @elastic/eui/tooltip-focusable-anchor ESLint rule (#236721)
Closes: #204767 Closes: #221091 **Summary** This PR fixes accessibility violations related to EuiTooltip usage across the codebase. **Details** 1. Ensures that all `EuiTooltip` components are anchored to elements that can receive keyboard focus. 2. Added `tabIndex={0}` to non-interactive elements (e.g., `span`, `EuiText`) used as tooltip anchors so they are keyboard-focusable. **Why** Tooltips anchored to non-focusable elements were not accessible to keyboard users. These changes improve compliance with accessibility guidelines and ensure a better experience for all users. **More context** Fix violations of the `@elastic/eui/tooltip-focusable-anchor` ESLint. See elastic/eui#9051 for more details --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 7088e5c) # Conflicts: # src/platform/packages/private/kbn-index-editor/src/components/file_clashes.tsx # src/platform/packages/private/kbn-index-editor/src/components/flyout_content.tsx # src/platform/packages/shared/kbn-apm-ui-shared/src/components/timestamp/index.tsx # src/platform/packages/shared/kbn-unified-field-list/src/components/field_stats/field_top_values_bucket.tsx # src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/columns/get_columns.tsx # src/platform/plugins/shared/workflows_management/public/components/workflows_empty_state/workflows_empty_state.tsx # x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx # x-pack/platform/plugins/shared/ingest_pipelines/public/application/sections/pipelines_list/flyout_content/details_panel.tsx # x-pack/platform/plugins/shared/ingest_pipelines/public/application/sections/pipelines_list/table.tsx # x-pack/platform/plugins/shared/streams_app/public/components/data_management/schema_editor/field_status.tsx # x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_enrichment/processors/processor_metrics.tsx # x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_management/classic.tsx # x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_management/wired.tsx # x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_routing/idle_routing_stream_entry.tsx # x-pack/solutions/observability/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/badge/sync_badge.tsx # x-pack/solutions/observability/plugins/apm/public/components/shared/trace_waterfall/bar_details.tsx # x-pack/solutions/observability/plugins/observability/common/components/elapsed_timestamp_tooltip.tsx # x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/fleet_extensions/common.tsx # x-pack/solutions/security/plugins/security_solution/public/management/components/console_argument_selectors/custom_scripts_selector/custom_script_selector.tsx # x-pack/solutions/security/plugins/security_solution/public/management/components/console_argument_selectors/pending_actions_selector/pending_actions_selector.tsx # x-pack/solutions/security/plugins/security_solution/public/reports/components/ai_value/compare_percentage_badge.tsx
1 parent 2bd22d4 commit ae41e86

217 files changed

Lines changed: 487 additions & 272 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎examples/esql_ast_inspector/public/components/esql_inspector/components/preview/components/preview_ui/components/from_command/source.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export const Source: React.FC<SourceProps> = ({ node, index }) => {
7171
label={
7272
comment ? (
7373
<EuiToolTip content={comment}>
74-
<span>
74+
<span tabIndex={0}>
7575
Source {index} <EuiIcon type="editorComment" color="subdued" />
7676
</span>
7777
</EuiToolTip>

‎src/platform/packages/shared/content-management/table_list_view_table/src/components/updated_at_field.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const UpdatedAtField: FC<{ dateTime?: string; DateFormatterComp?: DateFor
2828
defaultMessage: 'Last updated unknown',
2929
})}
3030
>
31-
<span>-</span>
31+
<span tabIndex={0}>-</span>
3232
</EuiToolTip>
3333
);
3434
}
@@ -39,15 +39,15 @@ export const UpdatedAtField: FC<{ dateTime?: string; DateFormatterComp?: DateFor
3939
<DateFormatterComp value={new Date(dateTime).getTime()}>
4040
{(formattedDate: string) => (
4141
<EuiToolTip content={updatedAt.format('LL LT')}>
42-
<span>{formattedDate}</span>
42+
<span tabIndex={0}>{formattedDate}</span>
4343
</EuiToolTip>
4444
)}
4545
</DateFormatterComp>
4646
);
4747
}
4848
return (
4949
<EuiToolTip content={updatedAt.format('LL LT')}>
50-
<span>{updatedAt.format('ll')}</span>
50+
<span tabIndex={0}>{updatedAt.format('ll')}</span>
5151
</EuiToolTip>
5252
);
5353
};

‎src/platform/packages/shared/kbn-apm-ui-shared/src/components/duration/percent_of_parent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export function PercentOfParent({ duration, totalDuration, parentType }: Percent
4444
},
4545
})}
4646
>
47-
<>{percentOfParentText}</>
47+
<span tabIndex={0}>{percentOfParentText}</span>
4848
</EuiToolTip>
4949
) : (
5050
percentOfParentText

‎src/platform/packages/shared/kbn-custom-icons/src/components/agent_icon/agent_icon.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export const List: StoryFn = () => {
3535
hasShadow
3636
alt={agentName}
3737
src={getAgentIcon(agentName, false)}
38+
tabIndex={0}
3839
/>
3940
</EuiToolTip>
4041
}

‎src/platform/packages/shared/kbn-grouping/src/components/accordion_panel/group_stats.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ const GroupStatsComponent = <T,>({
7878
component: (
7979
<EuiToolTip position="top" content={stat.badge.value}>
8080
<EuiBadge
81+
tabIndex={0}
8182
style={{ marginLeft: 10, width: stat.badge.width ?? 35 }}
8283
color={stat.badge.color ?? 'hollow'}
8384
>

‎src/platform/packages/shared/kbn-unified-doc-viewer/src/components/field_name/field_name.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export function FieldName({
8989
)}
9090
>
9191
<EuiBadge
92+
tabIndex={0}
9293
title=""
9394
className="kbnDocViewer__fieldName_multiFieldBadge"
9495
color="default"

‎src/platform/packages/shared/response-ops/alerts-fields-browser/components/field_items/field_items.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ const getDefaultFieldTableColumns = ({ highlight }: { highlight: string }): Fiel
140140
<EuiScreenReaderOnly data-test-subj="descriptionForScreenReaderOnly">
141141
<p>{i18n.DESCRIPTION_FOR_FIELD(name)}</p>
142142
</EuiScreenReaderOnly>
143-
<span css={styles.truncatable}>
143+
<span css={styles.truncatable} tabIndex={0}>
144144
<span css={styles.description} data-test-subj={`field-${name}-description`}>
145145
{`${description ?? getEmptyValue()} ${getExampleText(example)}`}
146146
</span>

‎src/platform/packages/shared/response-ops/alerts-table/components/alert_lifecycle_status_cell.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export const AlertLifecycleStatusCell: CellComponent = memo((props) => {
4545
>
4646
<EuiBadge
4747
iconType="bellSlash"
48+
tabIndex={0}
4849
css={css`
4950
padding-inline: ${euiTheme.size.xs};
5051
`}

‎src/platform/packages/shared/response-ops/alerts-table/components/last_updated_at.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export const LastUpdatedAt = React.memo<LastUpdatedAtProps>(
7979
`,
8080
}}
8181
>
82-
<EuiText color="subdued" size="xs" data-test-subj="toolbar-updated-at">
82+
<EuiText color="subdued" size="xs" data-test-subj="toolbar-updated-at" tabIndex={0}>
8383
{updateText}
8484
</EuiText>
8585
</EuiToolTip>

‎src/platform/packages/shared/response-ops/alerts-table/components/maintenance_windows_cell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const MaintenanceWindowBaseCell = memo((props: MaintenanceWindowBaseCellP
3737
key={`${mw.id}_tooltip`}
3838
content={<TooltipContent maintenanceWindow={mw} timestamp={timestamp} />}
3939
>
40-
<span key={`${mw.id}_title`}>
40+
<span key={`${mw.id}_title`} tabIndex={0}>
4141
{mw.title}
4242
{index !== totalLength - 1 && <>, &nbsp;</>}
4343
</span>

0 commit comments

Comments
 (0)