From 5a469dfc8c9068191273d64f16ce0e9167e66f55 Mon Sep 17 00:00:00 2001 From: Weronika Olejniczak Date: Fri, 8 May 2026 12:22:27 +0200 Subject: [PATCH] feat: replace title with tooltip --- packages/eui/changelogs/upcoming/9643.md | 23 + .../avatar/__snapshots__/avatar.test.tsx.snap | 615 +++++++------ .../eui/src/components/avatar/avatar.test.tsx | 15 + packages/eui/src/components/avatar/avatar.tsx | 50 +- .../badge/__snapshots__/badge.test.tsx.snap | 609 ++++++++----- .../eui/src/components/badge/badge.test.tsx | 25 +- packages/eui/src/components/badge/badge.tsx | 135 +-- .../__snapshots__/badge_group.test.tsx.snap | 15 +- .../__snapshots__/basic_table.test.tsx.snap | 232 +++-- .../in_memory_table.test.tsx.snap | 104 ++- .../pagination_bar.test.tsx.snap | 60 +- .../basic_table/basic_table.stories.tsx | 2 +- .../components/basic_table/basic_table.tsx | 50 +- .../basic_table/collapsed_item_actions.tsx | 14 +- .../basic_table/default_item_action.tsx | 10 +- .../_breadcrumb_content.test.tsx.snap | 83 +- .../__snapshots__/breadcrumb.test.tsx.snap | 38 +- .../__snapshots__/breadcrumbs.test.tsx.snap | 816 +++++++++++------- .../breadcrumbs/_breadcrumb_content.tsx | 80 +- .../_button_display_content.tsx | 1 + .../__snapshots__/button_group.test.tsx.snap | 90 -- .../button/button_group/button_group.test.tsx | 5 +- .../button_group/button_group_button.tsx | 1 - .../card/__snapshots__/card.test.tsx.snap | 27 +- .../eui/src/components/card/card.a11y.tsx | 6 +- .../eui/src/components/card/card.stories.tsx | 6 +- .../eui/src/components/card/card.test.tsx | 4 +- .../code/code_block_annotations.tsx | 7 +- ...lapsible_nav_kibana_solution.test.tsx.snap | 40 +- .../collapsible_nav_kibana_solution.tsx | 1 + .../__snapshots__/combo_box.test.tsx.snap | 9 - .../combo_box_input/combo_box_pill.tsx | 2 - .../combo_box_options_list.tsx | 1 - .../__snapshots__/comment.test.tsx.snap | 125 +-- .../__snapshots__/comment_event.test.tsx.snap | 27 +- .../__snapshots__/comment_list.test.tsx.snap | 100 ++- .../comment_timeline.test.tsx.snap | 100 ++- .../context_menu/context_menu.stories.tsx | 4 +- .../context_menu/context_menu_item.tsx | 2 + .../__snapshots__/data_grid.test.tsx.snap | 328 ++++--- .../data_grid_body_custom.test.tsx.snap | 36 +- .../data_grid_body_virtualized.test.tsx.snap | 36 +- .../body/cell/data_grid_cell_actions.test.tsx | 4 +- .../body/cell/data_grid_cell_actions.tsx | 26 +- .../column_actions.test.tsx.snap | 54 +- .../data_grid_header_cell.test.tsx.snap | 18 +- .../datagrid/body/header/column_sorting.tsx | 1 + .../body/header/data_grid_header_cell.tsx | 33 +- .../body/header/data_grid_header_row.test.tsx | 18 +- .../column_sorting.test.tsx.snap | 2 - .../column_sorting_draggable.test.tsx.snap | 2 - .../display_selector.test.tsx.snap | 10 - .../datagrid/controls/column_selector.tsx | 6 +- .../column_sorting_draggable.test.tsx | 20 +- .../controls/column_sorting_draggable.tsx | 2 +- .../controls/data_grid_toolbar.stories.tsx | 2 +- .../datagrid/controls/display_selector.tsx | 2 +- .../datagrid/controls/keyboard_shortcuts.tsx | 2 +- .../components/datagrid/data_grid.test.tsx | 6 +- .../__snapshots__/auto_refresh.test.tsx.snap | 106 ++- .../date_picker/auto_refresh/auto_refresh.tsx | 32 +- .../super_date_picker.test.tsx.snap | 402 +++++---- .../date_popover_button.test.tsx.snap | 1 - .../date_popover/absolute_tab.tsx | 22 +- .../date_popover/date_popover_button.tsx | 10 +- .../date_popover/timezone_display.tsx | 2 +- .../quick_select_popover.test.tsx.snap | 36 +- .../quick_select_popover.tsx | 26 +- .../super_date_picker/time_window_buttons.tsx | 4 - .../drag_and_drop/draggable.stories.tsx | 2 +- .../drag_and_drop/droppable.stories.tsx | 6 +- .../components/empty_prompt/empty_prompt.tsx | 7 +- .../src/components/expression/expression.tsx | 1 + .../__snapshots__/facet_button.test.tsx.snap | 212 +++-- .../components/facet/facet_button.test.tsx | 6 +- .../eui/src/components/facet/facet_button.tsx | 41 +- .../components/filter_group/filter_button.tsx | 1 - .../filter_group/filter_select_item.tsx | 2 +- .../src/components/form/checkbox/checkbox.tsx | 1 + .../field_password.test.tsx.snap | 86 +- .../field_password/field_password.test.tsx | 2 - .../form/field_password/field_password.tsx | 25 +- packages/eui/src/components/form/form.tsx | 1 + .../append_prepend/form_append_prepend.tsx | 6 +- .../form_control_layout.stories.tsx | 18 +- .../form_control_layout_clear_button.tsx | 1 + .../form_control_layout_delimited.stories.tsx | 4 +- .../form_control_layout_delimited.test.tsx | 2 +- .../form_control_layout_icons.tsx | 4 +- .../eui/src/components/form/radio/radio.tsx | 1 + .../range/__snapshots__/range.test.tsx.snap | 186 ++-- .../__snapshots__/range_track.test.tsx.snap | 242 +++--- .../components/form/range/range.stories.tsx | 12 +- .../src/components/form/range/range_ticks.tsx | 46 +- .../eui/src/components/form/switch/switch.tsx | 4 +- .../header/__snapshots__/header.test.tsx.snap | 13 +- .../eui/src/components/header/header.a11y.tsx | 10 +- .../src/components/header/header.stories.tsx | 10 +- .../__snapshots__/header_alert.test.tsx.snap | 15 +- .../header_alert/header_alert.stories.tsx | 4 +- .../header_breadcrumbs.test.tsx.snap | 80 +- .../header/header_links/header_links.tsx | 2 +- .../header_section_item_button.stories.tsx | 6 +- .../header_section_item_button.tsx | 1 + packages/eui/src/components/health/health.tsx | 2 +- .../eui/src/components/icon/icon.test.tsx | 24 +- .../eui/src/components/icon/icon_ML.a11y.tsx | 6 +- .../src/components/icon/icon_apps.a11y.tsx | 6 +- .../src/components/icon/icon_editor.a11y.tsx | 6 +- .../src/components/icon/icon_elastic.a11y.tsx | 6 +- .../src/components/icon/icon_glyphs.a11y.tsx | 6 +- .../src/components/icon/icon_tokens.a11y.tsx | 6 +- .../eui/src/components/image/image_button.tsx | 2 +- .../image/image_fullscreen_wrapper.tsx | 7 +- .../inline_edit_form.test.tsx.snap | 174 ++-- .../inline_edit_text.test.tsx.snap | 206 +++-- .../inline_edit_title.test.tsx.snap | 336 ++++---- .../inline_edit/inline_edit_form.test.tsx | 20 +- .../inline_edit/inline_edit_form.tsx | 50 +- .../key_pad_menu/key_pad_menu.a11y.tsx | 12 +- .../key_pad_menu/key_pad_menu.stories.tsx | 48 +- .../key_pad_menu_item.stories.tsx | 2 +- .../__snapshots__/list_group.test.tsx.snap | 100 ++- .../list_group_item.test.tsx.snap | 210 +++-- .../components/list_group/list_group_item.tsx | 21 +- .../pinnable_list_group.test.tsx.snap | 120 ++- .../components/loading/loading_elastic.tsx | 2 +- .../src/components/loading/loading_logo.tsx | 2 +- .../markdown_editor_help_button.tsx | 21 +- .../plugins/markdown_tooltip/renderer.tsx | 1 + .../__snapshots__/page_header.test.tsx.snap | 33 +- .../page_header_content.test.tsx.snap | 33 +- .../page_header_content.stories.tsx | 2 +- .../page_template/page_template.stories.tsx | 2 +- .../__snapshots__/pagination.test.tsx.snap | 224 ++--- .../pagination/pagination_button_arrow.tsx | 12 +- .../__snapshots__/search_bar.test.tsx.snap | 212 ++--- .../search_filters.test.tsx.snap | 2 - .../field_value_toggle_filter.test.tsx.snap | 4 - ...ld_value_toggle_group_filter.test.tsx.snap | 4 - .../__snapshots__/is_filter.test.tsx.snap | 1 - .../components/search_bar/search_bar.test.tsx | 4 +- .../src/components/search_bar/search_bar.tsx | 44 +- .../src/components/search_bar/search_box.tsx | 4 +- .../__snapshots__/selectable.test.tsx.snap | 6 - .../selectable_list.test.tsx.snap | 125 +-- .../selectable_list_item.test.tsx.snap | 42 +- .../selectable_list.stories.tsx | 1 + .../selectable_list/selectable_list.tsx | 1 - .../selectable_list/selectable_list_item.tsx | 1 + .../__snapshots__/side_nav.test.tsx.snap | 449 ++++++---- .../__snapshots__/side_nav_item.test.tsx.snap | 215 +++-- .../src/components/side_nav/side_nav.a11y.tsx | 12 +- .../components/side_nav/side_nav.stories.tsx | 10 +- .../side_nav/side_nav_item.test.tsx | 23 + .../src/components/side_nav/side_nav_item.tsx | 73 +- .../table/__snapshots__/table.test.tsx.snap | 22 +- .../table_header_cell.test.tsx.snap | 94 +- .../table/table_header_cell.test.tsx | 24 +- .../components/table/table_header_cell.tsx | 18 +- .../table_pagination.test.tsx.snap | 60 +- .../eui/src/components/tabs/tab.stories.tsx | 10 +- .../text_truncate/text_truncate.test.tsx | 42 +- .../text_truncate/text_truncate.tsx | 13 +- .../__snapshots__/timeline.test.tsx.snap | 200 +++-- .../__snapshots__/timeline_item.test.tsx.snap | 125 +-- .../tree_view/tree_view.stories.tsx | 6 +- .../components/tree_view/tree_view.test.tsx | 18 +- .../tree_view/tree_view_item.stories.tsx | 2 +- .../components/tree_view/tree_view_item.tsx | 1 + 170 files changed, 5551 insertions(+), 3862 deletions(-) create mode 100644 packages/eui/changelogs/upcoming/9643.md diff --git a/packages/eui/changelogs/upcoming/9643.md b/packages/eui/changelogs/upcoming/9643.md new file mode 100644 index 000000000000..99c5de144b3c --- /dev/null +++ b/packages/eui/changelogs/upcoming/9643.md @@ -0,0 +1,23 @@ +- Replaced native browser `title` attributes with `EuiToolTip` across the following components for screen-reader-friendly tooltips: + - `EuiAvatar` + - `EuiBadge` + - `EuiBasicTable` + - `EuiBreadcrumbs` + - `EuiButtonGroup` + - `EuiComboBox` + - `EuiDataGrid` + - `EuiAutoRefresh` + - `EuiSuperDatePicker` + - `EuiFacetButton` + - `EuiFilterButton` + - `EuiFieldPassword` + - `EuiRange` + - `EuiInlineEditText` and `EuiInlineEditTitle` + - `EuiListGroupItem` + - `EuiMarkdownEditor` + - `EuiPagination` + - `EuiSearchBar` + - `EuiSelectable` + - `EuiSideNav` + - `EuiTable` + - `EuiTextTruncate` diff --git a/packages/eui/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/packages/eui/src/components/avatar/__snapshots__/avatar.test.tsx.snap index 8c74f3a7dd26..96066e6b4bff 100644 --- a/packages/eui/src/components/avatar/__snapshots__/avatar.test.tsx.snap +++ b/packages/eui/src/components/avatar/__snapshots__/avatar.test.tsx.snap @@ -1,360 +1,475 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = ` - + + + `; exports[`EuiAvatar is rendered 1`] = ` - + + + `; exports[`EuiAvatar props casing capitalize is rendered 1`] = ` - + + + `; exports[`EuiAvatar props casing lowercase is rendered 1`] = ` - + + + `; exports[`EuiAvatar props casing none is rendered 1`] = ` - + + + `; exports[`EuiAvatar props casing uppercase is rendered 1`] = ` - + + + `; exports[`EuiAvatar props color as null is rendered 1`] = ` - + + + `; exports[`EuiAvatar props color as plain is rendered 1`] = ` - + + + `; exports[`EuiAvatar props color as string is rendered 1`] = ` - + + + `; exports[`EuiAvatar props color as subdued is rendered 1`] = ` - + + + `; exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = ` - + + `; exports[`EuiAvatar props iconType and iconColor is rendered 1`] = ` - + + `; exports[`EuiAvatar props iconType and iconSize is rendered 1`] = ` - + + `; exports[`EuiAvatar props iconType is rendered 1`] = ` - + + `; exports[`EuiAvatar props imageUrl is rendered 1`] = ` - + `; exports[`EuiAvatar props isDisabled is rendered 1`] = ` - + + + `; exports[`EuiAvatar props size l is rendered 1`] = ` - + + + `; exports[`EuiAvatar props size m is rendered 1`] = ` - + + + `; exports[`EuiAvatar props size s is rendered 1`] = ` - + + + `; exports[`EuiAvatar props size xl is rendered 1`] = ` - + + + `; exports[`EuiAvatar props type is rendered 1`] = ` - + + + `; diff --git a/packages/eui/src/components/avatar/avatar.test.tsx b/packages/eui/src/components/avatar/avatar.test.tsx index f0d3fc0fd168..228c6f666336 100644 --- a/packages/eui/src/components/avatar/avatar.test.tsx +++ b/packages/eui/src/components/avatar/avatar.test.tsx @@ -7,6 +7,7 @@ */ import React from 'react'; +import { fireEvent } from '@testing-library/react'; import { shouldRenderCustomStyles } from '../../test/internal'; import { requiredProps } from '../../test/required_props'; import { render } from '../../test/rtl'; @@ -168,6 +169,20 @@ describe('EuiAvatar', () => { }); }); + describe('tooltip', () => { + it('shows a tooltip with the avatar name on hover', () => { + const { getByRole, queryByRole } = render(); + expect(queryByRole('tooltip')).not.toBeInTheDocument(); + fireEvent.mouseOver(getByRole('img')); + expect(getByRole('tooltip')).toHaveTextContent('Jane Doe'); + }); + + it('is keyboard focusable', () => { + const { getByRole } = render(); + expect(getByRole('img')).toHaveAttribute('tabindex', '0'); + }); + }); + test('should throw error if color is not a hex', () => { const component = () => render(); diff --git a/packages/eui/src/components/avatar/avatar.tsx b/packages/eui/src/components/avatar/avatar.tsx index 746537783964..3e2a661fdca0 100644 --- a/packages/eui/src/components/avatar/avatar.tsx +++ b/packages/eui/src/components/avatar/avatar.tsx @@ -22,6 +22,7 @@ import { } from '../../services/color'; import { toInitials, useEuiMemoizedStyles, useEuiTheme } from '../../services'; import { IconType, EuiIcon, IconSize, IconColor } from '../icon'; +import { EuiToolTip } from '../tool_tip'; import { euiAvatarStyles } from './avatar.styles'; @@ -201,29 +202,32 @@ export const EuiAvatar: FunctionComponent = ({ }, [iconColor, avatarStyle?.color, isForcedColors, euiTheme]); return ( -
- {!imageUrl && - (iconType ? ( - - ) : ( - - ))} -
+ +
+ {!imageUrl && + (iconType ? ( + + ) : ( + + ))} +
+ ); }; diff --git a/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap b/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap index bfae33aca0a4..42cd6d713251 100644 --- a/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap +++ b/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap @@ -2,18 +2,23 @@ exports[`EuiBadge is disabled 1`] = ` - Content + + Content + @@ -21,18 +26,23 @@ exports[`EuiBadge is disabled 1`] = ` exports[`EuiBadge is rendered 1`] = ` - Content + + Content + @@ -45,39 +55,47 @@ exports[`EuiBadge is rendered with href and rel provided 1`] = ` - - Content - + + Content + + `; exports[`EuiBadge is rendered with href provided 1`] = ` - - - Content + + Content + - - + + `; exports[`EuiBadge is rendered with iconOnClick and href provided 1`] = ` @@ -87,16 +105,20 @@ exports[`EuiBadge is rendered with iconOnClick and href provided 1`] = ` - - Content - + + Content + + `; @@ -108,68 +130,86 @@ exports[`EuiBadge is rendered with iconOnClick and onClick provided 1`] = ` - + + `; exports[`EuiBadge is rendered with iconOnClick provided 1`] = ` - Content + + Content + `; exports[`EuiBadge is rendered with onClick provided 1`] = ` - + + `; exports[`EuiBadge props color accent is rendered 1`] = ` - Content + + Content + @@ -177,17 +217,22 @@ exports[`EuiBadge props color accent is rendered 1`] = ` exports[`EuiBadge props color accepts hex 1`] = ` - Content + + Content + @@ -195,17 +240,22 @@ exports[`EuiBadge props color accepts hex 1`] = ` exports[`EuiBadge props color accepts rgba 1`] = ` - Content + + Content + @@ -213,16 +263,21 @@ exports[`EuiBadge props color accepts rgba 1`] = ` exports[`EuiBadge props color danger is rendered 1`] = ` - Content + + Content + @@ -230,16 +285,21 @@ exports[`EuiBadge props color danger is rendered 1`] = ` exports[`EuiBadge props color default is rendered 1`] = ` - Content + + Content + @@ -247,16 +307,21 @@ exports[`EuiBadge props color default is rendered 1`] = ` exports[`EuiBadge props color hollow is rendered 1`] = ` - Content + + Content + @@ -264,16 +329,21 @@ exports[`EuiBadge props color hollow is rendered 1`] = ` exports[`EuiBadge props color neutral is rendered 1`] = ` - Content + + Content + @@ -281,16 +351,21 @@ exports[`EuiBadge props color neutral is rendered 1`] = ` exports[`EuiBadge props color primary is rendered 1`] = ` - Content + + Content + @@ -298,16 +373,21 @@ exports[`EuiBadge props color primary is rendered 1`] = ` exports[`EuiBadge props color risk is rendered 1`] = ` - Content + + Content + @@ -315,16 +395,21 @@ exports[`EuiBadge props color risk is rendered 1`] = ` exports[`EuiBadge props color success is rendered 1`] = ` - Content + + Content + @@ -332,16 +417,21 @@ exports[`EuiBadge props color success is rendered 1`] = ` exports[`EuiBadge props color warning is rendered 1`] = ` - Content + + Content + @@ -349,21 +439,27 @@ exports[`EuiBadge props color warning is rendered 1`] = ` exports[`EuiBadge props iconSide left is rendered 1`] = ` - - Content + @@ -371,43 +467,55 @@ exports[`EuiBadge props iconSide left is rendered 1`] = ` exports[`EuiBadge props iconSide right is rendered 1`] = ` - Content + + Content + + - `; exports[`EuiBadge props iconType is rendered 1`] = ` - - Content + @@ -415,17 +523,22 @@ exports[`EuiBadge props iconType is rendered 1`] = ` exports[`EuiBadge props style is rendered 1`] = ` - Content + + Content + @@ -433,17 +546,22 @@ exports[`EuiBadge props style is rendered 1`] = ` exports[`EuiBadge props style is rendered with accent 1`] = ` - Content + + Content + @@ -451,17 +569,22 @@ exports[`EuiBadge props style is rendered with accent 1`] = ` exports[`EuiBadge props style is rendered with danger 1`] = ` - Content + + Content + @@ -469,17 +592,22 @@ exports[`EuiBadge props style is rendered with danger 1`] = ` exports[`EuiBadge props style is rendered with default 1`] = ` - Content + + Content + @@ -487,17 +615,22 @@ exports[`EuiBadge props style is rendered with default 1`] = ` exports[`EuiBadge props style is rendered with hollow 1`] = ` - Content + + Content + @@ -505,17 +638,22 @@ exports[`EuiBadge props style is rendered with hollow 1`] = ` exports[`EuiBadge props style is rendered with hollow 2`] = ` - Content + + Content + @@ -523,17 +661,22 @@ exports[`EuiBadge props style is rendered with hollow 2`] = ` exports[`EuiBadge props style is rendered with neutral 1`] = ` - Content + + Content + @@ -541,17 +684,22 @@ exports[`EuiBadge props style is rendered with neutral 1`] = ` exports[`EuiBadge props style is rendered with primary 1`] = ` - Content + + Content + @@ -559,17 +707,22 @@ exports[`EuiBadge props style is rendered with primary 1`] = ` exports[`EuiBadge props style is rendered with risk 1`] = ` - Content + + Content + @@ -577,17 +730,22 @@ exports[`EuiBadge props style is rendered with risk 1`] = ` exports[`EuiBadge props style is rendered with success 1`] = ` - Content + + Content + @@ -595,17 +753,22 @@ exports[`EuiBadge props style is rendered with success 1`] = ` exports[`EuiBadge props style is rendered with warning 1`] = ` - Content + + Content + diff --git a/packages/eui/src/components/badge/badge.test.tsx b/packages/eui/src/components/badge/badge.test.tsx index 9b40305d69be..4534731d862b 100644 --- a/packages/eui/src/components/badge/badge.test.tsx +++ b/packages/eui/src/components/badge/badge.test.tsx @@ -236,9 +236,10 @@ describe('EuiBadge', () => { it('applies correct sizing styles to the main element', () => { const { container } = render(Badge); + const badge = container.querySelector('.euiBadge'); - expect(container.firstChild).toHaveStyleRule('padding-block', '0'); - expect(container.firstChild).toHaveStyleRule( + expect(badge).toHaveStyleRule('padding-block', '0'); + expect(badge).toHaveStyleRule( 'padding-inline', mathWithUnits( [theme.euiTheme.size.s, theme.euiTheme.border.width.thin], @@ -249,9 +250,10 @@ describe('EuiBadge', () => { it('applies custom sizing styles to the main element when rendering an icon-only variant', () => { const { container } = render(); + const badge = container.querySelector('.euiBadge'); - expect(container.firstChild).toHaveStyleRule('padding-block', '0'); - expect(container.firstChild).toHaveStyleRule( + expect(badge).toHaveStyleRule('padding-block', '0'); + expect(badge).toHaveStyleRule( 'padding-inline', mathWithUnits( [theme.euiTheme.size.xs, theme.euiTheme.border.width.thin], @@ -315,24 +317,19 @@ describe('EuiBadge', () => { ); const colors = colorsMap[color]; + const badge = result.container.querySelector('.euiBadge'); - expect(result.container.firstChild).toHaveStyleRule( + expect(badge).toHaveStyleRule( '--euiBadgeBackgroundColor', colors.backgroundColor ); - expect(result.container.firstChild).toHaveStyleRule( - '--euiBadgeTextColor', - colors.textColor - ); + expect(badge).toHaveStyleRule('--euiBadgeTextColor', colors.textColor); if (Object.hasOwn(colors, 'borderColor')) { - expect(result.container.firstChild).toHaveStyleRule( - 'border-color', - colors.borderColor - ); + expect(badge).toHaveStyleRule('border-color', colors.borderColor); } else { - expect(result.container.firstChild).not.toHaveStyleRule('border-color'); + expect(badge).not.toHaveStyleRule('border-color'); } }; diff --git a/packages/eui/src/components/badge/badge.tsx b/packages/eui/src/components/badge/badge.tsx index c1385bebfad5..68e5df2e03f3 100644 --- a/packages/eui/src/components/badge/badge.tsx +++ b/packages/eui/src/components/badge/badge.tsx @@ -26,6 +26,7 @@ import { validateHref } from '../../services/security/href_validator'; import { CommonProps, ExclusiveUnion, PropsOf } from '../common'; import { EuiInnerText } from '../inner_text'; import { EuiIcon, IconType } from '../icon'; +import { EuiToolTip } from '../tool_tip'; import { getTextColor, getIsValidColor, @@ -266,24 +267,25 @@ export const EuiBadge: FunctionComponent = ({ ); } optionalIcon = ( - + + + ); } else { optionalIcon = ( @@ -293,6 +295,7 @@ export const EuiBadge: FunctionComponent = ({ className="euiBadge__icon" css={iconCssStyles} color="inherit" // forces the icon to inherit its parent color + aria-hidden /> ); } @@ -323,18 +326,19 @@ export const EuiBadge: FunctionComponent = ({ {iconSide === 'left' && optionalIcon} {(ref, innerText) => ( - )} - {...(rest as HTMLAttributes)} - > - {children} - + + )} + {...(rest as HTMLAttributes)} + > + {children} + + )} {iconSide === 'right' && optionalIcon} @@ -343,16 +347,18 @@ export const EuiBadge: FunctionComponent = ({ ) : ( {(ref, innerText) => ( - - {content} - + + + {content} + + )} ); @@ -360,19 +366,20 @@ export const EuiBadge: FunctionComponent = ({ return ( {(ref, innerText) => ( - } - title={innerText} - {...(relObj as HTMLAttributes)} - {...(rest as HTMLAttributes)} - > - {content} - + + } + {...(relObj as HTMLAttributes)} + {...(rest as HTMLAttributes)} + > + {content} + + )} ); @@ -380,16 +387,18 @@ export const EuiBadge: FunctionComponent = ({ return ( {(ref, innerText) => ( - - {content} - + + + {content} + + )} ); diff --git a/packages/eui/src/components/badge/badge_group/__snapshots__/badge_group.test.tsx.snap b/packages/eui/src/components/badge/badge_group/__snapshots__/badge_group.test.tsx.snap index a72eb9ce8a19..b871ef99313a 100644 --- a/packages/eui/src/components/badge/badge_group/__snapshots__/badge_group.test.tsx.snap +++ b/packages/eui/src/components/badge/badge_group/__snapshots__/badge_group.test.tsx.snap @@ -25,16 +25,21 @@ exports[`EuiBadgeGroup is rendered 1`] = ` data-test-subj="test subject string" > - Content + + Content + diff --git a/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap index 65ee7a064cb1..7f4a9a100a12 100644 --- a/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -82,10 +82,15 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = ` class="euiTableCellContent emotion-euiTableCellContent-euiTableHeaderCell__content" > - Name + + Name + -
- - +
+ + +
-
+