[9.2] Fix violations of the @elastic/eui/tooltip-focusable-anchor ESLint rule (#236721)

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

@@ -71,7 +71,7 @@ export const Source: React.FC<SourceProps> = ({ node, index }) => {
           label={
             comment ? (
               <EuiToolTip content={comment}>
-                <span>
+                <span tabIndex={0}>
                   Source {index} <EuiIcon type="editorComment" color="subdued" />
                 </span>
               </EuiToolTip>

src/platform/packages/private/kbn-index-editor/src/components/file_clashes.tsx

@@ -120,15 +120,15 @@ export const FileClashIcon: FC<Props> = ({ fileClash }) => {
     case CLASH_ERROR_TYPE.ERROR:
       return (
         <EuiToolTip content={getClashText(fileClash)}>
-          <EuiBadge color={euiTheme.colors.backgroundBaseDanger}>
+          <EuiBadge tabIndex={0} color={euiTheme.colors.backgroundBaseDanger}>
             <EuiIcon type="alert" color="danger" size="m" />
           </EuiBadge>
         </EuiToolTip>
       );
     case CLASH_ERROR_TYPE.WARNING:
       return (
         <EuiToolTip content={getClashText(fileClash)}>
-          <EuiBadge color={euiTheme.colors.backgroundBaseWarning}>
+          <EuiBadge tabIndex={0} color={euiTheme.colors.backgroundBaseWarning}>
             <EuiIcon type="warning" color="warning" size="m" />
           </EuiBadge>
         </EuiToolTip>

src/platform/packages/private/kbn-index-editor/src/components/flyout_content.tsx

@@ -112,6 +112,7 @@ export const FlyoutContent: FC<FlyoutContentProps> = ({ deps, props }) => {
                   })}
                 >
                   <EuiBetaBadge
+                    tabIndex={0}
                     label=""
                     iconType="beaker"
                     size="s"

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

@@ -29,7 +29,7 @@ export const UpdatedAtField: FC<{ dateTime?: string; DateFormatterComp?: DateFor
           defaultMessage: 'Last updated unknown',
         })}
       >
-        <span>-</span>
+        <span tabIndex={0}>-</span>
       </EuiToolTip>
     );
   }
@@ -40,15 +40,15 @@ export const UpdatedAtField: FC<{ dateTime?: string; DateFormatterComp?: DateFor
       <DateFormatterComp value={new Date(dateTime).getTime()}>
         {(formattedDate: string) => (
           <EuiToolTip content={updatedAt.format('LL LT')}>
-            <span>{formattedDate}</span>
+            <span tabIndex={0}>{formattedDate}</span>
           </EuiToolTip>
         )}
       </DateFormatterComp>
     );
   }
   return (
     <EuiToolTip content={updatedAt.format('LL LT')}>
-      <span>{updatedAt.format('ll')}</span>
+      <span tabIndex={0}>{updatedAt.format('ll')}</span>
     </EuiToolTip>
   );
 };

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

@@ -44,7 +44,7 @@ export function PercentOfParent({ duration, totalDuration, parentType }: Percent
             },
           })}
         >
-          <>{percentOfParentText}</>
+          <span tabIndex={0}>{percentOfParentText}</span>
         </EuiToolTip>
       ) : (
         percentOfParentText

src/platform/packages/shared/kbn-apm-ui-shared/src/components/span_icon/span_icon.stories.tsx

@@ -34,7 +34,13 @@ export const List: StoryFn = () => {
                 icon={
                   <p>
                     <EuiToolTip position="top" content="Icon rendered with `EuiImage`">
-                      <EuiImage size="s" hasShadow alt={id} src={getSpanIcon(type, subtype)} />
+                      <EuiImage
+                        size="s"
+                        hasShadow
+                        alt={id}
+                        src={getSpanIcon(type, subtype)}
+                        tabIndex={0}
+                      />
                     </EuiToolTip>
                   </p>
                 }

src/platform/packages/shared/kbn-apm-ui-shared/src/components/timestamp/index.tsx

@@ -37,7 +37,7 @@ export function Timestamp({
     </EuiText>
   ) : (
     <EuiToolTip content={absoluteTime} data-test-subj="apmUiSharedTimestampTooltip">
-      <>{relativeTime}</>
+      <span tabIndex={0}>{relativeTime}</span>
     </EuiToolTip>
   );
 }

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

@@ -35,6 +35,7 @@ export const List: StoryFn = () => {
                       hasShadow
                       alt={agentName}
                       src={getAgentIcon(agentName, false)}
+                      tabIndex={0}
                     />
                   </EuiToolTip>
                 }

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

@@ -99,6 +99,7 @@ const GroupStatsComponent = <T,>({
                 component: (
                   <EuiToolTip position="top" content={stat.badge.value}>
                     <EuiBadge
+                      tabIndex={0}
                       style={{ marginLeft: 10, width: stat.badge.width ?? 35 }}
                       color={stat.badge.color ?? 'hollow'}
                     >

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

@@ -90,6 +90,7 @@ export function FieldName({
               )}
             >
               <EuiBadge
+                tabIndex={0}
                 title=""
                 className="kbnDocViewer__fieldName_multiFieldBadge"
                 color="default"

src/platform/packages/shared/kbn-unified-field-list/src/components/field_stats/field_top_values_bucket.tsx

@@ -118,7 +118,12 @@ const FieldTopValuesBucket: React.FC<FieldTopValuesBucketProps> = ({
                 })}
                 delay="long"
               >
-                <EuiText size="xs" textAlign="left" color={getPercentageColor(euiTheme, color)}>
+                <EuiText
+                  tabIndex={0}
+                  size="xs"
+                  textAlign="left"
+                  color={getPercentageColor(euiTheme, color)}
+                >
                   {formattedPercentage}
                 </EuiText>
               </EuiToolTip>

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

@@ -140,7 +140,7 @@ const getDefaultFieldTableColumns = ({ highlight }: { highlight: string }): Fiel
           <EuiScreenReaderOnly data-test-subj="descriptionForScreenReaderOnly">
             <p>{i18n.DESCRIPTION_FOR_FIELD(name)}</p>
           </EuiScreenReaderOnly>
-          <span css={styles.truncatable}>
+          <span css={styles.truncatable} tabIndex={0}>
             <span css={styles.description} data-test-subj={`field-${name}-description`}>
               {`${description ?? getEmptyValue()} ${getExampleText(example)}`}
             </span>

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

@@ -46,6 +46,7 @@ export const AlertLifecycleStatusCell: CellComponent = memo((props) => {
           >
             <EuiBadge
               iconType="bellSlash"
+              tabIndex={0}
               css={css`
                 padding-inline: ${euiTheme.size.xs};
               `}

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

@@ -79,7 +79,7 @@ export const LastUpdatedAt = React.memo<LastUpdatedAtProps>(
           `,
         }}
       >
-        <EuiText color="subdued" size="xs" data-test-subj="toolbar-updated-at">
+        <EuiText color="subdued" size="xs" data-test-subj="toolbar-updated-at" tabIndex={0}>
           {updateText}
         </EuiText>
       </EuiToolTip>

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

@@ -37,7 +37,7 @@ export const MaintenanceWindowBaseCell = memo((props: MaintenanceWindowBaseCellP
             key={`${mw.id}_tooltip`}
             content={<TooltipContent maintenanceWindow={mw} timestamp={timestamp} />}
           >
-            <span key={`${mw.id}_title`}>
+            <span key={`${mw.id}_title`} tabIndex={0}>
               {mw.title}
               {index !== totalLength - 1 && <>, &nbsp;</>}
             </span>

src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx

@@ -617,7 +617,7 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => {
                 : RUN_WHEN_GROUP_TITLE(selectedActionGroup!.name.toLocaleLowerCase())
             }
           >
-            <EuiBadge iconType="clock" />
+            <EuiBadge tabIndex={0} iconType="clock" />
           </EuiToolTip>
         </EuiFlexItem>
       );
@@ -635,7 +635,12 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => {
       return (
         <EuiFlexItem grow={false}>
           <EuiToolTip content={ACTION_WARNING_TITLE}>
-            <EuiBadge data-test-subj="warning-badge" iconType="warning" color="warning" />
+            <EuiBadge
+              tabIndex={0}
+              data-test-subj="warning-badge"
+              iconType="warning"
+              color="warning"
+            />
           </EuiToolTip>
         </EuiFlexItem>
       );

src/platform/packages/shared/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx

@@ -318,7 +318,12 @@ export const RuleActionsSystemActionsItem = (props: RuleActionsSystemActionsItem
               {warning && !isOpen && (
                 <EuiFlexItem grow={false}>
                   <EuiToolTip content={ACTION_WARNING_TITLE}>
-                    <EuiBadge data-test-subj="warning-badge" iconType="warning" color="warning" />
+                    <EuiBadge
+                      tabIndex={0}
+                      data-test-subj="warning-badge"
+                      iconType="warning"
+                      color="warning"
+                    />
                   </EuiToolTip>
                 </EuiFlexItem>
               )}

src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_title.tsx

@@ -109,6 +109,7 @@ export const PresentationPanelTitle = ({
             column-gap: ${euiTheme.size.xs};
             align-items: center;
           `}
+          tabIndex={0}
         >
           {!hideTitle ? (
             <h2

src/platform/plugins/private/vis_default_editor/public/components/controls/ranges.tsx

@@ -195,7 +195,9 @@ function RangesParamEditor({
                     isInvalid={!isFromValid}
                     prepend={
                       <EuiToolTip content={gteTooltipContent}>
-                        <EuiText size="s">{gtePrependLabel}</EuiText>
+                        <EuiText size="s" tabIndex={0}>
+                          {gtePrependLabel}
+                        </EuiText>
                       </EuiToolTip>
                     }
                   />
@@ -217,7 +219,9 @@ function RangesParamEditor({
                     isInvalid={!isToValid}
                     prepend={
                       <EuiToolTip content={ltTooltipContent}>
-                        <EuiText size="s">{ltPrependLabel}</EuiText>
+                        <EuiText size="s" tabIndex={0}>
+                          {ltPrependLabel}
+                        </EuiText>
                       </EuiToolTip>
                     }
                   />

src/platform/plugins/shared/console/public/application/components/network_request_status_bar/network_request_status_bar.tsx

@@ -85,6 +85,7 @@ export const NetworkRequestStatusBar: FunctionComponent<Props> = ({
             <EuiBadge
               data-test-subj="consoleResponseStatusBadge"
               color={mapStatusCodeToBadgeColor(statusCode)}
+              tabIndex={0}
             >
               {/*  Use &nbsp; to ensure that no matter the width we don't allow line breaks */}
               {statusCode}&nbsp;-&nbsp;{statusText}
@@ -102,7 +103,7 @@ export const NetworkRequestStatusBar: FunctionComponent<Props> = ({
               </EuiText>
             }
           >
-            <EuiText size="s">
+            <EuiText size="s" tabIndex={0}>
               <EuiBadge color="default">
                 {timeElapsedMs}&nbsp;{'ms'}
               </EuiBadge>

src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestion_badge.tsx

@@ -23,6 +23,7 @@ export const OptionsListPopoverSuggestionBadge = ({ documentCount }: { documentC
         position={'right'}
       >
         <EuiText
+          tabIndex={0}
           size="xs"
           aria-hidden={true}
           className="eui-textNumber"

src/platform/plugins/shared/data/public/search/session/sessions_mgmt/components/table/columns/get_columns.tsx

@@ -144,7 +144,7 @@ export const getColumns = ({
 
           return (
             <EuiToolTip content={toolTipContent}>
-              <EuiBadge color="warning" data-test-subj="sessionManagementStatusCol">
+              <EuiBadge tabIndex={0} color="warning" data-test-subj="sessionManagementStatusCol">
                 {statusContent}
               </EuiBadge>
             </EuiToolTip>

src/platform/plugins/shared/data_view_management/public/components/edit_index_pattern/indexed_fields_table/components/table/table.tsx

@@ -273,7 +273,7 @@ export const renderFieldName = (field: IndexedFieldItem, timeFieldName?: string)
     {field.customLabel && field.customLabel !== field.name ? (
       <div>
         <EuiToolTip content={labelDescription}>
-          <EuiBadge iconType="flag" iconSide="left">
+          <EuiBadge iconType="flag" iconSide="left" tabIndex={0}>
             {field.customLabel}
           </EuiBadge>
         </EuiToolTip>

src/platform/plugins/shared/dev_tools/public/application.tsx

@@ -121,7 +121,7 @@ function DevToolsWrapper({
             }}
           >
             <EuiToolTip content={currentDevTool.tooltipContent}>
-              <span>
+              <span tabIndex={0}>
                 {currentDevTool.title}{' '}
                 {currentDevTool.isBeta && (
                   <EuiBetaBadge

src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/shared_form_components.tsx

@@ -219,6 +219,7 @@ export function VariableName({
           data-test-subj="esqlVariableName"
           fullWidth
           compressed
+          tabIndex={0}
         />
       </EuiToolTip>
     </EuiFormRow>
@@ -353,6 +354,7 @@ export function Header({
               label=""
               iconType="beaker"
               size="s"
+              tabIndex={0}
               css={css`
                 vertical-align: middle;
               `}

src/platform/plugins/shared/inspector/public/views/requests/components/request_selector.tsx

@@ -116,6 +116,7 @@ export class RequestSelector extends Component<RequestSelectorProps> {
             >
               <EuiBadge
                 data-test-subj="inspectorRequestTotalTime"
+                tabIndex={0}
                 color={selectedRequest.status === RequestStatus.OK ? 'success' : 'danger'}
                 iconType={selectedRequest.status === RequestStatus.OK ? 'check' : 'cross'}
               >

src/platform/plugins/shared/saved_objects_management/public/management_section/objects_table/components/table.tsx

@@ -149,7 +149,7 @@ export class Table extends PureComponent<TableProps, TableState> {
               }
             )}
           >
-            <span>-</span>
+            <span tabIndex={0}>-</span>
           </EuiToolTip>
         );
       }
@@ -158,15 +158,15 @@ export class Table extends PureComponent<TableProps, TableState> {
       if (updatedAt.diff(moment(), 'days') > -7) {
         return (
           <EuiToolTip content={updatedAt.format('LL LT')}>
-            <span>
+            <span tabIndex={0}>
               <FormattedRelative value={new Date(dateTime).getTime()} />
             </span>
           </EuiToolTip>
         );
       }
       return (
         <EuiToolTip content={updatedAt.format('LL LT')}>
-          <span>{updatedAt.format('LL')}</span>
+          <span tabIndex={0}>{updatedAt.format('LL')}</span>
         </EuiToolTip>
       );
     };

src/platform/plugins/shared/unified_search/public/filter_bar/filter_view/index.tsx

@@ -109,7 +109,7 @@ export const FilterView: FC<Props> = ({
 
   return readOnly ? (
     <EuiToolTip position="bottom" content={title}>
-      <span ref={ref}>
+      <span ref={ref} tabIndex={0}>
         <FilterPill />
       </span>
     </EuiToolTip>

src/platform/plugins/shared/workflows_management/public/components/workflows_empty_state/workflows_empty_state.tsx

@@ -74,6 +74,7 @@ export function WorkflowsEmptyState({
               }
             >
               <EuiBetaBadge
+                tabIndex={0}
                 label={
                   <FormattedMessage
                     id="workflows.emptyState.technicalPreviewBadge"

x-pack/examples/testing_embedded_lens/public/controls.tsx

@@ -144,7 +144,7 @@ export function OverrideSwitch({
           content={<CodeExample propName="overrides" code={JSON.stringify(override, null, 2)} />}
           position="right"
         >
-          <span>
+          <span tabIndex={0}>
             {rowLabel} <EuiIcon type="question" color="subdued" />
           </span>
         </EuiToolTip>
@@ -584,7 +584,7 @@ export function PanelMenu({
               }
               position="right"
             >
-              <span>
+              <span tabIndex={0}>
                 Show custom action <EuiIcon type="question" color="subdued" />
               </span>
             </EuiToolTip>

x-pack/platform/packages/private/ml/aiops_components/src/document_count_chart/brush_badge.tsx

@@ -66,7 +66,9 @@ export const BrushBadge: FC<BrushBadgeProps> = ({
         }
         position="top"
       >
-        <EuiBadge css={{ width, textAlign: 'center' }}>{label}</EuiBadge>
+        <EuiBadge tabIndex={0} css={{ width, textAlign: 'center' }}>
+          {label}
+        </EuiBadge>
       </EuiToolTip>
     </div>
   );

x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx

@@ -52,7 +52,7 @@ export const getOptionFromPrompt = ({
 
       {/* Empty content tooltip gets around :hover styles from SuperSelectOptionButton */}
       <EuiToolTip content={undefined}>
-        <EuiText color="subdued" data-test-subj="content" size="s">
+        <EuiText tabIndex={0} color="subdued" data-test-subj="content" size="s">
           {isEmpty(content) ? <p>{EMPTY_PROMPT}</p> : <p>{content}</p>}
         </EuiText>
       </EuiToolTip>