Name infrastructure dialogs from visible context

Change-source: pulse-maintainer
This commit is contained in:
pulse-triage[bot]
2026-09-01 12:03:20 +01:00
parent feafe5b8cb
commit 9025ea91a2
3 changed files with 55 additions and 6 deletions
@@ -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"
@@ -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();
@@ -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();
}
}
});