From 791aff08e454f87199572e03b884eefd6cd0b116 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Wed, 11 Dec 2024 18:52:17 +0200
Subject: [PATCH] fix: [Search:WorkplaceSearch:API keys page]API key page modal
 dialog, flyout missing title from announcement (#202716)

Closes: #201570

**Description**
Dialog modal, flyout visible title should be announced for the users,
especially using assistive technology to know what dialog modal, flyout
opened.

**Preconditions**
Stateful Workplace Search -> API keys page is opened.
Use Screen Reader (NVDA).

**Steps to reproduce**

1.Using only keyboard navigate to Create key button by pressing Tab key.
2.Press Enter.
3.Observe screen reader.
4.Close the flyout.
5.Navigate to Delete button.
6.Press Enter.
7.Observe screen reader.

## Changes made:

1. aria-labelledby={modalTitleId} attribute was added for mentioned
EuiModal

## Screen:

<img width="988" alt="image"
src="https://github.com/user-attachments/assets/a1dc3586-a725-410c-be39-645bee637b88">

<img width="1194" alt="image"
src="https://github.com/user-attachments/assets/aa4fba8e-4683-4bee-a5bc-8d4d2e9bd63c">
---
 .../add_analytics_collection_modal.tsx        |  6 +++++-
 .../api_keys/components/api_key_flyout.tsx    | 19 ++++++++++++++++---
 .../api_keys/components/api_keys_list.tsx     | 11 ++++++++++-
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/add_analytics_collections/add_analytics_collection_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/add_analytics_collections/add_analytics_collection_modal.tsx
index c907ab326c774..6008c391239ba 100644
--- a/x-pack/plugins/enterprise_search/public/applications/analytics/components/add_analytics_collections/add_analytics_collection_modal.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/add_analytics_collections/add_analytics_collection_modal.tsx
@@ -83,13 +83,17 @@ export const AddAnalyticsCollectionModal: React.FC<AddAnalyticsCollectionModalPr
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButtonEmpty onClick={onClose}>
+        <EuiButtonEmpty
+          data-test-subj="enterpriseSearchAddAnalyticsCollectionModalCancelButton"
+          onClick={onClose}
+        >
           {i18n.translate('xpack.enterpriseSearch.analytics.collectionsCreate.form.cancelButton', {
             defaultMessage: 'Cancel',
           })}
         </EuiButtonEmpty>
 
         <EuiButton
+          data-test-subj="enterpriseSearchAddAnalyticsCollectionModalCreateButton"
           fill
           type="submit"
           form={modalFormId}
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/api_keys/components/api_key_flyout.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/api_keys/components/api_key_flyout.tsx
index 150778ad7fdbc..18bb73d8d5fd6 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/api_keys/components/api_key_flyout.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/api_keys/components/api_key_flyout.tsx
@@ -23,6 +23,7 @@ import {
   EuiButton,
   EuiForm,
   EuiTitle,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 
 import { CLOSE_BUTTON_LABEL, SAVE_BUTTON_LABEL } from '../../../../shared/constants';
@@ -44,12 +45,20 @@ export const ApiKeyFlyout: React.FC = () => {
     activeApiTokenRawName: rawName,
   } = useValues(ApiKeysLogic);
 
+  const flyoutTitleId = useGeneratedHtmlId();
+
   return (
     <EuiPortal>
-      <EuiFlyout onClose={hideApiKeyForm} hideCloseButton ownFocus size="s">
+      <EuiFlyout
+        onClose={hideApiKeyForm}
+        hideCloseButton
+        ownFocus
+        size="s"
+        aria-labelledby={flyoutTitleId}
+      >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2>{API_KEY_FLYOUT_TITLE}</h2>
+            <h2 id={flyoutTitleId}>{API_KEY_FLYOUT_TITLE}</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
@@ -86,7 +95,11 @@ export const ApiKeyFlyout: React.FC = () => {
         <EuiFlyoutFooter>
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty iconType="cross" onClick={hideApiKeyForm}>
+              <EuiButtonEmpty
+                data-test-subj="enterpriseSearchApiKeyFlyoutButton"
+                iconType="cross"
+                onClick={hideApiKeyForm}
+              >
                 {CLOSE_BUTTON_LABEL}
               </EuiButtonEmpty>
             </EuiFlexItem>
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/api_keys/components/api_keys_list.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/api_keys/components/api_keys_list.tsx
index 016ab78b3abb4..10f1ca12a6130 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/api_keys/components/api_keys_list.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/api_keys/components/api_keys_list.tsx
@@ -9,7 +9,13 @@ import React from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { EuiBasicTable, EuiBasicTableColumn, EuiCopy, EuiConfirmModal } from '@elastic/eui';
+import {
+  EuiBasicTable,
+  EuiBasicTableColumn,
+  EuiCopy,
+  EuiConfirmModal,
+  useGeneratedHtmlId,
+} from '@elastic/eui';
 
 import { DELETE_BUTTON_LABEL, CANCEL_BUTTON_LABEL } from '../../../../shared/constants';
 import { HiddenText } from '../../../../shared/hidden_text';
@@ -32,16 +38,19 @@ export const ApiKeysList: React.FC = () => {
   const { deleteApiKey, onPaginate, stageTokenNameForDeletion, hideDeleteModal } =
     useActions(ApiKeysLogic);
   const { apiTokens, meta, dataLoading, deleteModalVisible } = useValues(ApiKeysLogic);
+  const modalTitleId = useGeneratedHtmlId();
 
   const deleteModal = (
     <EuiConfirmModal
       title={API_KEYS_CONFIRM_DELETE_TITLE}
+      titleProps={{ id: modalTitleId }}
       onCancel={hideDeleteModal}
       onConfirm={deleteApiKey}
       cancelButtonText={CANCEL_BUTTON_LABEL}
       confirmButtonText={DELETE_BUTTON_LABEL}
       buttonColor="danger"
       defaultFocusedButton="confirm"
+      aria-labelledby={modalTitleId}
     >
       <p>{API_KEYS_CONFIRM_DELETE_LABEL}</p>
     </EuiConfirmModal>