From 8a7514f5e2478e8793e54a9de591286a0414ea60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Gonz=C3=A1lez?= <joseluisgj@gmail.com>
Date: Tue, 12 Nov 2024 10:56:52 +0100
Subject: [PATCH] [Search][Connectors][a11y] Fixing wrong navigation sequence
 after closing Manual configuration dialog (#199613)

## Summary

This PR closes this issue:
https://github.com/elastic/kibana/issues/197623

Now we don't close the Popover content when clicking in any of the
options listed in order to keep this content visible. And to solve the
z-index issue where the Popover were displayed on top of the Flyout we
are modifying the Flyout z-index to become exactly the same as the
Popover + 1 to overlap this content.

Now we keep the same tab index focus we got before opening the Flyout
from the Popover options.

![CleanShot 2024-11-11 at 11 38
57](https://github.com/user-attachments/assets/0a1ff5cb-13ff-45ba-8a89-f5ca91ad77ef)
---
 .../create_connector/components/manual_configuration.tsx    | 2 --
 .../components/manual_configuration_flyout.tsx              | 6 +++++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration.tsx
index 825f47920d256..260486a3ec4c1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration.tsx
@@ -165,7 +165,6 @@ GET connector-${rawName}/_search
       onClick={() => {
         setFlyoutContent('manual_config');
         setIsFlyoutVisible(true);
-        closePopover();
       }}
     >
       {i18n.translate(
@@ -206,7 +205,6 @@ GET connector-${rawName}/_search
       onClick={() => {
         setFlyoutContent('client');
         setIsFlyoutVisible(true);
-        closePopover();
       }}
     >
       {i18n.translate(
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration_flyout.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration_flyout.tsx
index 98bea7ed62f70..03a633a5aa04f 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration_flyout.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration_flyout.tsx
@@ -27,6 +27,7 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  useEuiTheme,
   useGeneratedHtmlId,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -68,13 +69,16 @@ export const ManualConfigurationFlyout: React.FC<ManualConfigurationFlyoutProps>
 
   const { connectorName } = useValues(NewConnectorLogic);
   const { setRawName, createConnector } = useActions(NewConnectorLogic);
-
+  const { euiTheme } = useEuiTheme();
   return (
     <EuiFlyout
       ownFocus
       onClose={() => setIsFlyoutVisible(false)}
       aria-labelledby={simpleFlyoutTitleId}
       size="s"
+      // This fixes an a11y issue where the flyout was rendered below the Popover
+      // Now we let get the focus back to the Popover is we close the Flyout
+      maskProps={{ style: `z-index: ${Number(euiTheme.levels.menu) + 1}` }}
     >
       {flyoutContent === 'manual_config' && (
         <>