From f7fd83a80277fc4ec031a9303fe586a2617fbd91 Mon Sep 17 00:00:00 2001
From: Dennis Tismenko <dennis.tismenko@elastic.co>
Date: Fri, 3 Oct 2025 13:53:39 -0400
Subject: [PATCH] [a11y] Fix focus on generate API keys in connectors config

---
 .../components/generated_config_fields.tsx    | 32 +++++++++++++++++--
 .../components/generated_config_fields.tsx    | 31 ++++++++++++++++--
 2 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/x-pack/platform/plugins/shared/content_connectors/public/components/connector_detail/components/generated_config_fields.tsx b/x-pack/platform/plugins/shared/content_connectors/public/components/connector_detail/components/generated_config_fields.tsx
index 8ac5fbacfe50a..20879176261f6 100644
--- a/x-pack/platform/plugins/shared/content_connectors/public/components/connector_detail/components/generated_config_fields.tsx
+++ b/x-pack/platform/plugins/shared/content_connectors/public/components/connector_detail/components/generated_config_fields.tsx
@@ -5,7 +5,8 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
+import type { ComponentProps } from 'react';
 
 import {
   EuiButtonIcon,
@@ -35,9 +36,10 @@ import { EuiLinkTo } from '../../shared/react_router_helpers';
 import { MANAGE_API_KEYS_URL } from '../../../../common/constants';
 
 const ConfirmModal: React.FC<{
+  focusTrapProps?: ComponentProps<typeof EuiConfirmModal>['focusTrapProps'];
   onCancel: () => void;
   onConfirm: () => void;
-}> = ({ onCancel, onConfirm }) => {
+}> = ({ onCancel, onConfirm, focusTrapProps }) => {
   const confirmModalTitleId = useGeneratedHtmlId();
 
   return (
@@ -65,6 +67,7 @@ const ConfirmModal: React.FC<{
         }
       )}
       defaultFocusedButton="confirm"
+      focusTrapProps={focusTrapProps}
     >
       {i18n.translate(
         'xpack.contentConnectors.content.indices.configurationConnector.apiKey.confirmModal.description',
@@ -90,6 +93,8 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
   generateApiKey,
   isGenerateLoading,
 }) => {
+  const generateButtonRef = useRef<HTMLButtonElement>(null);
+  const refreshButtonRef = useRef<HTMLButtonElement>(null);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const refreshButtonClick = () => {
     setIsModalVisible(true);
@@ -108,7 +113,25 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
 
   return (
     <>
-      {isModalVisible && <ConfirmModal onCancel={onCancel} onConfirm={onConfirm} />}
+      {isModalVisible && (
+        <ConfirmModal
+          onCancel={onCancel}
+          onConfirm={onConfirm}
+          focusTrapProps={{
+            returnFocus: () => {
+              if (generateButtonRef.current) {
+                generateButtonRef.current.focus();
+                return false;
+              }
+              if (refreshButtonRef.current) {
+                refreshButtonRef.current.focus();
+                return false;
+              }
+              return true;
+            },
+          }}
+        />
+      )}
       <>
         <EuiFlexGrid columns={3} alignItems="center" gutterSize="s">
           <EuiFlexItem>
@@ -241,6 +264,7 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
                                   data-test-subj="enterpriseSearchGeneratedConfigFieldsButton"
                                   size="xs"
                                   iconType="refresh"
+                                  buttonRef={refreshButtonRef}
                                   isLoading={isGenerateLoading}
                                   onClick={refreshButtonClick}
                                   disabled={!connector.index_name}
@@ -274,6 +298,7 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
                           data-test-subj="enterpriseSearchGeneratedConfigFieldsButton"
                           size="xs"
                           iconType="refresh"
+                          buttonRef={generateButtonRef}
                           isLoading={isGenerateLoading}
                           onClick={refreshButtonClick}
                           disabled={!connector.index_name}
@@ -294,6 +319,7 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
           <>
             <EuiSpacer size="m" />
             <EuiCallOut
+              announceOnMount
               color="success"
               size="s"
               title={i18n.translate(
diff --git a/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/generated_config_fields.tsx b/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/generated_config_fields.tsx
index 758c879b8e2f0..ba5e0fa0d1cd6 100644
--- a/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/generated_config_fields.tsx
+++ b/x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/generated_config_fields.tsx
@@ -5,7 +5,8 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
+import type { ComponentProps } from 'react';
 
 import {
   EuiButtonIcon,
@@ -43,9 +44,10 @@ export interface GeneratedConfigFieldsProps {
 }
 
 const ConfirmModal: React.FC<{
+  focusTrapProps?: ComponentProps<typeof EuiConfirmModal>['focusTrapProps'];
   onCancel: () => void;
   onConfirm: () => void;
-}> = ({ onCancel, onConfirm }) => {
+}> = ({ onCancel, onConfirm, focusTrapProps }) => {
   const modalTitleId = useGeneratedHtmlId();
 
   return (
@@ -73,6 +75,7 @@ const ConfirmModal: React.FC<{
         }
       )}
       defaultFocusedButton="confirm"
+      focusTrapProps={focusTrapProps}
     >
       {i18n.translate(
         'xpack.enterpriseSearch.content.indices.configurationConnector.apiKey.confirmModal.description',
@@ -91,6 +94,8 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
   generateApiKey,
   isGenerateLoading,
 }) => {
+  const generateButtonRef = useRef<HTMLButtonElement>(null);
+  const refreshButtonRef = useRef<HTMLButtonElement>(null);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const refreshButtonClick = () => {
     setIsModalVisible(true);
@@ -109,7 +114,25 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
 
   return (
     <>
-      {isModalVisible && <ConfirmModal onCancel={onCancel} onConfirm={onConfirm} />}
+      {isModalVisible && (
+        <ConfirmModal
+          onCancel={onCancel}
+          onConfirm={onConfirm}
+          focusTrapProps={{
+            returnFocus: () => {
+              if (generateButtonRef.current) {
+                generateButtonRef.current.focus();
+                return false;
+              }
+              if (refreshButtonRef.current) {
+                refreshButtonRef.current.focus();
+                return false;
+              }
+              return true;
+            },
+          }}
+        />
+      )}
       <>
         <EuiFlexGrid columns={3} alignItems="center" gutterSize="s">
           <EuiFlexItem>
@@ -242,6 +265,7 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
                                   data-test-subj="enterpriseSearchGeneratedConfigFieldsButton"
                                   size="xs"
                                   iconType="refresh"
+                                  buttonRef={refreshButtonRef}
                                   isLoading={isGenerateLoading}
                                   onClick={refreshButtonClick}
                                   disabled={!connector.index_name}
@@ -275,6 +299,7 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
                           data-test-subj="enterpriseSearchGeneratedConfigFieldsButton"
                           size="xs"
                           iconType="refresh"
+                          buttonRef={generateButtonRef}
                           isLoading={isGenerateLoading}
                           onClick={refreshButtonClick}
                           disabled={!connector.index_name}