[8.x] fix: [Search:WorkplaceSearch:API keys page]API key page modal d…

…ialog, flyout missing title from announcement (#202716) (#203848)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Search:WorkplaceSearch:API keys page]API key page modal dialog,
flyout missing title from announcement
(#202716)](#202716)

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

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

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-11T16:52:17Z","message":"fix:
[Search:WorkplaceSearch:API keys page]API key page modal dialog, flyout
missing title from announcement (#202716)\n\nCloses:
#201570\r\n\r\n**Description**\r\nDialog modal, flyout visible title
should be announced for the users,\r\nespecially using assistive
technology to know what dialog modal,
flyout\r\nopened.\r\n\r\n**Preconditions**\r\nStateful Workplace Search
-> API keys page is opened.\r\nUse Screen Reader (NVDA).\r\n\r\n**Steps
to reproduce**\r\n\r\n1.Using only keyboard navigate to Create key
button by pressing Tab key.\r\n2.Press Enter.\r\n3.Observe screen
reader.\r\n4.Close the flyout.\r\n5.Navigate to Delete
button.\r\n6.Press Enter.\r\n7.Observe screen reader.\r\n\r\n## Changes
made:\r\n\r\n1. aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n## Screen:\r\n\r\n<img width=\"988\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a1dc3586-a725-410c-be39-645bee637b88\">\r\n\r\n<img
width=\"1194\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/aa4fba8e-4683-4bee-a5bc-8d4d2e9bd63c\">","sha":"791aff08e454f87199572e03b884eefd6cd0b116","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:WorkplaceSearch:API keys page]API key page modal dialog, flyout
missing title from
announcement","number":202716,"url":"https://github.com/elastic/kibana/pull/202716","mergeCommit":{"message":"fix:
[Search:WorkplaceSearch:API keys page]API key page modal dialog, flyout
missing title from announcement (#202716)\n\nCloses:
#201570\r\n\r\n**Description**\r\nDialog modal, flyout visible title
should be announced for the users,\r\nespecially using assistive
technology to know what dialog modal,
flyout\r\nopened.\r\n\r\n**Preconditions**\r\nStateful Workplace Search
-> API keys page is opened.\r\nUse Screen Reader (NVDA).\r\n\r\n**Steps
to reproduce**\r\n\r\n1.Using only keyboard navigate to Create key
button by pressing Tab key.\r\n2.Press Enter.\r\n3.Observe screen
reader.\r\n4.Close the flyout.\r\n5.Navigate to Delete
button.\r\n6.Press Enter.\r\n7.Observe screen reader.\r\n\r\n## Changes
made:\r\n\r\n1. aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n## Screen:\r\n\r\n<img width=\"988\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a1dc3586-a725-410c-be39-645bee637b88\">\r\n\r\n<img
width=\"1194\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/aa4fba8e-4683-4bee-a5bc-8d4d2e9bd63c\">","sha":"791aff08e454f87199572e03b884eefd6cd0b116"}},"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/202716","number":202716,"mergeCommit":{"message":"fix:
[Search:WorkplaceSearch:API keys page]API key page modal dialog, flyout
missing title from announcement (#202716)\n\nCloses:
#201570\r\n\r\n**Description**\r\nDialog modal, flyout visible title
should be announced for the users,\r\nespecially using assistive
technology to know what dialog modal,
flyout\r\nopened.\r\n\r\n**Preconditions**\r\nStateful Workplace Search
-> API keys page is opened.\r\nUse Screen Reader (NVDA).\r\n\r\n**Steps
to reproduce**\r\n\r\n1.Using only keyboard navigate to Create key
button by pressing Tab key.\r\n2.Press Enter.\r\n3.Observe screen
reader.\r\n4.Close the flyout.\r\n5.Navigate to Delete
button.\r\n6.Press Enter.\r\n7.Observe screen reader.\r\n\r\n## Changes
made:\r\n\r\n1. aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n## Screen:\r\n\r\n<img width=\"988\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a1dc3586-a725-410c-be39-645bee637b88\">\r\n\r\n<img
width=\"1194\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/aa4fba8e-4683-4bee-a5bc-8d4d2e9bd63c\">","sha":"791aff08e454f87199572e03b884eefd6cd0b116"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>

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}

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>

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>