From 9025ea91a2caabaa9b6ff3ece53ee8b7015e40fa Mon Sep 17 00:00:00 2001
From: "pulse-triage[bot]"
 <249995291+pulse-triage[bot]@users.noreply.github.com>
Date: Tue, 1 Sep 2026 12:03:20 +0100
Subject: [PATCH] Name infrastructure dialogs from visible context

Change-source: pulse-maintainer
---
 .../Settings/InfrastructureWorkspace.tsx      | 30 +++++++++++++++----
 .../InfrastructureWorkspace.test.tsx          | 11 +++++++
 .../83-product-trust-accessibility.spec.ts    | 20 +++++++++++++
 3 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/frontend-modern/src/components/Settings/InfrastructureWorkspace.tsx b/frontend-modern/src/components/Settings/InfrastructureWorkspace.tsx
index e6c3bfc89..d9fb77e75 100644
--- a/frontend-modern/src/components/Settings/InfrastructureWorkspace.tsx
+++ b/frontend-modern/src/components/Settings/InfrastructureWorkspace.tsx
@@ -80,6 +80,11 @@ interface AgentUninstallCommands {
   windows: string;
 }
 
+const ADD_DIALOG_TITLE_ID = 'infrastructure-add-dialog-title';
+const ADD_DIALOG_DESCRIPTION_ID = 'infrastructure-add-dialog-description';
+const EDIT_DIALOG_TITLE_ID = 'infrastructure-edit-dialog-title';
+const EDIT_DIALOG_DESCRIPTION_ID = 'infrastructure-edit-dialog-description';
+
 const ADD_STEP_TO_TYPE: Record<ManagedAddTypeStep, ConnectionType> = {
   agent: 'agent',
   'linux-host': 'agent',
@@ -1020,14 +1025,19 @@ const InfrastructureWorkspaceContent: Component<InfrastructureWorkspaceProps> =
           <Dialog
             isOpen={true}
             onClose={closeAddFlow}
-            ariaLabel={addDialogTitle()}
+            ariaLabelledBy={ADD_DIALOG_TITLE_ID}
+            ariaDescribedBy={ADD_DIALOG_DESCRIPTION_ID}
             panelClass={isAgentDialog() ? 'max-w-6xl' : 'max-w-5xl'}
           >
             <div class="flex h-full min-h-0 flex-col">
               <div class="flex items-start justify-between gap-4 border-b border-border bg-surface-alt px-4 py-4 sm:px-6">
                 <div class="space-y-1">
-                  <h2 class="text-base font-semibold text-base-content">{addDialogTitle()}</h2>
-                  <p class="text-sm text-muted">{addDialogDescription()}</p>
+                  <h2 id={ADD_DIALOG_TITLE_ID} class="text-base font-semibold text-base-content">
+                    {addDialogTitle()}
+                  </h2>
+                  <p id={ADD_DIALOG_DESCRIPTION_ID} class="text-sm text-muted">
+                    {addDialogDescription()}
+                  </p>
                 </div>
                 <Button
                   type="button"
@@ -1090,14 +1100,22 @@ const InfrastructureWorkspaceContent: Component<InfrastructureWorkspaceProps> =
               <Dialog
                 isOpen={true}
                 onClose={closeEditFlow}
-                ariaLabel={editDialogTitle()}
+                ariaLabelledBy={EDIT_DIALOG_TITLE_ID}
+                ariaDescribedBy={EDIT_DIALOG_DESCRIPTION_ID}
                 panelClass={connection.type === 'agent' ? 'max-w-5xl' : 'max-w-5xl'}
               >
                 <div class="flex h-full min-h-0 flex-col">
                   <div class="flex items-start justify-between gap-4 border-b border-border bg-surface-alt px-4 py-4 sm:px-6">
                     <div class="space-y-1">
-                      <h2 class="text-base font-semibold text-base-content">{editDialogTitle()}</h2>
-                      <p class="text-sm text-muted">{editDialogDescription()}</p>
+                      <h2
+                        id={EDIT_DIALOG_TITLE_ID}
+                        class="text-base font-semibold text-base-content"
+                      >
+                        {editDialogTitle()}
+                      </h2>
+                      <p id={EDIT_DIALOG_DESCRIPTION_ID} class="text-sm text-muted">
+                        {editDialogDescription()}
+                      </p>
                     </div>
                     <Button
                       type="button"
diff --git a/frontend-modern/src/components/Settings/__tests__/InfrastructureWorkspace.test.tsx b/frontend-modern/src/components/Settings/__tests__/InfrastructureWorkspace.test.tsx
index 3c98567cc..48ee0d181 100644
--- a/frontend-modern/src/components/Settings/__tests__/InfrastructureWorkspace.test.tsx
+++ b/frontend-modern/src/components/Settings/__tests__/InfrastructureWorkspace.test.tsx
@@ -868,6 +868,12 @@ describe('InfrastructureWorkspace', () => {
 
     await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
     const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveAccessibleName('Add infrastructure');
+    expect(dialog).toHaveAccessibleDescription(
+      'Choose the system, device, host, or service you want Pulse to monitor.',
+    );
+    expect(dialog).toHaveAttribute('aria-labelledby', 'infrastructure-add-dialog-title');
+    expect(dialog).toHaveAttribute('aria-describedby', 'infrastructure-add-dialog-description');
     expect(screen.getAllByText('Add infrastructure').length).toBeGreaterThan(0);
     expect(
       screen.getByText('Choose the system, device, host, or service you want Pulse to monitor.'),
@@ -984,6 +990,11 @@ describe('InfrastructureWorkspace', () => {
     fireEvent.click(manageButton);
 
     await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveAccessibleName('Manage zeus');
+    expect(dialog).toHaveAccessibleDescription('Proxmox VE · https://10.0.0.1:8006');
+    expect(dialog).toHaveAttribute('aria-labelledby', 'infrastructure-edit-dialog-title');
+    expect(dialog).toHaveAttribute('aria-describedby', 'infrastructure-edit-dialog-description');
     expect(screen.getByText('Manage zeus')).toBeInTheDocument();
     expect(screen.getByTestId('proxmox-section')).toBeInTheDocument();
 
diff --git a/tests/integration/tests/83-product-trust-accessibility.spec.ts b/tests/integration/tests/83-product-trust-accessibility.spec.ts
index b177ec8a2..27cefbc5d 100644
--- a/tests/integration/tests/83-product-trust-accessibility.spec.ts
+++ b/tests/integration/tests/83-product-trust-accessibility.spec.ts
@@ -296,6 +296,7 @@ test("representative authenticated surfaces have no automatically detectable WCA
   await page.emulateMedia({ reducedMotion: "reduce" });
   const surfaces = [
     { route: "/alerts/overview", heading: "Alerts Overview" },
+    { route: "/settings/infrastructure", heading: "Infrastructure" },
     { route: "/settings/system-general", heading: "General" },
     { route: "/patrol", heading: "Patrol" },
   ] as const;
@@ -313,6 +314,25 @@ test("representative authenticated surfaces have no automatically detectable WCA
       await scanForUnexpectedReducedMotion(page),
       `${surface.route} should complete non-essential motion immediately when reduced motion is requested`,
     ).toEqual([]);
+
+    if (surface.route === "/settings/infrastructure") {
+      const addButton = page.getByRole("button", {
+        name: "Add infrastructure",
+      });
+      await addButton.click();
+      const dialog = page.getByRole("dialog", { name: "Add infrastructure" });
+      await expect(dialog).toHaveAccessibleDescription(
+        "Choose the system, device, host, or service you want Pulse to monitor.",
+      );
+      await expect(page.locator(":focus")).toHaveAttribute(
+        "aria-label",
+        "Close add infrastructure dialog",
+      );
+      expect(await scanForWcagViolations(page)).toEqual([]);
+      await page.keyboard.press("Escape");
+      await expect(dialog).toBeHidden();
+      await expect(addButton).toBeFocused();
+    }
   }
 });