[8.16] [Search][Connectors][a11y] Fixing wrong navigation sequence af…

…ter closing Manual configuration dialog (elastic#199613) (elastic#199739)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[Search][Connectors][a11y] Fixing wrong navigation sequence after
closing Manual configuration dialog
(elastic#199613)](elastic#199613)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"José Luis
González","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-12T09:56:52Z","message":"[Search][Connectors][a11y]
Fixing wrong navigation sequence after closing Manual configuration
dialog (elastic#199613)\n\n## Summary\r\n\r\nThis PR closes this
issue:\r\nhttps://github.com/elastic/issues/197623\r\n\r\nNow we
don't close the Popover content when clicking in any of the\r\noptions
listed in order to keep this content visible. And to solve
the\r\nz-index issue where the Popover were displayed on top of the
Flyout we\r\nare modifying the Flyout z-index to become exactly the same
as the\r\nPopover + 1 to overlap this content.\r\n\r\nNow we keep the
same tab index focus we got before opening the Flyout\r\nfrom the
Popover options.\r\n\r\n![CleanShot 2024-11-11 at 11
38\r\n57](https://github.com/user-attachments/assets/0a1ff5cb-13ff-45ba-8a89-f5ca91ad77ef)","sha":"8a7514f5e2478e8793e54a9de591286a0414ea60","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","Team:Search","backport:version","v8.17.0","v8.16.1"],"title":"[Search][Connectors][a11y]
Fixing wrong navigation sequence after closing Manual configuration
dialog","number":199613,"url":"https://github.com/elastic/kibana/pull/199613","mergeCommit":{"message":"[Search][Connectors][a11y]
Fixing wrong navigation sequence after closing Manual configuration
dialog (elastic#199613)\n\n## Summary\r\n\r\nThis PR closes this
issue:\r\nhttps://github.com/elastic/issues/197623\r\n\r\nNow we
don't close the Popover content when clicking in any of the\r\noptions
listed in order to keep this content visible. And to solve
the\r\nz-index issue where the Popover were displayed on top of the
Flyout we\r\nare modifying the Flyout z-index to become exactly the same
as the\r\nPopover + 1 to overlap this content.\r\n\r\nNow we keep the
same tab index focus we got before opening the Flyout\r\nfrom the
Popover options.\r\n\r\n![CleanShot 2024-11-11 at 11
38\r\n57](https://github.com/user-attachments/assets/0a1ff5cb-13ff-45ba-8a89-f5ca91ad77ef)","sha":"8a7514f5e2478e8793e54a9de591286a0414ea60"}},"sourceBranch":"main","suggestedTargetBranches":["8.x","8.16"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199613","number":199613,"mergeCommit":{"message":"[Search][Connectors][a11y]
Fixing wrong navigation sequence after closing Manual configuration
dialog (elastic#199613)\n\n## Summary\r\n\r\nThis PR closes this
issue:\r\nhttps://github.com/elastic/issues/197623\r\n\r\nNow we
don't close the Popover content when clicking in any of the\r\noptions
listed in order to keep this content visible. And to solve
the\r\nz-index issue where the Popover were displayed on top of the
Flyout we\r\nare modifying the Flyout z-index to become exactly the same
as the\r\nPopover + 1 to overlap this content.\r\n\r\nNow we keep the
same tab index focus we got before opening the Flyout\r\nfrom the
Popover options.\r\n\r\n![CleanShot 2024-11-11 at 11
38\r\n57](https://github.com/user-attachments/assets/0a1ff5cb-13ff-45ba-8a89-f5ca91ad77ef)","sha":"8a7514f5e2478e8793e54a9de591286a0414ea60"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: José Luis González <[email protected]>

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(

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' && (
         <>