From 198fbcf253499ee276541b73dcc6980df6bfc66b Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Mon, 4 Nov 2024 18:42:00 +0200
Subject: [PATCH] fix: [Stateful: Indices: Overview page] Wrong focus order
 after generating API key on the dialog (#197212)

Closes #196490

## Description
The focus order should be clear and sequential. Changes in the dialog
should be announced so that users, especially those using assistive
technologies, can navigate easily and understand what is happening.

## What was changed:

1. `generate_api_key_modal/modal.tsx` 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/24d13648-390a-4fe6-9202-d808c38c3c5c
---
 .../generate_api_key_modal/modal.tsx          | 51 ++++++++++++++++---
 1 file changed, 44 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/generate_api_key_modal/modal.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/generate_api_key_modal/modal.tsx
index 18514ef93d9d9..d19568bea9e3c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/generate_api_key_modal/modal.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/generate_api_key_modal/modal.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 
 import { useValues, useActions } from 'kea';
 
@@ -26,11 +26,12 @@ import {
   EuiText,
   EuiSpacer,
   EuiLink,
-  EuiFormLabel,
   EuiCodeBlock,
+  EuiCallOut,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 
 import { docLinks } from '../../../../../shared/doc_links';
 
@@ -49,6 +50,13 @@ export const GenerateApiKeyModal: React.FC<GenerateApiKeyModalProps> = ({ indexN
   const { ingestionMethod } = useValues(IndexViewLogic);
   const { setKeyName } = useActions(GenerateApiKeyModalLogic);
   const { makeRequest } = useActions(GenerateApiKeyLogic);
+  const copyApiKeyRef = useRef<HTMLAnchorElement>(null);
+
+  useEffect(() => {
+    if (isSuccess) {
+      copyApiKeyRef.current?.focus();
+    }
+  }, [isSuccess]);
 
   return (
     <EuiModal onClose={onClose}>
@@ -68,7 +76,11 @@ export const GenerateApiKeyModal: React.FC<GenerateApiKeyModalProps> = ({ indexN
                   "Before you can start posting documents to your Elasticsearch index you'll need to create at least one API key.",
               })}
               &nbsp;
-              <EuiLink href={docLinks.apiKeys} external>
+              <EuiLink
+                data-test-subj="enterpriseSearchGenerateApiKeyModalLearnMoreAboutApiKeysLink"
+                href={docLinks.apiKeys}
+                external
+              >
                 {i18n.translate(
                   'xpack.enterpriseSearch.content.overview.generateApiKeyModal.learnMore',
                   { defaultMessage: 'Learn more about API keys' }
@@ -77,15 +89,25 @@ export const GenerateApiKeyModal: React.FC<GenerateApiKeyModalProps> = ({ indexN
             </p>
           </EuiText>
           <EuiSpacer />
-          <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.generateApiKeyModal.euiFormRow.nameYourAPIKeyLabel"
+                              defaultMessage="Name your API key"
+                            />
+                          }
+                          fullWidth
+                        >
                           <EuiFieldText
+                            data-test-subj="enterpriseSearchGenerateApiKeyModalFieldText"
                             data-telemetry-id={`entSearchContent-${ingestionMethod}-overview-generateApiKey-editName`}
                             fullWidth
                             placeholder="Type a name for your API key"
@@ -121,8 +143,20 @@ export const GenerateApiKeyModal: React.FC<GenerateApiKeyModalProps> = ({ indexN
                     </>
                   ) : (
                     <EuiFlexItem>
-                      <EuiFormLabel>{keyName}</EuiFormLabel>
-                      <EuiSpacer size="xs" />
+                      <EuiCallOut
+                        title={
+                          <FormattedMessage
+                            id="xpack.enterpriseSearch.content.overview.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
@@ -137,6 +171,8 @@ export const GenerateApiKeyModal: React.FC<GenerateApiKeyModalProps> = ({ indexN
                         </EuiFlexItem>
                         <EuiFlexItem grow={false}>
                           <EuiButtonIcon
+                            buttonRef={copyApiKeyRef}
+                            data-test-subj="enterpriseSearchGenerateApiKeyModalButton"
                             data-telemetry-id={`entSearchContent-${ingestionMethod}-overview-generateApiKey-download`}
                             aria-label={i18n.translate(
                               'xpack.enterpriseSearch.content.overview.generateApiKeyModal.csvDownloadButton',
@@ -175,6 +211,7 @@ export const GenerateApiKeyModal: React.FC<GenerateApiKeyModalProps> = ({ indexN
       </EuiModalBody>
       <EuiModalFooter>
         <EuiButtonEmpty
+          data-test-subj="enterpriseSearchGenerateApiKeyModalCancelButton"
           data-telemetry-id={`entSearchContent-${ingestionMethod}-overview-generateApiKey-cancel`}
           onClick={onClose}
         >