Skip to content

Commit ccde0f4

Browse files
[9.1][a11y] Fix focus on generate API keys in connectors config (elastic#237918)
## Summary This implements a workaround solution to the one introduced in elastic#237522 since `EuiConfirmModal` doesn't support the `focusTrapProps` prop until EUI v106.4.0 (currently on `104.0.2`). The previous attempt at an automated backport for reference: elastic#237722. ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit 652d68e) # Conflicts: # x-pack/platform/plugins/shared/content_connectors/public/components/connector_detail/components/generated_config_fields.tsx # x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/generated_config_fields.tsx
1 parent 755e00c commit ccde0f4

File tree

1 file changed

+19
-1
lines changed
  • x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components

1 file changed

+19
-1
lines changed

x-pack/solutions/search/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/generated_config_fields.tsx

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
* 2.0.
66
*/
77

8-
import React, { useState } from 'react';
8+
import React, { useRef, useState } from 'react';
9+
10+
import { defer } from 'lodash';
911

1012
import {
1113
EuiButtonIcon,
@@ -83,18 +85,32 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
8385
generateApiKey,
8486
isGenerateLoading,
8587
}) => {
88+
const apiKeyContainerRef = useRef<HTMLDivElement>(null);
89+
const restoreFocusRef = useRef<HTMLElement | null>(null);
8690
const [isModalVisible, setIsModalVisible] = useState(false);
8791

8892
const refreshButtonClick = () => {
93+
restoreFocusRef.current = document.activeElement as HTMLElement;
8994
setIsModalVisible(true);
9095
};
96+
const restoreFocus = () => {
97+
if (!restoreFocusRef.current || (restoreFocusRef.current as HTMLButtonElement).disabled) {
98+
apiKeyContainerRef.current?.focus();
99+
return;
100+
} else {
101+
restoreFocusRef.current?.focus();
102+
}
103+
restoreFocusRef.current = null;
104+
};
105+
91106
const onCancel = () => {
92107
setIsModalVisible(false);
93108
};
94109

95110
const onConfirm = () => {
96111
if (generateApiKey) generateApiKey();
97112
setIsModalVisible(false);
113+
defer(restoreFocus);
98114
};
99115

100116
return (
@@ -223,6 +239,8 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
223239
gutterSize="xs"
224240
justifyContent="flexEnd"
225241
alignItems="center"
242+
ref={apiKeyContainerRef}
243+
tabIndex={-1}
226244
>
227245
{apiKey?.encoded ? (
228246
<EuiFlexItem>

0 commit comments

Comments
 (0)