From 3986c4185d247c7c71ace3d43402e4c846de824b Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 22 Nov 2024 05:40:02 +1100
Subject: [PATCH] [8.x] fix: [Search:BehavioralAnalytics:Integration page]When
 generating API key, button behind dialog modal is announced (#200560)
 (#201242)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Search:BehavioralAnalytics:Integration page]When generating API
key, button behind dialog modal is announced
(#200560)](https://github.com/elastic/kibana/pull/200560)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2024-11-21T16:42:09Z","message":"fix:
[Search:BehavioralAnalytics:Integration page]When generating API key,
button behind dialog modal is announced (#200560)\n\nCloses:
#200305\r\n\r\n## Description\r\nElements which are behind dialogs
shouldn't be announced as not to\r\nconfuse users, especially the ones
using assistive technology.\r\n\r\n## Preconditions\r\nStateful
Behavioral Analytics -> Integration page is opened.\r\nCollection is
added.\r\n\r\n## What was changed: \r\n\r\nThis PR apply the similar
with\r\n[#197212](https://github.com/elastic/kibana/pull/197212)
changes\r\n\r\n1. Modal dialog was slightly updated to be more
accessibility (a11y)\r\nfriendly:\r\n- To differentiate the two UI
states, we now use two colors for the\r\npanel: primary for the initial
state and success when the API key is\r\ngenerated.\r\n- An `EuiCallOut`
with `role=\"alert\"` was added to announce status\r\nupdates for screen
reader users.\r\n2. After creating an API key, the focus now moves to
the Download API\r\nkey button.\r\n\r\n##
Screen\r\n\r\n\r\nhttps://github.com/user-attachments/assets/3e72aeb5-34a2-43a6-b477-52a2f71b750a","sha":"76e9359d1b428961c79d8409d15255b747c839af","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","Team:Search","backport:prev-minor"],"title":"fix:
[Search:BehavioralAnalytics:Integration page]When generating API key,
button behind dialog modal is
announced","number":200560,"url":"https://github.com/elastic/kibana/pull/200560","mergeCommit":{"message":"fix:
[Search:BehavioralAnalytics:Integration page]When generating API key,
button behind dialog modal is announced (#200560)\n\nCloses:
#200305\r\n\r\n## Description\r\nElements which are behind dialogs
shouldn't be announced as not to\r\nconfuse users, especially the ones
using assistive technology.\r\n\r\n## Preconditions\r\nStateful
Behavioral Analytics -> Integration page is opened.\r\nCollection is
added.\r\n\r\n## What was changed: \r\n\r\nThis PR apply the similar
with\r\n[#197212](https://github.com/elastic/kibana/pull/197212)
changes\r\n\r\n1. Modal dialog was slightly updated to be more
accessibility (a11y)\r\nfriendly:\r\n- To differentiate the two UI
states, we now use two colors for the\r\npanel: primary for the initial
state and success when the API key is\r\ngenerated.\r\n- An `EuiCallOut`
with `role=\"alert\"` was added to announce status\r\nupdates for screen
reader users.\r\n2. After creating an API key, the focus now moves to
the Download API\r\nkey button.\r\n\r\n##
Screen\r\n\r\n\r\nhttps://github.com/user-attachments/assets/3e72aeb5-34a2-43a6-b477-52a2f71b750a","sha":"76e9359d1b428961c79d8409d15255b747c839af"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/200560","number":200560,"mergeCommit":{"message":"fix:
[Search:BehavioralAnalytics:Integration page]When generating API key,
button behind dialog modal is announced (#200560)\n\nCloses:
#200305\r\n\r\n## Description\r\nElements which are behind dialogs
shouldn't be announced as not to\r\nconfuse users, especially the ones
using assistive technology.\r\n\r\n## Preconditions\r\nStateful
Behavioral Analytics -> Integration page is opened.\r\nCollection is
added.\r\n\r\n## What was changed: \r\n\r\nThis PR apply the similar
with\r\n[#197212](https://github.com/elastic/kibana/pull/197212)
changes\r\n\r\n1. Modal dialog was slightly updated to be more
accessibility (a11y)\r\nfriendly:\r\n- To differentiate the two UI
states, we now use two colors for the\r\npanel: primary for the initial
state and success when the API key is\r\ngenerated.\r\n- An `EuiCallOut`
with `role=\"alert\"` was added to announce status\r\nupdates for screen
reader users.\r\n2. After creating an API key, the focus now moves to
the Download API\r\nkey button.\r\n\r\n##
Screen\r\n\r\n\r\nhttps://github.com/user-attachments/assets/3e72aeb5-34a2-43a6-b477-52a2f71b750a","sha":"76e9359d1b428961c79d8409d15255b747c839af"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
---
 .../generate_analytics_api_key_modal.test.tsx |  7 ++-
 .../generate_analytics_api_key_modal.tsx      | 52 +++++++++++++++----
 .../generate_api_key_modal/modal.tsx          |  6 ++-
 3 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/api_key_modal/generate_analytics_api_key_modal.test.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/api_key_modal/generate_analytics_api_key_modal.test.tsx
index 2dc27c7f7bfad..fa390d39e99d8 100644
--- a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/api_key_modal/generate_analytics_api_key_modal.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/api_key_modal/generate_analytics_api_key_modal.test.tsx
@@ -9,9 +9,10 @@ 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';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
 
 const mockActions = { makeRequest: jest.fn(), setKeyName: jest.fn() };
 
@@ -47,7 +48,9 @@ describe('GenerateAnalyticsApiKeyModal', () => {
     });
 
     it('pre-set the key name with collection name', () => {
-      mount(<GenerateAnalyticsApiKeyModal collectionName="puggles" onClose={onCloseMock} />);
+      mountWithIntl(
+        <GenerateAnalyticsApiKeyModal collectionName="puggles" onClose={onCloseMock} />
+      );
       expect(mockActions.setKeyName).toHaveBeenCalledWith('puggles API key');
     });
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/api_key_modal/generate_analytics_api_key_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/api_key_modal/generate_analytics_api_key_modal.tsx
index 7cf5b76490c4f..bd5b7eed2a891 100644
--- a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/api_key_modal/generate_analytics_api_key_modal.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_integrate/api_key_modal/generate_analytics_api_key_modal.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 
 import { useValues, useActions } from 'kea';
 
@@ -24,12 +24,13 @@ import {
   EuiFieldText,
   EuiFormRow,
   EuiText,
-  EuiSpacer,
-  EuiFormLabel,
   EuiCodeBlock,
+  EuiCallOut,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 
 import { generateAnalyticsApiKeyLogic } from '../../../../api/generate_analytics_api_key/generate_analytics_api_key_logic';
 
@@ -47,15 +48,23 @@ export const GenerateAnalyticsApiKeyModal: React.FC<GenerateAnalyticsApiKeyModal
   const { keyName, apiKey, isLoading, isSuccess } = useValues(GenerateApiKeyModalLogic);
   const { setKeyName } = useActions(GenerateApiKeyModalLogic);
   const { makeRequest } = useActions(generateAnalyticsApiKeyLogic);
+  const copyApiKeyRef = useRef<HTMLAnchorElement>(null);
+  const modalTitleId = useGeneratedHtmlId();
+
+  useEffect(() => {
+    if (isSuccess) {
+      copyApiKeyRef.current?.focus();
+    }
+  }, [isSuccess]);
 
   useEffect(() => {
     setKeyName(`${collectionName} API key`);
   }, [collectionName]);
 
   return (
-    <EuiModal onClose={onClose}>
+    <EuiModal onClose={onClose} aria-labelledby={modalTitleId}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>
+        <EuiModalHeaderTitle id={modalTitleId}>
           {i18n.translate(
             'xpack.enterpriseSearch.content.analytics.api.generateAnalyticsApiKeyModal.title',
             {
@@ -66,15 +75,24 @@ export const GenerateAnalyticsApiKeyModal: React.FC<GenerateAnalyticsApiKeyModal
       </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.content.analytics.api.generateAnalyticsApiKeyModal.nameYourAPIKeyLabel"
+                              defaultMessage="Name your API key"
+                            />
+                          }
+                          fullWidth
+                        >
                           <EuiFieldText
+                            data-test-subj="enterpriseSearchGenerateAnalyticsApiKeyModalFieldText"
                             data-telemetry-id="entSearchContent-analyticss-api-generateAnalyticsApiKeyModal-editName"
                             fullWidth
                             placeholder="Type a name for your API key"
@@ -111,8 +129,20 @@ export const GenerateAnalyticsApiKeyModal: React.FC<GenerateAnalyticsApiKeyModal
                     </>
                   ) : (
                     <EuiFlexItem>
-                      <EuiFormLabel>{keyName}</EuiFormLabel>
-                      <EuiSpacer size="xs" />
+                      <EuiCallOut
+                        title={
+                          <FormattedMessage
+                            id="xpack.enterpriseSearch.content.analytics.api.generateAnalyticsApiKeyModal.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
@@ -127,6 +157,8 @@ export const GenerateAnalyticsApiKeyModal: React.FC<GenerateAnalyticsApiKeyModal
                         </EuiFlexItem>
                         <EuiFlexItem grow={false}>
                           <EuiButtonIcon
+                            buttonRef={copyApiKeyRef}
+                            data-test-subj="enterpriseSearchGenerateAnalyticsApiKeyModalButton"
                             data-telemetry-id="entSearchContent-analyticss-api-generateAnalyticsApiKeyModal-csvDownloadButton"
                             aria-label={i18n.translate(
                               'xpack.enterpriseSearch.content.analytics.api.generateAnalyticsApiKeyModal.csvDownloadButton',
@@ -166,6 +198,7 @@ export const GenerateAnalyticsApiKeyModal: React.FC<GenerateAnalyticsApiKeyModal
       <EuiModalFooter>
         {apiKey ? (
           <EuiButton
+            data-test-subj="enterpriseSearchGenerateAnalyticsApiKeyModalDoneButton"
             data-telemetry-id="entSearchContent-analyticss-api-generateAnalyticsApiKeyModal-done"
             fill
             onClick={onClose}
@@ -179,6 +212,7 @@ export const GenerateAnalyticsApiKeyModal: React.FC<GenerateAnalyticsApiKeyModal
           </EuiButton>
         ) : (
           <EuiButtonEmpty
+            data-test-subj="enterpriseSearchGenerateAnalyticsApiKeyModalCancelButton"
             data-telemetry-id="entSearchContent-analyticss-api-generateAnalyticsApiKeyModal-cancel"
             onClick={onClose}
           >
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 d19568bea9e3c..5c0ba545bb565 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
@@ -28,6 +28,7 @@ import {
   EuiLink,
   EuiCodeBlock,
   EuiCallOut,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -51,6 +52,7 @@ export const GenerateApiKeyModal: React.FC<GenerateApiKeyModalProps> = ({ indexN
   const { setKeyName } = useActions(GenerateApiKeyModalLogic);
   const { makeRequest } = useActions(GenerateApiKeyLogic);
   const copyApiKeyRef = useRef<HTMLAnchorElement>(null);
+  const modalTitleId = useGeneratedHtmlId();
 
   useEffect(() => {
     if (isSuccess) {
@@ -59,9 +61,9 @@ export const GenerateApiKeyModal: React.FC<GenerateApiKeyModalProps> = ({ indexN
   }, [isSuccess]);
 
   return (
-    <EuiModal onClose={onClose}>
+    <EuiModal onClose={onClose} aria-labelledby={modalTitleId}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>
+        <EuiModalHeaderTitle id={modalTitleId}>
           {i18n.translate('xpack.enterpriseSearch.content.overview.generateApiKeyModal.title', {
             defaultMessage: 'Generate API Key',
           })}