[8.x] [Search][Connectors][a11y] Fixing wrong navigation sequence after closing Manual configuration dialog (#199613) (#199740)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Search][Connectors][a11y] Fixing wrong navigation sequence after
closing Manual configuration dialog
(#199613)](https://github.com/elastic/kibana/pull/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":"joseluisgj@gmail.com"},"sourceCommit":{"committedDate":"2024-11-12T09:56:52Z","message":"[Search][Connectors][a11y]
Fixing wrong navigation sequence after closing Manual configuration
dialog (#199613)\n\n## Summary\r\n\r\nThis PR closes this
issue:\r\nhttps://github.com/elastic/kibana/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 (#199613)\n\n## Summary\r\n\r\nThis PR closes this
issue:\r\nhttps://github.com/elastic/kibana/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 (#199613)\n\n## Summary\r\n\r\nThis PR closes this
issue:\r\nhttps://github.com/elastic/kibana/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 <joseluisgj@gmail.com>
This commit is contained in:
Kibana Machine 2024-11-12 22:46:26 +11:00 committed by GitHub
parent e4f727e2fe
commit 2633bed588
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 5 additions and 3 deletions

View file

@ -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(

View file

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