Skip to content

Commit

Permalink
[Search][Connectors][a11y] Fixing wrong navigation sequence after clo…
Browse files Browse the repository at this point in the history
…sing Manual configuration dialog (elastic#199613)

## Summary

This PR closes this issue:
elastic#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)
  • Loading branch information
JoseLuisGJ authored Nov 12, 2024
1 parent dbc9e31 commit 8a7514f
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,6 @@ GET connector-${rawName}/_search
onClick={() => {
setFlyoutContent('manual_config');
setIsFlyoutVisible(true);
closePopover();
}}
>
{i18n.translate(
Expand Down Expand Up @@ -206,7 +205,6 @@ GET connector-${rawName}/_search
onClick={() => {
setFlyoutContent('client');
setIsFlyoutVisible(true);
closePopover();
}}
>
{i18n.translate(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
EuiSpacer,
EuiText,
EuiTitle,
useEuiTheme,
useGeneratedHtmlId,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
Expand Down Expand Up @@ -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' && (
<>
Expand Down

0 comments on commit 8a7514f

Please sign in to comment.