From 209c651f1e4eacbb837872b0a1c8ab75760b75f7 Mon Sep 17 00:00:00 2001 From: Weronika Olejniczak Date: Wed, 27 May 2026 16:15:18 +0200 Subject: [PATCH 1/6] feat(kibana-visualizations): replace title props and wrap EuiButtonIcon with EuiToolTip --- .../components/assignment/assignment.tsx | 59 ++++++++------- .../components/container/assignments.tsx | 23 ++++-- .../color_ranges/color_ranges_item.tsx | 23 +++--- .../color_ranges_item_buttons.tsx | 53 +++++++------- .../dimension_buttons/dimension_button.tsx | 61 +++++++++------- .../default_bucket_container.tsx | 21 +++--- .../fields_bucket_container.tsx | 19 ++--- .../group_editor_flyout.tsx | 36 ++++++---- .../controls/components/input_list.tsx | 18 ++--- .../components/number_list/number_row.tsx | 19 ++--- .../components/controls/date_ranges.tsx | 18 ++--- .../public/components/controls/filter.tsx | 71 ++++++++++++------- .../public/components/controls/ranges.tsx | 17 ++--- .../public/components/sidebar/sidebar.tsx | 32 +++++---- .../components/deprecated_interval_info.tsx | 22 ++++-- .../public/components/vega_actions_menu.tsx | 25 +++++-- .../vega/public/components/vega_help_menu.tsx | 25 +++++-- .../static/components/legend_toggle.tsx | 42 ++++++----- .../components/last_value_mode_popover.tsx | 18 +++-- .../field_text_select.tsx | 16 +++-- .../switch_mode_popover.tsx | 25 +++++-- .../edit_on_the_fly/convert_to_esql_modal.tsx | 26 +++++-- .../layer_actions/layer_actions.tsx | 26 ++++--- .../shared_components/flyout_container.tsx | 63 ++++++++++------ .../setting_with_sibling_flyout.tsx | 32 +++++---- .../datatable/components/table_basic.tsx | 41 ++++++----- 26 files changed, 514 insertions(+), 317 deletions(-) diff --git a/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/assignment/assignment.tsx b/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/assignment/assignment.tsx index b56e05ad7aebe..439d0ccb113dc 100644 --- a/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/assignment/assignment.tsx +++ b/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/assignment/assignment.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { useDispatch } from 'react-redux'; -import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { css } from '@emotion/react'; import { euiThemeVars } from '@kbn/ui-theme'; @@ -123,32 +123,39 @@ export function Assignment({ )} - dispatch(removeAssignment(index))} - aria-label={i18n.translate( - 'coloring.colorMapping.assignments.deleteAssignmentButtonLabel', - { - defaultMessage: 'Delete this assignment', + + dispatch(removeAssignment(index))} + aria-label={i18n.translate( + 'coloring.colorMapping.assignments.deleteAssignmentButtonLabel', + { + defaultMessage: 'Delete this assignment', + } + )} + color="danger" + css={ + !disableDelete + ? css` + color: ${euiThemeVars.euiTextColor}; + transition: ${euiThemeVars.euiAnimSpeedFast} ease-in-out; + transition-property: color; + &:hover, + &:focus { + color: ${euiThemeVars.euiColorDangerText}; + } + ` + : undefined } - )} - color="danger" - css={ - !disableDelete - ? css` - color: ${euiThemeVars.euiTextColor}; - transition: ${euiThemeVars.euiAnimSpeedFast} ease-in-out; - transition-property: color; - &:hover, - &:focus { - color: ${euiThemeVars.euiColorDangerText}; - } - ` - : undefined - } - /> + /> + ); diff --git a/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/container/assignments.tsx b/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/container/assignments.tsx index d956f84b38b1b..a13ebe13fca01 100644 --- a/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/container/assignments.tsx +++ b/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/container/assignments.tsx @@ -22,6 +22,7 @@ import { EuiPanel, EuiPopover, EuiText, + EuiToolTip, } from '@elastic/eui'; import { css } from '@emotion/react'; import React, { useCallback, useMemo, useState } from 'react'; @@ -241,17 +242,27 @@ export function Assignments({ } )} button={ - setShowOtherActions(true)} - /> + disableScreenReaderOutput + > + setShowOtherActions(true)} + /> + } isOpen={showOtherActions} closePopover={() => setShowOtherActions(false)} diff --git a/src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item.tsx b/src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item.tsx index 82d3adc593c8f..c71dc754a6ef0 100644 --- a/src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item.tsx +++ b/src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item.tsx @@ -14,13 +14,14 @@ import React, { useState, useCallback, useContext, useMemo } from 'react'; import { css } from '@emotion/react'; import { - EuiFieldNumber, + EuiButtonIcon, EuiColorPicker, - EuiFlexItem, + EuiColorPickerSwatch, + EuiFieldNumber, EuiFlexGroup, + EuiFlexItem, EuiIcon, - EuiColorPickerSwatch, - EuiButtonIcon, + EuiToolTip, useEuiTheme, } from '@elastic/eui'; @@ -181,12 +182,14 @@ export function ColorRangeItem({ style={{ width: euiTheme.size.xl, height: euiTheme.size.xl }} /> ) : ( - + + + ) } secondaryInputDisplay="top" diff --git a/src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item_buttons.tsx b/src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item_buttons.tsx index 52eda5ee8786d..14c58753ebe1d 100644 --- a/src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item_buttons.tsx +++ b/src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item_buttons.tsx @@ -12,7 +12,7 @@ import React, { useCallback, useContext } from 'react'; import { i18n } from '@kbn/i18n'; import type { EuiIconProps } from '@elastic/eui'; -import { EuiButtonIcon } from '@elastic/eui'; +import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'; import { TooltipWrapper } from '@kbn/visualization-utils'; import type { PaletteContinuity, CustomPaletteParams } from '../../../palettes'; @@ -57,14 +57,15 @@ export function ColorRangeDeleteButton({ index, dispatch }: ColorRangesItemButto }); return ( - + + + ); } @@ -105,13 +106,15 @@ export function ColorRangeEditButton({ return ( - + + + ); } @@ -137,14 +140,16 @@ export function ColorRangeAutoDetectButton({ return ( - + + + ); } diff --git a/src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx b/src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx index a6029cbfeeecd..8020d4b15b24a 100644 --- a/src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx +++ b/src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx @@ -103,37 +103,44 @@ function DimensionButtonImpl({ - onRemoveClick(accessorConfig.columnId)} - css={css` - color: ${euiTheme.colors.textSubdued} - transition: ${euiTheme.animation.fast} ease-in-out; - transition-property: color, opacity, background-color, transform; - opacity: 0; + disableScreenReaderOutput + > + onRemoveClick(accessorConfig.columnId)} + css={css` + color: ${euiTheme.colors.textSubdued} + transition: ${euiTheme.animation.fast} ease-in-out; + transition-property: color, opacity, background-color, transform; + opacity: 0; - .domDraggable:hover &, - .domDraggable:focus-within & { - opacity: 1; - } - &:hover, - &:focus { - color: ${euiTheme.colors.textDanger}; - } - `} - /> + .domDraggable:hover &, + .domDraggable:focus-within & { + opacity: 1; + } + &:hover, + &:focus { + color: ${euiTheme.colors.textDanger}; + } + `} + /> + ); diff --git a/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx b/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx index 5ba2a0a1b912c..23e664e03b891 100644 --- a/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx +++ b/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx @@ -15,6 +15,7 @@ import { EuiFlexItem, EuiIcon, EuiPanel, + EuiToolTip, useEuiTheme, } from '@elastic/eui'; import { TooltipWrapper } from '@kbn/visualization-utils'; @@ -88,15 +89,17 @@ export const DefaultBucketContainer = ({ )} condition={isNotRemovable ?? false} > - + + + diff --git a/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/fields_bucket_container.tsx b/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/fields_bucket_container.tsx index 9db20e2d2111c..4a66788208138 100644 --- a/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/fields_bucket_container.tsx +++ b/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/fields_bucket_container.tsx @@ -15,6 +15,7 @@ import { EuiFlexItem, EuiIcon, EuiPanel, + EuiToolTip, useEuiTheme, } from '@elastic/eui'; import { TooltipWrapper } from '@kbn/visualization-utils'; @@ -78,14 +79,16 @@ export const FieldsBucketContainer = ({ )} condition={isNotRemovable ?? false} > - + + + diff --git a/src/platform/plugins/private/event_annotation_listing/public/components/group_editor_flyout/group_editor_flyout.tsx b/src/platform/plugins/private/event_annotation_listing/public/components/group_editor_flyout/group_editor_flyout.tsx index 79efdcf257f9b..0bb128224f879 100644 --- a/src/platform/plugins/private/event_annotation_listing/public/components/group_editor_flyout/group_editor_flyout.tsx +++ b/src/platform/plugins/private/event_annotation_listing/public/components/group_editor_flyout/group_editor_flyout.tsx @@ -8,18 +8,19 @@ */ import { + EuiButton, + EuiButtonEmpty, + EuiButtonIcon, + EuiFlexGroup, + EuiFlexItem, EuiFlyout, - EuiFlyoutHeader, - EuiTitle, EuiFlyoutBody, EuiFlyoutFooter, - EuiFlexGroup, - EuiFlexItem, - EuiButtonEmpty, - EuiButton, + EuiFlyoutHeader, + EuiTitle, + EuiToolTip, htmlIdGenerator, useIsWithinBreakpoints, - EuiButtonIcon, } from '@elastic/eui'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -138,15 +139,22 @@ export const GroupEditorFlyout = ({ {selectedAnnotation ? ( - setSelectedAnnotation(undefined)} - data-test-subj="backToGroupSettingsTop" - /> + disableScreenReaderOutput + > + setSelectedAnnotation(undefined)} + data-test-subj="backToGroupSettingsTop" + /> + {config.renderInputRow(item, index, onChangeValue)} - onDelete(item.id)} - /> + + onDelete(item.id)} + /> + diff --git a/src/platform/plugins/private/vis_default_editor/public/components/controls/components/number_list/number_row.tsx b/src/platform/plugins/private/vis_default_editor/public/components/controls/components/number_list/number_row.tsx index 8842cc2f64a90..15fb04bfaf9c6 100644 --- a/src/platform/plugins/private/vis_default_editor/public/components/controls/components/number_list/number_row.tsx +++ b/src/platform/plugins/private/vis_default_editor/public/components/controls/components/number_list/number_row.tsx @@ -9,7 +9,7 @@ import React, { useCallback } from 'react'; -import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiButtonIcon } from '@elastic/eui'; +import { EuiButtonIcon, EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import type { NumberListRange } from './range'; @@ -85,14 +85,15 @@ function NumberRow({ /> - + + + ); diff --git a/src/platform/plugins/private/vis_default_editor/public/components/controls/date_ranges.tsx b/src/platform/plugins/private/vis_default_editor/public/components/controls/date_ranges.tsx index d39706ee76c77..0009802d8d086 100644 --- a/src/platform/plugins/private/vis_default_editor/public/components/controls/date_ranges.tsx +++ b/src/platform/plugins/private/vis_default_editor/public/components/controls/date_ranges.tsx @@ -12,6 +12,7 @@ import { htmlIdGenerator, EuiButtonIcon, EuiButtonEmpty, + EuiToolTip, EuiFieldText, EuiFlexItem, EuiFlexGroup, @@ -181,14 +182,15 @@ function DateRangesParamEditor({ /> - onRemoveRange(id)} - /> + + onRemoveRange(id)} + /> + diff --git a/src/platform/plugins/private/vis_default_editor/public/components/controls/filter.tsx b/src/platform/plugins/private/vis_default_editor/public/components/controls/filter.tsx index 084a01df8c003..5a4b395024553 100644 --- a/src/platform/plugins/private/vis_default_editor/public/components/controls/filter.tsx +++ b/src/platform/plugins/private/vis_default_editor/public/components/controls/filter.tsx @@ -8,7 +8,14 @@ */ import React, { useState } from 'react'; -import { EuiForm, EuiButtonIcon, EuiFieldText, EuiFormRow, EuiSpacer } from '@elastic/eui'; +import { + EuiButtonIcon, + EuiFieldText, + EuiForm, + EuiFormRow, + EuiSpacer, + EuiToolTip, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import type { Query } from '@kbn/es-query'; @@ -66,30 +73,44 @@ function FilterRow({ const FilterControl = (
- setShowCustomLabel(!showCustomLabel)} - /> - onRemoveFilter(id)} - /> + + setShowCustomLabel(!showCustomLabel)} + /> + + + onRemoveFilter(id)} + /> +
); diff --git a/src/platform/plugins/private/vis_default_editor/public/components/controls/ranges.tsx b/src/platform/plugins/private/vis_default_editor/public/components/controls/ranges.tsx index ee8cf024e4b23..3c56644cf2128 100644 --- a/src/platform/plugins/private/vis_default_editor/public/components/controls/ranges.tsx +++ b/src/platform/plugins/private/vis_default_editor/public/components/controls/ranges.tsx @@ -223,14 +223,15 @@ function RangesParamEditor({ /> - onRemoveRange(id)} - /> + + onRemoveRange(id)} + /> + diff --git a/src/platform/plugins/private/vis_default_editor/public/components/sidebar/sidebar.tsx b/src/platform/plugins/private/vis_default_editor/public/components/sidebar/sidebar.tsx index 187aa2d760a6e..2cf09544fc336 100644 --- a/src/platform/plugins/private/vis_default_editor/public/components/sidebar/sidebar.tsx +++ b/src/platform/plugins/private/vis_default_editor/public/components/sidebar/sidebar.tsx @@ -12,13 +12,14 @@ import React, { memo, useMemo, useState, useCallback, useEffect } from 'react'; import { isEqual } from 'lodash'; import { i18n } from '@kbn/i18n'; import { - keys, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, - type UseEuiTheme, + EuiToolTip, euiBreakpoint, euiScrollBarStyles, + keys, + type UseEuiTheme, } from '@elastic/eui'; import type { EventEmitter } from 'events'; @@ -286,18 +287,25 @@ function DefaultEditorSideBarComponent({ - + disableScreenReaderOutput + > + + ); } diff --git a/src/platform/plugins/private/vis_types/vega/public/components/deprecated_interval_info.tsx b/src/platform/plugins/private/vis_types/vega/public/components/deprecated_interval_info.tsx index 97c0493e84d75..72b42fd451256 100644 --- a/src/platform/plugins/private/vis_types/vega/public/components/deprecated_interval_info.tsx +++ b/src/platform/plugins/private/vis_types/vega/public/components/deprecated_interval_info.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import { EuiCallOut, EuiButtonIcon } from '@elastic/eui'; +import { EuiButtonIcon, EuiCallOut, EuiToolTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import { BUCKET_TYPES } from '@kbn/data-plugin/public'; @@ -27,15 +27,23 @@ export const DeprecatedHistogramIntervalInfo = () => ( explicit fields: 'calendar_interval' and 'fixed_interval'. {dateHistogramDoc}" values={{ dateHistogramDoc: ( - + disableScreenReaderOutput + > + + ), }} /> diff --git a/src/platform/plugins/private/vis_types/vega/public/components/vega_actions_menu.tsx b/src/platform/plugins/private/vis_types/vega/public/components/vega_actions_menu.tsx index 5453990427bcc..7c56b11bab377 100644 --- a/src/platform/plugins/private/vis_types/vega/public/components/vega_actions_menu.tsx +++ b/src/platform/plugins/private/vis_types/vega/public/components/vega_actions_menu.tsx @@ -8,7 +8,13 @@ */ import React, { useState, useCallback } from 'react'; -import { EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover } from '@elastic/eui'; +import { + EuiButtonIcon, + EuiContextMenuItem, + EuiContextMenuPanel, + EuiPopover, + EuiToolTip, +} from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; @@ -34,13 +40,20 @@ function VegaActionsMenu({ formatHJson, formatJson }: VegaActionsMenuProps) { const closePopover = useCallback(() => setIsPopoverOpen(false), []); const button = ( - + disableScreenReaderOutput + > + + ); const items = [ diff --git a/src/platform/plugins/private/vis_types/vega/public/components/vega_help_menu.tsx b/src/platform/plugins/private/vis_types/vega/public/components/vega_help_menu.tsx index 55abed7a13fc5..752dc79d1731c 100644 --- a/src/platform/plugins/private/vis_types/vega/public/components/vega_help_menu.tsx +++ b/src/platform/plugins/private/vis_types/vega/public/components/vega_help_menu.tsx @@ -8,7 +8,13 @@ */ import React, { useCallback, useState } from 'react'; -import { EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover } from '@elastic/eui'; +import { + EuiButtonIcon, + EuiContextMenuItem, + EuiContextMenuPanel, + EuiPopover, + EuiToolTip, +} from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; @@ -21,13 +27,20 @@ function VegaHelpMenu() { const closePopover = useCallback(() => setIsPopoverOpen(false), []); const button = ( - + disableScreenReaderOutput + > + + ); const items = [ diff --git a/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx b/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx index 8ab18aa196d44..6f4c6e7f5602c 100644 --- a/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx +++ b/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx @@ -9,7 +9,7 @@ import React, { memo, useMemo } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiButtonIcon, useEuiTheme } from '@elastic/eui'; +import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui'; import type { Position } from '@elastic/charts'; import { css } from '@emotion/react'; @@ -51,26 +51,30 @@ const LegendToggleComponent = ({ onClick, showLegend, legendPosition }: LegendTo ); return ( - + disableScreenReaderOutput + > + + ); }; diff --git a/src/platform/plugins/shared/vis_types/timeseries/public/application/components/last_value_mode_popover.tsx b/src/platform/plugins/shared/vis_types/timeseries/public/application/components/last_value_mode_popover.tsx index 6e424604ca194..88d2e923ace13 100644 --- a/src/platform/plugins/shared/vis_types/timeseries/public/application/components/last_value_mode_popover.tsx +++ b/src/platform/plugins/shared/vis_types/timeseries/public/application/components/last_value_mode_popover.tsx @@ -13,6 +13,7 @@ import { EuiPopover, EuiPopoverTitle, EuiSwitch, + EuiToolTip, useGeneratedHtmlId, } from '@elastic/eui'; import { css } from '@emotion/react'; @@ -39,13 +40,20 @@ export const LastValueModePopover = ({ height: auto; `} button={ - + disableScreenReaderOutput + > + + } isOpen={isPopoverOpen} closePopover={closePopover} diff --git a/src/platform/plugins/shared/vis_types/timeseries/public/application/components/lib/index_pattern_select/field_text_select.tsx b/src/platform/plugins/shared/vis_types/timeseries/public/application/components/lib/index_pattern_select/field_text_select.tsx index 252936bcbd1c1..f1ced1a0bf3c5 100644 --- a/src/platform/plugins/shared/vis_types/timeseries/public/application/components/lib/index_pattern_select/field_text_select.tsx +++ b/src/platform/plugins/shared/vis_types/timeseries/public/application/components/lib/index_pattern_select/field_text_select.tsx @@ -11,7 +11,7 @@ import React, { useCallback, useState, useEffect } from 'react'; import { i18n } from '@kbn/i18n'; import type { EuiFieldTextProps } from '@elastic/eui'; -import { EuiFieldText, EuiButtonIcon } from '@elastic/eui'; +import { EuiButtonIcon, EuiFieldText, EuiToolTip } from '@elastic/eui'; import { SwitchModePopover } from './switch_mode_popover'; import type { SelectIndexComponentProps } from './types'; @@ -48,12 +48,14 @@ export const FieldTextSelect = ({ }, [onIndexChange, inputValue, indexPatternString]); const appends = [ - , + + + , ]; if (allowSwitchMode) { diff --git a/src/platform/plugins/shared/vis_types/timeseries/public/application/components/lib/index_pattern_select/switch_mode_popover.tsx b/src/platform/plugins/shared/vis_types/timeseries/public/application/components/lib/index_pattern_select/switch_mode_popover.tsx index e566a9d84f83d..df59cb401b2fe 100644 --- a/src/platform/plugins/shared/vis_types/timeseries/public/application/components/lib/index_pattern_select/switch_mode_popover.tsx +++ b/src/platform/plugins/shared/vis_types/timeseries/public/application/components/lib/index_pattern_select/switch_mode_popover.tsx @@ -13,12 +13,13 @@ import { FormattedMessage } from '@kbn/i18n-react'; import { EuiButtonIcon, + EuiLink, EuiPopover, EuiPopoverTitle, EuiSpacer, EuiSwitch, EuiText, - EuiLink, + EuiToolTip, useGeneratedHtmlId, } from '@elastic/eui'; @@ -78,17 +79,27 @@ export const SwitchModePopover = ({ onModeChange, useKibanaIndices }: PopoverPro + disableScreenReaderOutput + > + + } isOpen={isPopoverOpen} closePopover={closePopover} diff --git a/x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/convert_to_esql_modal.tsx b/x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/convert_to_esql_modal.tsx index 558ac0c9448da..001511f2ce496 100644 --- a/x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/convert_to_esql_modal.tsx +++ b/x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/convert_to_esql_modal.tsx @@ -25,6 +25,7 @@ import { EuiScreenReaderOnly, EuiSpacer, EuiText, + EuiToolTip, useEuiTheme, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -128,9 +129,8 @@ export const ConvertToEsqlModal: React.FunctionComponent<{ const isExpanded = Boolean(itemIdToExpandedRowMap[layer.id]); return ( - toggleDetails(layer)} - aria-label={ + + disableScreenReaderOutput + > + toggleDetails(layer)} + aria-label={ + isExpanded + ? i18n.translate('xpack.lens.config.collapseAriaLabel', { + defaultMessage: 'Collapse', + }) + : i18n.translate('xpack.lens.config.expandAriaLabel', { + defaultMessage: 'Expand', + }) + } + iconType={isExpanded ? 'chevronSingleDown' : 'chevronSingleRight'} + disabled={!layer.isConvertibleToEsql} + /> + ); }, }, diff --git a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx index 9c121a9084bab..f5795fb757018 100644 --- a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx +++ b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx @@ -110,17 +110,24 @@ const InContextMenuActions = (props: LayerActionsProps) => { })} id={splitButtonPopoverId} button={ - + disableScreenReaderOutput + > + + } ownFocus={true} isOpen={isPopoverOpen} @@ -203,7 +210,6 @@ export const LayerActions = (props: LayerActionsProps) => { color={outsideListAction.color ?? 'text'} data-test-subj={outsideListAction['data-test-subj']} aria-label={outsideListAction.displayName} - title={outsideListAction.displayName} disabled={outsideListAction.disabled} onClick={() => outsideListAction.execute?.(props.mountingPoint)} /> diff --git a/x-pack/platform/plugins/shared/lens/public/shared_components/flyout_container.tsx b/x-pack/platform/plugins/shared/lens/public/shared_components/flyout_container.tsx index 0d6788299910c..a75e79ec43826 100644 --- a/x-pack/platform/plugins/shared/lens/public/shared_components/flyout_container.tsx +++ b/x-pack/platform/plugins/shared/lens/public/shared_components/flyout_container.tsx @@ -9,16 +9,17 @@ import React, { useState, useEffect, useCallback } from 'react'; import type { Interpolation, Theme } from '@emotion/react'; import { css } from '@emotion/react'; import { - EuiFlyoutHeader, - EuiFlyoutFooter, - EuiTitle, - EuiButtonIcon, EuiButtonEmpty, + EuiButtonIcon, EuiFlexGroup, EuiFlexItem, + EuiFlyoutFooter, + EuiFlyoutHeader, EuiFocusTrap, - type UseEuiTheme, + EuiTitle, + EuiToolTip, euiBreakpoint, + type UseEuiTheme, useEuiTheme, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -130,16 +131,26 @@ export function FlyoutContainer({ {isInlineEditing && ( - + disableScreenReaderOutput + > + + )} @@ -150,16 +161,26 @@ export function FlyoutContainer({ {!isInlineEditing && ( - + disableScreenReaderOutput + > + + )} diff --git a/x-pack/platform/plugins/shared/lens/public/shared_components/setting_with_sibling_flyout.tsx b/x-pack/platform/plugins/shared/lens/public/shared_components/setting_with_sibling_flyout.tsx index acf64b9cda9f1..d56277ca9f999 100644 --- a/x-pack/platform/plugins/shared/lens/public/shared_components/setting_with_sibling_flyout.tsx +++ b/x-pack/platform/plugins/shared/lens/public/shared_components/setting_with_sibling_flyout.tsx @@ -9,16 +9,17 @@ import { i18n } from '@kbn/i18n'; import type { MutableRefObject } from 'react'; import React, { useState, useEffect } from 'react'; import { - EuiFlyoutHeader, - EuiFlyoutFooter, - EuiTitle, - EuiButtonIcon, EuiButtonEmpty, + EuiButtonIcon, EuiFlexGroup, EuiFlexItem, + EuiFlyoutFooter, + EuiFlyoutHeader, EuiFocusTrap, EuiOutsideClickDetector, EuiPortal, + EuiTitle, + EuiToolTip, type UseEuiTheme, useEuiTheme, } from '@elastic/eui'; @@ -89,16 +90,23 @@ export function SettingWithSiblingFlyout({ > - + disableScreenReaderOutput + > + + diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/table_basic.tsx b/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/table_basic.tsx index 644fe7d4da10f..682e6006e9be0 100644 --- a/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/table_basic.tsx +++ b/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/table_basic.tsx @@ -25,7 +25,7 @@ import type { EuiDataGridSorting, EuiDataGridStyle, } from '@elastic/eui'; -import { EuiButtonIcon, EuiDataGrid, useEuiTheme } from '@elastic/eui'; +import { EuiButtonIcon, EuiDataGrid, EuiToolTip, useEuiTheme } from '@elastic/eui'; import type { CustomPaletteState } from '@kbn/charts-plugin/public'; import { EmptyPlaceholder } from '@kbn/charts-plugin/public'; import type { ClickTriggerEvent } from '@kbn/charts-plugin/public'; @@ -379,24 +379,31 @@ export const DatatableComponent = (props: DatatableRenderProps) => { rowCellRender: function RowCellRender({ rowIndex }) { const { rowHasRowClickTriggerActions } = useContext(DataContext); return ( - { - onRowContextMenuClick({ - rowIndex, - table: firstTableRef.current, - columns: columnConfig.columns.map((col) => col.columnId), - }); - }} - /> + disableScreenReaderOutput + > + { + onRowContextMenuClick({ + rowIndex, + table: firstTableRef.current, + columns: columnConfig.columns.map((col) => col.columnId), + }); + }} + /> + ); }, }, From 6453666329ee17e759fc8852ca44d4738491c5d8 Mon Sep 17 00:00:00 2001 From: Weronika Olejniczak Date: Wed, 27 May 2026 17:32:28 +0200 Subject: [PATCH 2/6] chore(kibana-visualizations): update snapshots --- .../__snapshots__/number_row.test.tsx.snap | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/platform/plugins/private/vis_default_editor/public/components/controls/components/number_list/__snapshots__/number_row.test.tsx.snap b/src/platform/plugins/private/vis_default_editor/public/components/controls/components/number_list/__snapshots__/number_row.test.tsx.snap index 6b2f160e417a0..80ff63bcf8ab8 100644 --- a/src/platform/plugins/private/vis_default_editor/public/components/controls/components/number_list/__snapshots__/number_row.test.tsx.snap +++ b/src/platform/plugins/private/vis_default_editor/public/components/controls/components/number_list/__snapshots__/number_row.test.tsx.snap @@ -24,14 +24,18 @@ exports[`NumberRow should be rendered with default set of props 1`] = ` - + + + `; From 7952a0e7f6fce78b241acec961ebe5489eead9f5 Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Thu, 28 May 2026 13:39:18 +0300 Subject: [PATCH 3/6] fix jest --- .../app_plugin/shared/edit_on_the_fly/layer_tabs.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/layer_tabs.test.tsx b/x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/layer_tabs.test.tsx index b68a4e188de87..e02430689d29e 100644 --- a/x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/layer_tabs.test.tsx +++ b/x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/layer_tabs.test.tsx @@ -462,7 +462,7 @@ describe('LayerTabs', () => { expect(instance.find('[data-test-subj="lnsLayerActionsMenu"]').exists()).toBe(true); // The delete action should exist - expect(instance.find('button[title="Delete layer"]').exists()).toBe(true); + expect(instance.find('button[aria-label="Delete layer"]').exists()).toBe(true); }); it('should call the remove callback when deleting layer', async () => { @@ -506,7 +506,7 @@ describe('LayerTabs', () => { // Click the delete layer button act(() => { - instance.find('button[title="Delete layer"]').first().simulate('click'); + instance.find('button[aria-label="Delete layer"]').first().simulate('click'); }); instance.update(); From 32aa6123e390738e446dff193314951675eaf162 Mon Sep 17 00:00:00 2001 From: Weronika Olejniczak Date: Fri, 29 May 2026 11:48:51 +0200 Subject: [PATCH 4/6] fix(charts): keep LegendToggle unwrapped to preserve absolute positioning --- .../static/components/legend_toggle.tsx | 39 ++++++++----------- 1 file changed, 16 insertions(+), 23 deletions(-) diff --git a/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx b/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx index 6f4c6e7f5602c..d6ec41344b955 100644 --- a/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx +++ b/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx @@ -9,7 +9,7 @@ import React, { memo, useMemo } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui'; +import { EuiButtonIcon, useEuiTheme } from '@elastic/eui'; import type { Position } from '@elastic/charts'; import { css } from '@emotion/react'; @@ -51,30 +51,23 @@ const LegendToggleComponent = ({ onClick, showLegend, legendPosition }: LegendTo ); return ( - - - + aria-expanded={showLegend} + isSelected={showLegend} + data-test-subj="vislibToggleLegend" + /> ); }; From d252ac6f0b2313511731c40009828ddb029626f6 Mon Sep 17 00:00:00 2001 From: Weronika Olejniczak Date: Fri, 29 May 2026 12:09:39 +0200 Subject: [PATCH 5/6] fix(charts): disable tooltip-button-icon-wrap on LegendToggle overlay --- .../shared/charts/public/static/components/legend_toggle.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx b/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx index d6ec41344b955..6fd936af23be0 100644 --- a/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx +++ b/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx @@ -51,6 +51,7 @@ const LegendToggleComponent = ({ onClick, showLegend, legendPosition }: LegendTo ); return ( + // eslint-disable-next-line @elastic/eui/tooltip-button-icon-wrap -- absolute-positioned chart overlay; EuiToolTip wrapper alters snapshot rendering Date: Fri, 29 May 2026 13:00:51 +0200 Subject: [PATCH 6/6] fix(charts): restore title attribute on LegendToggle button --- .../shared/charts/public/static/components/legend_toggle.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx b/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx index 6fd936af23be0..404049af5033d 100644 --- a/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx +++ b/src/platform/plugins/shared/charts/public/static/components/legend_toggle.tsx @@ -68,6 +68,9 @@ const LegendToggleComponent = ({ onClick, showLegend, legendPosition }: LegendTo aria-expanded={showLegend} isSelected={showLegend} data-test-subj="vislibToggleLegend" + title={i18n.translate('charts.legend.toggleLegendButtonTitle', { + defaultMessage: 'Toggle legend', + })} /> ); };