mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[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","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","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","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:
parent
e4f727e2fe
commit
2633bed588
2 changed files with 5 additions and 3 deletions
|
@ -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(
|
||||
|
|
|
@ -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' && (
|
||||
<>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue