[9.1] [ML] Anomalies Table: Restore focus to row actions menu (elastic#230918) (elastic#231567)

# Backport

This will backport the following commits from `main` to `9.1`:
- [[ML] Anomalies Table: Restore focus to row actions menu
(elastic#230918)](elastic#230918)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Robert
Jaszczurek","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-08-13T08:01:15Z","message":"[ML]
Anomalies Table: Restore focus to row actions menu (elastic#230918)\n\nResolves
https://github.com/elastic/kibana/issues/195016\n\nAfter the
fix:\n\n\nhttps://github.com/user-attachments/assets/4b48b43c-9784-4475-84cb-146105e25f2c","sha":"1a227c46ad55657198a9db08819b66ddc938a9c5","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility",":ml","release_note:skip","Team:ML","backport:version","v9.2.0","v9.1.1"],"title":"[ML]
Anomalies Table: Restore focus to row actions
menu","number":230918,"url":"https://github.com/elastic/kibana/pull/230918","mergeCommit":{"message":"[ML]
Anomalies Table: Restore focus to row actions menu (elastic#230918)\n\nResolves
https://github.com/elastic/kibana/issues/195016\n\nAfter the
fix:\n\n\nhttps://github.com/user-attachments/assets/4b48b43c-9784-4475-84cb-146105e25f2c","sha":"1a227c46ad55657198a9db08819b66ddc938a9c5"}},"sourceBranch":"main","suggestedTargetBranches":["9.1"],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/230918","number":230918,"mergeCommit":{"message":"[ML]
Anomalies Table: Restore focus to row actions menu (elastic#230918)\n\nResolves
https://github.com/elastic/kibana/issues/195016\n\nAfter the
fix:\n\n\nhttps://github.com/user-attachments/assets/4b48b43c-9784-4475-84cb-146105e25f2c","sha":"1a227c46ad55657198a9db08819b66ddc938a9c5"}},{"branch":"9.1","label":"v9.1.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Robert Jaszczurek <[email protected]>

Author: kibanamachine

x-pack/platform/packages/private/ml/ui_actions/src/aiops/ui_actions.ts

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import type { EuiFlyoutProps } from '@elastic/eui';
 import type { DataView, DataViewField } from '@kbn/data-views-plugin/common';
 import { i18n } from '@kbn/i18n';
 import type { Trigger } from '@kbn/ui-actions-plugin/public';
@@ -18,6 +19,7 @@ export interface CategorizeFieldContext {
     to: number;
     field?: { name: string; value: string };
   };
+  focusTrapProps?: EuiFlyoutProps['focusTrapProps'];
 }
 
 export const ACTION_CATEGORIZE_FIELD = 'ACTION_CATEGORIZE_FIELD';

x-pack/platform/plugins/shared/aiops/public/components/log_categorization/categorize_field_actions.ts

@@ -23,8 +23,16 @@ export const createCategorizeFieldAction = (coreStart: CoreStart, plugins: Aiops
       return field.esTypes?.includes('text') === true;
     },
     execute: async (context: CategorizeFieldContext) => {
-      const { field, dataView, originatingApp, additionalFilter } = context;
+      const { field, dataView, originatingApp, additionalFilter, focusTrapProps } = context;
       const { showCategorizeFlyout } = await import('./show_flyout');
-      showCategorizeFlyout(field, dataView, coreStart, plugins, originatingApp, additionalFilter);
+      showCategorizeFlyout(
+        field,
+        dataView,
+        coreStart,
+        plugins,
+        originatingApp,
+        additionalFilter,
+        focusTrapProps
+      );
     },
   });

x-pack/platform/plugins/shared/aiops/public/components/log_categorization/show_flyout.tsx

@@ -19,6 +19,7 @@ import { UI_SETTINGS } from '@kbn/data-plugin/public';
 import { DatePickerContextProvider, type DatePickerDependencies } from '@kbn/ml-date-picker';
 import { StorageContextProvider } from '@kbn/ml-local-storage';
 import type { CategorizationAdditionalFilter } from '@kbn/aiops-log-pattern-analysis/create_category_request';
+import type { EuiFlyoutProps } from '@elastic/eui';
 import type { AiopsPluginStartDeps } from '../../types';
 import { LogCategorizationFlyout } from './log_categorization_for_flyout';
 import { AiopsAppContext, type AiopsAppContextValue } from '../../hooks/use_aiops_app_context';
@@ -32,7 +33,8 @@ export async function showCategorizeFlyout(
   coreStart: CoreStart,
   plugins: AiopsPluginStartDeps,
   originatingApp: string,
-  additionalFilter?: CategorizationAdditionalFilter
+  additionalFilter?: CategorizationAdditionalFilter,
+  focusTrapProps?: EuiFlyoutProps['focusTrapProps']
 ): Promise<void> {
   const { overlays, application, i18n } = coreStart;
 
@@ -91,6 +93,7 @@ export async function showCategorizeFlyout(
           closeButtonProps: { 'aria-label': 'aiopsCategorizeFlyout' },
           onClose: onFlyoutClose,
           size: 'l',
+          focusTrapProps,
         }
       );
 

x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomalies_table.tsx

@@ -26,6 +26,7 @@ import { AnomalyDetails } from './anomaly_details';
 import { mlTableService } from '../../services/table_service';
 import { getColumns } from './anomalies_table_columns';
 import { RuleEditorFlyout } from '../rule_editor';
+import type { FocusTrapProps } from '../../util/create_focus_trap_props';
 
 interface AnomaliesTableProps {
   bounds?: TimeRangeBounds;
@@ -75,7 +76,7 @@ export const AnomaliesTable: FC<AnomaliesTableProps> = React.memo(
     }, [tableData]);
 
     const [showRuleEditorFlyout, setShowRuleEditorFlyout] = useState<
-      ((anomaly: MlAnomaliesTableRecordExtended) => void) | null
+      ((anomaly: MlAnomaliesTableRecordExtended, focusTrapProps: FocusTrapProps) => void) | null
     >(null);
 
     const {

x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/links_menu.tsx

@@ -63,6 +63,8 @@ import { useMlApi, useMlKibana } from '../../contexts/kibana';
 import { useMlIndexUtils } from '../../util/index_service';
 
 import { getQueryStringForInfluencers } from './get_query_string_for_influencers';
+import type { FocusTrapProps } from '../../util/create_focus_trap_props';
+import { createFocusTrapProps } from '../../util/create_focus_trap_props';
 
 const LOG_RATE_ANALYSIS_MARGIN_FACTOR = 20;
 const LOG_RATE_ANALYSIS_BASELINE_FACTOR = 15;
@@ -74,7 +76,7 @@ interface LinksMenuProps {
   showViewSeriesLink: boolean;
   isAggregatedData: boolean;
   interval: 'day' | 'hour' | 'second';
-  showRuleEditorFlyout: (anomaly: MlAnomaliesTableRecord) => void;
+  showRuleEditorFlyout: (anomaly: MlAnomaliesTableRecord, focusTrapProps: FocusTrapProps) => void;
   onItemClick: () => void;
   sourceIndicesWithGeoFields: SourceIndicesWithGeoFields;
   selectedJob?: MlJob;
@@ -99,6 +101,12 @@ export const LinksMenuUI = (props: LinksMenuProps) => {
   const isCategorizationAnomalyRecord = isCategorizationAnomaly(props.anomaly);
 
   const closePopover = props.onItemClick;
+  const focusTrapProps = useMemo(() => {
+    const triggerElement = document.getElementById(
+      `mlAnomaliesListRowActionsButton-${props.anomaly.rowId}`
+    );
+    return createFocusTrapProps(triggerElement);
+  }, [props.anomaly.rowId]);
 
   const kibana = useMlKibana();
   const {
@@ -917,7 +925,7 @@ export const LinksMenuUI = (props: LinksMenuProps) => {
           icon="controlsHorizontal"
           onClick={() => {
             closePopover();
-            props.showRuleEditorFlyout(anomaly);
+            props.showRuleEditorFlyout(anomaly, focusTrapProps);
           }}
           data-test-subj="mlAnomaliesListRowActionConfigureRulesButton"
         >
@@ -969,6 +977,7 @@ export const LinksMenuUI = (props: LinksMenuProps) => {
                     }
                   : {}),
               },
+              focusTrapProps,
             });
           }}
           data-test-subj="mlAnomaliesListRowActionPatternAnalysisButton"
@@ -1017,6 +1026,7 @@ export const LinksMenu: FC<Omit<LinksMenuProps, 'onItemClick'>> = (props) => {
         values: { time: formatHumanReadableDateTimeSeconds(props.anomaly.time) },
       })}
       data-test-subj="mlAnomaliesListRowActionsButton"
+      id={`mlAnomaliesListRowActionsButton-${props.anomaly.rowId}`}
     />
   );
 

x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/rule_editor_flyout.js

@@ -76,6 +76,7 @@ class RuleEditorFlyoutUI extends Component {
       isScopeEnabled: false,
       filterListIds: [],
       isFlyoutVisible: false,
+      focusTrapProps: {},
     };
 
     this.partitioningFieldNames = [];
@@ -101,7 +102,7 @@ class RuleEditorFlyoutUI extends Component {
     }
   }
 
-  showFlyout = (anomaly) => {
+  showFlyout = (anomaly, focusTrapProps) => {
     let ruleIndex = -1;
     const job = this.props.selectedJob ?? this.mlJobService.getJob(anomaly.jobId);
     if (job === undefined) {
@@ -147,6 +148,7 @@ class RuleEditorFlyoutUI extends Component {
       isConditionsEnabled,
       isScopeEnabled: false,
       isFlyoutVisible: true,
+      focusTrapProps,
     });
 
     if (this.partitioningFieldNames.length > 0 && this.canGetFilters) {
@@ -499,6 +501,7 @@ class RuleEditorFlyoutUI extends Component {
       filterListIds,
       isConditionsEnabled,
       isScopeEnabled,
+      focusTrapProps,
     } = this.state;
 
     if (isFlyoutVisible === false) {
@@ -509,7 +512,11 @@ class RuleEditorFlyoutUI extends Component {
 
     if (ruleIndex === -1) {
       flyout = (
-        <EuiFlyout onClose={this.closeFlyout} aria-labelledby="flyoutTitle">
+        <EuiFlyout
+          onClose={this.closeFlyout}
+          aria-labelledby="flyoutTitle"
+          focusTrapProps={focusTrapProps}
+        >
           <EuiFlyoutHeader hasBorder={true}>
             <EuiTitle size="m">
               <h1 id="flyoutTitle">
@@ -569,6 +576,7 @@ class RuleEditorFlyoutUI extends Component {
           data-test-subj="mlRuleEditorFlyout"
           onClose={this.closeFlyout}
           aria-labelledby="flyoutTitle"
+          focusTrapProps={focusTrapProps}
         >
           <EuiFlyoutHeader hasBorder={true}>
             <EuiTitle size="m">