fix: [Search:SearchApplications:Connect page]Button behind modal dial…

…og is announced (#199668) Closes: #199634 ## Summary This PR apply similar with #197212 changes to [generate_search_application_api_key_modal.tsx](https://github.com/elastic/kibana/pull/199668/files#diff-2d651cfb54cad235005b4a9361f2dc25784a4d2842dfaa02fa301e8889d7825b) dialog. ## What was changed: 1. Dialog was slightly updated to be more accessibility (a11y) friendly: - To differentiate the two UI states, we now use two colors for the panel: `primary` for the initial state and `success` when the API key is generated. - An `EuiCallOut` with `role="alert"` was added to announce status updates for screen reader users. - After creating an API key, the focus now moves to the `Download API key` button. ## Screen: https://github.com/user-attachments/assets/41285198-9ee9-4201-a1fd-35b7192b439f
elastic · Nov 12, 2024 · fbe926c · fbe926c
1 parent 515dbe5
commit fbe926c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 9 deletions.
diff --git a/...ication/connect/generate_api_key_modal/generate_search_application_api_key_modal.test.tsx b/...ication/connect/generate_api_key_modal/generate_search_application_api_key_modal.test.tsx
@@ -9,14 +9,16 @@ import { setMockValues, setMockActions } from '../../../../../__mocks__/kea_logi
 
 import React from 'react';
 
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';
 
 import { EuiModal, EuiFieldText, EuiCodeBlock } from '@elastic/eui';
 
 const mockActions = { makeRequest: jest.fn(), setKeyName: jest.fn() };
 
 const mockValues = { apiKey: '', isLoading: false, isSuccess: false, keyName: '' };
 
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+
 import { GenerateSearchApplicationApiKeyModal } from './generate_search_application_api_key_modal';
 
 const onCloseMock = jest.fn();
@@ -50,7 +52,7 @@ describe('GenerateSearchApplicationApiKeyModal', () => {
     });
 
     it('pre-set the key name with search application name', () => {
-      mount(
+      mountWithIntl(
         <GenerateSearchApplicationApiKeyModal
           searchApplicationName="puggles"
           onClose={onCloseMock}

diff --git a/..._application/connect/generate_api_key_modal/generate_search_application_api_key_modal.tsx b/..._application/connect/generate_api_key_modal/generate_search_application_api_key_modal.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { useValues, useActions } from 'kea';
 
@@ -24,12 +24,12 @@ import {
   EuiFieldText,
   EuiFormRow,
   EuiText,
-  EuiSpacer,
-  EuiFormLabel,
+  EuiCallOut,
   EuiCodeBlock,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 
 import { GenerateSearchApplicationApiKeyLogic } from '../../../../api/search_applications/generate_search_application_api_key_logic';
 
@@ -46,11 +46,18 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
   const { keyName, apiKey, isLoading, isSuccess } = useValues(GenerateApiKeyModalLogic);
   const { setKeyName } = useActions(GenerateApiKeyModalLogic);
   const { makeRequest } = useActions(GenerateSearchApplicationApiKeyLogic);
+  const copyApiKeyRef = useRef<HTMLAnchorElement>(null);
 
   useEffect(() => {
     setKeyName(`${searchApplicationName} read-only API key`);
   }, [searchApplicationName]);
 
+  useEffect(() => {
+    if (isSuccess) {
+      copyApiKeyRef.current?.focus();
+    }
+  }, [isSuccess]);
+
   return (
     <EuiModal onClose={onClose}>
       <EuiModalHeader>
@@ -65,15 +72,24 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
       </EuiModalHeader>
       <EuiModalBody>
         <>
-          <EuiPanel hasShadow={false} color="primary">
+          <EuiPanel hasShadow={false} color={!isSuccess ? 'primary' : 'success'}>
             <EuiFlexGroup direction="column">
               <EuiFlexItem>
                 <EuiFlexGroup direction="row" alignItems="flexEnd">
                   {!isSuccess ? (
                     <>
                       <EuiFlexItem>
-                        <EuiFormRow label="Name your API key" fullWidth>
+                        <EuiFormRow
+                          label={
+                            <FormattedMessage
+                              id="xpack.enterpriseSearch.generateSearchApplicationApiKeyModal.euiFormRow.nameYourAPIKeyLabel"
+                              defaultMessage="Name your API key"
+                            />
+                          }
+                          fullWidth
+                        >
                           <EuiFieldText
+                            data-test-subj="enterpriseSearchGenerateSearchApplicationApiKeyModalFieldText"
                             data-telemetry-id="entSearchApplications-api-generateSearchApplicationApiKeyModal-editName"
                             fullWidth
                             placeholder="Type a name for your API key"
@@ -110,8 +126,20 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
                     </>
                   ) : (
                     <EuiFlexItem>
-                      <EuiFormLabel>{keyName}</EuiFormLabel>
-                      <EuiSpacer size="xs" />
+                      <EuiCallOut
+                        title={
+                          <FormattedMessage
+                            id="xpack.enterpriseSearch.searchApplication.searchApplication.api.generateApiKeyModal.callOutMessage"
+                            defaultMessage="Done! The {name} API key was generated."
+                            values={{
+                              name: <strong>{keyName}</strong>,
+                            }}
+                          />
+                        }
+                        color="success"
+                        iconType="check"
+                        role="alert"
+                      />
                       <EuiFlexGroup alignItems="center">
                         <EuiFlexItem>
                           <EuiCodeBlock
@@ -126,6 +154,8 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
                         </EuiFlexItem>
                         <EuiFlexItem grow={false}>
                           <EuiButtonIcon
+                            buttonRef={copyApiKeyRef}
+                            data-test-subj="enterpriseSearchGenerateSearchApplicationApiKeyModalButton"
                             data-telemetry-id="entSearchApplications-api-generateSearchApplicationApiKeyModal-csvDownloadButton"
                             aria-label={i18n.translate(
                               'xpack.enterpriseSearch.searchApplication.searchApplication.api.generateApiKeyModal.csvDownloadButton',
@@ -165,6 +195,7 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
       <EuiModalFooter>
         {apiKey ? (
           <EuiButton
+            data-test-subj="enterpriseSearchGenerateSearchApplicationApiKeyModalDoneButton"
             data-telemetry-id="entSearchApplications-api-generateSearchApplicationApiKeyModal-done"
             fill
             onClick={onClose}
@@ -178,6 +209,7 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
           </EuiButton>
         ) : (
           <EuiButtonEmpty
+            data-test-subj="enterpriseSearchGenerateSearchApplicationApiKeyModalCancelButton"
             data-telemetry-id="entSearchApplications-api-generateSearchApplicationApiKeyModal-cancel"
             onClick={onClose}
           >