fix: [Search:WorkplaceSearch:API keys page]API key page modal dialog,…

… flyout missing title from announcement (elastic#202716) Closes: elastic#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">
nreese · Dec 11, 2024 · 791aff0 · 791aff0
1 parent d3a0191
commit 791aff0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/...cations/analytics/components/add_analytics_collections/add_analytics_collection_modal.tsx b/...cations/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/..._search/public/applications/workplace_search/views/api_keys/components/api_key_flyout.tsx b/..._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/...e_search/public/applications/workplace_search/views/api_keys/components/api_keys_list.tsx b/...e_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>