From cf74a06a170f7091c80d1f2885d3ab177b422228 Mon Sep 17 00:00:00 2001
From: Sonia Sanz Vivas <sonia.sanzvivas@elastic.co>
Date: Thu, 24 Apr 2025 14:20:13 +0200
Subject: [PATCH 1/2] Fix accessibility issues

---
 .../application/components/delete_watches_modal.tsx  |  7 ++++++-
 .../components/execution_history_panel.tsx           | 12 ++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/x-pack/platform/plugins/private/watcher/public/application/components/delete_watches_modal.tsx b/x-pack/platform/plugins/private/watcher/public/application/components/delete_watches_modal.tsx
index 844e210de26f1..a22aba5a71d60 100644
--- a/x-pack/platform/plugins/private/watcher/public/application/components/delete_watches_modal.tsx
+++ b/x-pack/platform/plugins/private/watcher/public/application/components/delete_watches_modal.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiConfirmModal } from '@elastic/eui';
+import { EuiConfirmModal, useGeneratedHtmlId } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { deleteWatches } from '../lib/api';
@@ -20,6 +20,9 @@ export const DeleteWatchesModal = ({
 }) => {
   const { toasts } = useAppContext();
   const numWatchesToDelete = watchesToDelete.length;
+
+  const modalTitleId = useGeneratedHtmlId({ prefix: 'deleteWatchModal' });
+
   if (!numWatchesToDelete) {
     return null;
   }
@@ -83,6 +86,8 @@ export const DeleteWatchesModal = ({
       }}
       cancelButtonText={cancelButtonText}
       confirmButtonText={confirmButtonText}
+      aria-labelledby={modalTitleId}
+      titleProps={{ id: modalTitleId }}
     >
       {confirmModalText}
     </EuiConfirmModal>
diff --git a/x-pack/platform/plugins/private/watcher/public/application/sections/watch_status_page/components/execution_history_panel.tsx b/x-pack/platform/plugins/private/watcher/public/application/sections/watch_status_page/components/execution_history_panel.tsx
index 5abca77811c92..0c99156e50f91 100644
--- a/x-pack/platform/plugins/private/watcher/public/application/sections/watch_status_page/components/execution_history_panel.tsx
+++ b/x-pack/platform/plugins/private/watcher/public/application/sections/watch_status_page/components/execution_history_panel.tsx
@@ -24,6 +24,7 @@ import {
   EuiSelect,
   EuiSpacer,
   EuiTitle,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 
 import { PAGINATION } from '../../../../../common/constants';
@@ -99,6 +100,9 @@ export const ExecutionHistoryPanel = () => {
     ? JSON.stringify(watchHistoryDetails.details, null, 2)
     : '';
 
+  const watchHistoryDetailFlyoutId = useGeneratedHtmlId({ prefix: 'watchFlyout' });
+  const watchHistoryErrorDetailsFlyoutTitleId = useGeneratedHtmlId({ prefix: 'watchFlyout' });
+
   if (historyError) {
     return (
       <Fragment>
@@ -229,12 +233,12 @@ export const ExecutionHistoryPanel = () => {
         <EuiFlyout
           data-test-subj="watchHistoryErrorDetailFlyout"
           onClose={() => setDetailWatchId(undefined)}
-          aria-labelledby="watchHistoryErrorDetailsFlyoutTitle"
+          aria-labelledby={watchHistoryErrorDetailsFlyoutTitleId}
           maxWidth={600}
         >
           <EuiFlyoutHeader>
             <EuiTitle size="s">
-              <h3 data-test-subj="title">
+              <h3 data-test-subj="title" id={watchHistoryErrorDetailsFlyoutTitleId}>
                 <FormattedMessage
                   id="xpack.watcher.sections.watchHistory.watchHistoryDetail.errorTitle"
                   defaultMessage="Execution details"
@@ -305,12 +309,12 @@ export const ExecutionHistoryPanel = () => {
         <EuiFlyout
           data-test-subj="watchHistoryDetailFlyout"
           onClose={() => setDetailWatchId(undefined)}
-          aria-labelledby="watchHistoryDetailsFlyoutTitle"
+          aria-labelledby={watchHistoryDetailFlyoutId}
           maxWidth={600}
         >
           <EuiFlyoutHeader>
             <EuiTitle size="s">
-              <h3 data-test-subj="title">
+              <h3 data-test-subj="title" id={watchHistoryDetailFlyoutId}>
                 <FormattedMessage
                   id="xpack.watcher.sections.watchHistory.watchHistoryDetail.title"
                   defaultMessage="Executed on {date}"

From ec6e764849ed7682a4f125886515d6b2c2af7c8f Mon Sep 17 00:00:00 2001
From: Sonia Sanz Vivas <sonia.sanzvivas@elastic.co>
Date: Thu, 24 Apr 2025 15:46:24 +0200
Subject: [PATCH 2/2] Change prefix

---
 .../watch_status_page/components/execution_history_panel.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/platform/plugins/private/watcher/public/application/sections/watch_status_page/components/execution_history_panel.tsx b/x-pack/platform/plugins/private/watcher/public/application/sections/watch_status_page/components/execution_history_panel.tsx
index 0c99156e50f91..dee7bb920a7c2 100644
--- a/x-pack/platform/plugins/private/watcher/public/application/sections/watch_status_page/components/execution_history_panel.tsx
+++ b/x-pack/platform/plugins/private/watcher/public/application/sections/watch_status_page/components/execution_history_panel.tsx
@@ -101,7 +101,7 @@ export const ExecutionHistoryPanel = () => {
     : '';
 
   const watchHistoryDetailFlyoutId = useGeneratedHtmlId({ prefix: 'watchFlyout' });
-  const watchHistoryErrorDetailsFlyoutTitleId = useGeneratedHtmlId({ prefix: 'watchFlyout' });
+  const watchHistoryErrorDetailsFlyoutTitleId = useGeneratedHtmlId({ prefix: 'watchErrorFlyout' });
 
   if (historyError) {
     return (