mirror of
https://github.com/rcourtman/Pulse.git
synced 2026-09-10 10:35:51 +00:00
Name infrastructure dialogs from visible context
Change-source: pulse-maintainer
This commit is contained in:
@@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user