From 23fa739a13a7f41f994c3008ce9be6514dc4c374 Mon Sep 17 00:00:00 2001
From: Tom Ratcliffe <tom.ratcliffe@grafana.com>
Date: Mon, 7 Apr 2025 11:01:05 +0100
Subject: [PATCH] Alerting: Link annotations label and inputs together
 (#103473)

---
 .../rule-editor/AnnotationHeaderField.tsx     |  4 ++-
 .../rule-editor/AnnotationsStep.test.tsx      | 35 ++++++-------------
 .../rule-editor/AnnotationsStep.tsx           |  2 ++
 3 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx
index 02b8087cf64..7f6ed397714 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx
@@ -12,17 +12,19 @@ const AnnotationHeaderField = ({
   annotations,
   annotation,
   index,
+  labelId,
 }: {
   annotationField: FieldArrayWithId<RuleFormValues, 'annotations', 'id'>;
   annotations: Array<{ key: string; value: string }>;
   annotation: Annotation;
   index: number;
+  labelId: string;
 }) => {
   const { control } = useFormContext<RuleFormValues>();
 
   return (
     <Stack direction="column" gap={0}>
-      <label>
+      <label htmlFor={labelId}>
         {
           <Controller
             name={`annotations.${index}.key`}
diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.test.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.test.tsx
index 9f1067761ca..a8f73230c21 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.test.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.test.tsx
@@ -1,4 +1,3 @@
-import userEvent from '@testing-library/user-event';
 import { FormProvider, useForm } from 'react-hook-form';
 import { render, screen, within } from 'test/test-utils';
 import { byRole, byTestId } from 'testing-library-selector';
@@ -53,18 +52,16 @@ describe('AnnotationsField', function () {
     const annotationElements = ui.annotationKeys.getAll();
 
     expect(annotationElements).toHaveLength(3);
-    expect(annotationElements[0]).toHaveTextContent('Summary');
-    expect(annotationElements[1]).toHaveTextContent('Description');
-    expect(annotationElements[2]).toHaveTextContent('Runbook URL');
+    expect(screen.getByLabelText(/Summary/)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Description/)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Runbook URL/)).toBeInTheDocument();
   });
 
   describe('Dashboard and panel picker', function () {
     it('should display dashboard and panel selector when select button clicked', async function () {
       mockDashboardApi(server).search([]);
 
-      const user = userEvent.setup();
-
-      render(<FormWrapper />);
+      const { user } = render(<FormWrapper />);
 
       await user.click(ui.setDashboardButton.get());
 
@@ -88,9 +85,7 @@ describe('AnnotationsField', function () {
         })
       );
 
-      const user = userEvent.setup();
-
-      render(<FormWrapper />);
+      const { user } = render(<FormWrapper />);
 
       await user.click(ui.setDashboardButton.get());
       expect(ui.dashboardPicker.confirmButton.get()).toBeDisabled();
@@ -118,9 +113,7 @@ describe('AnnotationsField', function () {
         })
       );
 
-      const user = userEvent.setup();
-
-      render(<FormWrapper formValues={{ annotations: [] }} />);
+      const { user } = render(<FormWrapper formValues={{ annotations: [] }} />);
 
       await user.click(ui.setDashboardButton.get());
       await user.click(await screen.findByTitle('My dashboard'));
@@ -154,9 +147,7 @@ describe('AnnotationsField', function () {
         })
       );
 
-      const user = userEvent.setup();
-
-      render(<FormWrapper />);
+      const { user } = render(<FormWrapper />);
 
       await user.click(ui.setDashboardButton.get());
       expect(ui.dashboardPicker.confirmButton.get()).toBeDisabled();
@@ -189,9 +180,7 @@ describe('AnnotationsField', function () {
         })
       );
 
-      const user = userEvent.setup();
-
-      render(<FormWrapper />);
+      const { user } = render(<FormWrapper />);
 
       await user.click(ui.setDashboardButton.get());
       expect(ui.dashboardPicker.confirmButton.get()).toBeDisabled();
@@ -233,9 +222,7 @@ describe('AnnotationsField', function () {
         })
       );
 
-      const user = userEvent.setup();
-
-      render(
+      const { user } = render(
         <FormWrapper
           formValues={{
             annotations: [
@@ -290,9 +277,7 @@ describe('AnnotationsField', function () {
       })
     );
 
-    const user = userEvent.setup();
-
-    render(<FormWrapper formValues={{ annotations: [] }} />);
+    const { user } = render(<FormWrapper formValues={{ annotations: [] }} />);
 
     await user.click(ui.setDashboardButton.get());
     await user.click(await screen.findByTitle('My dashboard'));
diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
index 56069e878d7..d98ec1341c1 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
@@ -151,6 +151,7 @@ const AnnotationsStep = () => {
                   annotations={annotations}
                   annotation={annotation}
                   index={index}
+                  labelId={`annotation-${index}`}
                 />
                 {selectedDashboardUid && selectedPanelId && annotationField.key === Annotation.dashboardUID && (
                   <DashboardAnnotationField
@@ -175,6 +176,7 @@ const AnnotationsStep = () => {
                     >
                       <ValueInputComponent
                         data-testid={`annotation-value-${index}`}
+                        id={`annotation-${index}`}
                         className={cx(styles.annotationValueInput, { [styles.textarea]: !isUrl })}
                         {...register(`annotations.${index}.value`)}
                         placeholder={