fix: [Security:Cases:Create page]Modal dialogs missing title from announcement (elastic#220756)

Part of: elastic#205615

> [!IMPORTANT]
> `Syntax help` part will be fixed in the `elastic/eui` repo 

## Changes made: 

1. Added required **a11y** attributes  for for `EuiConfirmModal`


## Screen: 

<img width="1516" alt="image"
src="https://github.com/user-attachments/assets/29622975-864c-4927-892a-956f17002d8d"
/>

Author: alexwizp

x-pack/platform/plugins/shared/cases/public/components/configure_cases/delete_confirmation_modal.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiConfirmModal } from '@elastic/eui';
+import { EuiConfirmModal, useGeneratedHtmlId } from '@elastic/eui';
 import * as i18n from '../custom_fields/translations';
 
 interface ConfirmDeleteCaseModalProps {
@@ -22,6 +22,8 @@ const DeleteConfirmationModalComponent: React.FC<ConfirmDeleteCaseModalProps> =
   onCancel,
   onConfirm,
 }) => {
+  const titleId = useGeneratedHtmlId();
+
   return (
     <EuiConfirmModal
       buttonColor="danger"
@@ -31,7 +33,11 @@ const DeleteConfirmationModalComponent: React.FC<ConfirmDeleteCaseModalProps> =
       onCancel={onCancel}
       onConfirm={onConfirm}
       title={title}
+      titleProps={{
+        id: titleId,
+      }}
       confirmButtonText={i18n.DELETE}
+      aria-labelledby={titleId}
     >
       {message}
     </EuiConfirmModal>

x-pack/platform/plugins/shared/cases/public/components/confirm_delete_case/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiConfirmModal } from '@elastic/eui';
+import { EuiConfirmModal, useGeneratedHtmlId } from '@elastic/eui';
 import * as i18n from './translations';
 
 interface ConfirmDeleteCaseModalProps {
@@ -20,6 +20,8 @@ const ConfirmDeleteCaseModalComp: React.FC<ConfirmDeleteCaseModalProps> = ({
   onCancel,
   onConfirm,
 }) => {
+  const titleId = useGeneratedHtmlId();
+
   return (
     <EuiConfirmModal
       buttonColor="danger"
@@ -30,6 +32,10 @@ const ConfirmDeleteCaseModalComp: React.FC<ConfirmDeleteCaseModalProps> = ({
       onCancel={onCancel}
       onConfirm={onConfirm}
       title={i18n.DELETE_CASE(totalCasesToBeDeleted)}
+      titleProps={{
+        id: titleId,
+      }}
+      aria-labelledby={titleId}
     >
       {i18n.CONFIRM_QUESTION(totalCasesToBeDeleted)}
     </EuiConfirmModal>

x-pack/platform/plugins/shared/cases/public/components/create/cancel_creation_confirmation_modal.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import type { EuiConfirmModalProps } from '@elastic/eui';
-import { EuiConfirmModal } from '@elastic/eui';
+import { EuiConfirmModal, useGeneratedHtmlId } from '@elastic/eui';
 import * as i18n from './translations';
 
 type Props = Pick<
@@ -22,16 +22,22 @@ const CancelCreationConfirmationModalComponent: React.FC<Props> = ({
   onConfirm,
   onCancel,
 }) => {
+  const titleId = useGeneratedHtmlId();
+
   return (
     <EuiConfirmModal
       title={title}
+      titleProps={{
+        id: titleId,
+      }}
       onCancel={onCancel}
       onConfirm={onConfirm}
       cancelButtonText={cancelButtonText}
       confirmButtonText={confirmButtonText}
       buttonColor="danger"
       defaultFocusedButton="confirm"
       data-test-subj="cancel-creation-confirmation-modal"
+      aria-labelledby={titleId}
     />
   );
 };

x-pack/platform/plugins/shared/cases/public/components/custom_fields/delete_confirmation_modal.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiConfirmModal } from '@elastic/eui';
+import { EuiConfirmModal, useGeneratedHtmlId } from '@elastic/eui';
 import * as i18n from './translations';
 
 interface ConfirmDeleteCaseModalProps {
@@ -20,6 +20,8 @@ const DeleteConfirmationModalComponent: React.FC<ConfirmDeleteCaseModalProps> =
   onCancel,
   onConfirm,
 }) => {
+  const titleId = useGeneratedHtmlId();
+
   return (
     <EuiConfirmModal
       buttonColor="danger"
@@ -29,7 +31,11 @@ const DeleteConfirmationModalComponent: React.FC<ConfirmDeleteCaseModalProps> =
       onCancel={onCancel}
       onConfirm={onConfirm}
       title={i18n.DELETE_FIELD_TITLE(label)}
+      titleProps={{
+        id: titleId,
+      }}
       confirmButtonText={i18n.DELETE}
+      aria-labelledby={titleId}
     >
       {i18n.DELETE_FIELD_DESCRIPTION}
     </EuiConfirmModal>

x-pack/platform/plugins/shared/cases/public/components/observable_types/delete_confirmation_modal.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiConfirmModal } from '@elastic/eui';
+import { EuiConfirmModal, useGeneratedHtmlId } from '@elastic/eui';
 import * as i18n from './translations';
 
 interface ConfirmDeleteCaseModalProps {
@@ -20,6 +20,8 @@ const DeleteConfirmationModalComponent: React.FC<ConfirmDeleteCaseModalProps> =
   onCancel,
   onConfirm,
 }) => {
+  const titleId = useGeneratedHtmlId();
+
   return (
     <EuiConfirmModal
       buttonColor="danger"
@@ -29,7 +31,11 @@ const DeleteConfirmationModalComponent: React.FC<ConfirmDeleteCaseModalProps> =
       onCancel={onCancel}
       onConfirm={onConfirm}
       title={i18n.DELETE_OBSERVABLE_TYPE_TITLE(label)}
+      titleProps={{
+        id: titleId,
+      }}
       confirmButtonText={i18n.DELETE}
+      aria-labelledby={titleId}
     >
       {i18n.DELETE_OBSERVABLE_TYPE_DESCRIPTION}
     </EuiConfirmModal>

x-pack/platform/plugins/shared/cases/public/components/user_actions/delete_attachment_confirmation_modal.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import type { EuiConfirmModalProps } from '@elastic/eui';
-import { EuiConfirmModal } from '@elastic/eui';
+import { EuiConfirmModal, useGeneratedHtmlId } from '@elastic/eui';
 import { CANCEL_BUTTON } from './property_actions/translations';
 
 type Pros = Pick<EuiConfirmModalProps, 'title' | 'confirmButtonText' | 'onConfirm' | 'onCancel'>;
@@ -18,16 +18,22 @@ const DeleteAttachmentConfirmationModalComponent: React.FC<Pros> = ({
   onConfirm,
   onCancel,
 }) => {
+  const titleId = useGeneratedHtmlId();
+
   return (
     <EuiConfirmModal
       title={title}
+      titleProps={{
+        id: titleId,
+      }}
       onCancel={onCancel}
       onConfirm={onConfirm}
       cancelButtonText={CANCEL_BUTTON}
       confirmButtonText={confirmButtonText}
       buttonColor="danger"
       defaultFocusedButton="confirm"
       data-test-subj="property-actions-confirm-modal"
+      aria-labelledby={titleId}
     />
   );
 };