diff --git a/frontend-modern/src/features/truenas/__tests__/TrueNASAlertsTable.test.tsx b/frontend-modern/src/features/truenas/__tests__/TrueNASAlertsTable.test.tsx
index 9f1693007..8249e7867 100644
--- a/frontend-modern/src/features/truenas/__tests__/TrueNASAlertsTable.test.tsx
+++ b/frontend-modern/src/features/truenas/__tests__/TrueNASAlertsTable.test.tsx
@@ -58,11 +58,16 @@ describe('TrueNASAlertsTable', () => {
const row = screen.getByText('Device /dev/sdc has SMART test failures.').closest('tr');
expect(row).toBeTruthy();
- expect(row).toHaveAttribute('aria-expanded', 'false');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute(
+ 'aria-expanded',
+ 'false',
+ );
await fireEvent.click(row!);
- expect(row).toHaveAttribute('aria-expanded', 'true');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute('aria-expanded', 'true');
expect(screen.queryByTestId('resource-detail-drawer')).not.toBeInTheDocument();
const detail = within(screen.getByTestId('truenas-alert-detail'));
expect(detail.getByText('Alert detail')).toBeInTheDocument();
@@ -83,6 +88,10 @@ describe('TrueNASAlertsTable', () => {
await fireEvent.click(detail.getByRole('button', { name: /^Collapse .* details$/ }));
expect(screen.queryByTestId('truenas-alert-detail')).not.toBeInTheDocument();
- expect(row).toHaveAttribute('aria-expanded', 'false');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute(
+ 'aria-expanded',
+ 'false',
+ );
});
});
diff --git a/frontend-modern/src/features/truenas/__tests__/TrueNASProtectionTable.test.tsx b/frontend-modern/src/features/truenas/__tests__/TrueNASProtectionTable.test.tsx
index 269cbfd16..f927b6a05 100644
--- a/frontend-modern/src/features/truenas/__tests__/TrueNASProtectionTable.test.tsx
+++ b/frontend-modern/src/features/truenas/__tests__/TrueNASProtectionTable.test.tsx
@@ -102,11 +102,16 @@ describe('TrueNASProtectionTable', () => {
const row = screen.getByText('tank/apps').closest('tr');
expect(row).toBeTruthy();
- expect(row).toHaveAttribute('aria-expanded', 'false');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute(
+ 'aria-expanded',
+ 'false',
+ );
await fireEvent.click(row!);
- expect(row).toHaveAttribute('aria-expanded', 'true');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute('aria-expanded', 'true');
const detail = within(screen.getByTestId('truenas-protection-detail'));
expect(detail.getByText('Protection detail')).toBeInTheDocument();
expect(detail.getByText('Protection')).toBeInTheDocument();
@@ -119,6 +124,10 @@ describe('TrueNASProtectionTable', () => {
await fireEvent.click(detail.getByRole('button', { name: /^Collapse .* details$/ }));
expect(screen.queryByTestId('truenas-protection-detail')).not.toBeInTheDocument();
- expect(row).toHaveAttribute('aria-expanded', 'false');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute(
+ 'aria-expanded',
+ 'false',
+ );
});
});
diff --git a/frontend-modern/src/features/truenas/__tests__/TrueNASServicesTable.test.tsx b/frontend-modern/src/features/truenas/__tests__/TrueNASServicesTable.test.tsx
index e5890ed0a..8a26157cf 100644
--- a/frontend-modern/src/features/truenas/__tests__/TrueNASServicesTable.test.tsx
+++ b/frontend-modern/src/features/truenas/__tests__/TrueNASServicesTable.test.tsx
@@ -42,11 +42,16 @@ describe('TrueNASServicesTable', () => {
const row = screen.getByText('SMB').closest('tr');
expect(row).toBeTruthy();
- expect(row).toHaveAttribute('aria-expanded', 'false');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute(
+ 'aria-expanded',
+ 'false',
+ );
await fireEvent.click(row!);
- expect(row).toHaveAttribute('aria-expanded', 'true');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute('aria-expanded', 'true');
const detail = within(screen.getByTestId('truenas-service-detail'));
expect(detail.getByText('Service detail')).toBeInTheDocument();
expect(detail.getByText('Service')).toBeInTheDocument();
@@ -61,6 +66,10 @@ describe('TrueNASServicesTable', () => {
await fireEvent.click(detail.getByRole('button', { name: `Collapse ${rows[0].id} details` }));
expect(screen.queryByTestId('truenas-service-detail')).not.toBeInTheDocument();
- expect(row).toHaveAttribute('aria-expanded', 'false');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute(
+ 'aria-expanded',
+ 'false',
+ );
});
});
diff --git a/frontend-modern/src/features/vmware/VsphereActivityTable.tsx b/frontend-modern/src/features/vmware/VsphereActivityTable.tsx
index 32cb1ea25..34a21c61c 100644
--- a/frontend-modern/src/features/vmware/VsphereActivityTable.tsx
+++ b/frontend-modern/src/features/vmware/VsphereActivityTable.tsx
@@ -377,12 +377,8 @@ export const VsphereActivityTable: Component<{
<>
drawer.toggle(activity)}
- onKeyDown={drawer.handleActivationKey(activity)}
- tabIndex={0}
>
diff --git a/frontend-modern/src/features/vmware/VsphereAlertsTable.tsx b/frontend-modern/src/features/vmware/VsphereAlertsTable.tsx
index 027e90367..b3e5434ba 100644
--- a/frontend-modern/src/features/vmware/VsphereAlertsTable.tsx
+++ b/frontend-modern/src/features/vmware/VsphereAlertsTable.tsx
@@ -217,12 +217,8 @@ export const VsphereAlertsTable: Component<{
<>
drawer.toggle(incident)}
- onKeyDown={drawer.handleActivationKey(incident)}
- tabIndex={0}
>
diff --git a/frontend-modern/src/features/vmware/VsphereDatastoresTable.tsx b/frontend-modern/src/features/vmware/VsphereDatastoresTable.tsx
index a51288568..9f25ff78f 100644
--- a/frontend-modern/src/features/vmware/VsphereDatastoresTable.tsx
+++ b/frontend-modern/src/features/vmware/VsphereDatastoresTable.tsx
@@ -282,12 +282,8 @@ export const VsphereDatastoresTable: Component<{
<>
drawer.toggle(datastore)}
- onKeyDown={drawer.handleActivationKey(datastore)}
- tabIndex={0}
>
diff --git a/frontend-modern/src/features/vmware/VsphereHostsTable.tsx b/frontend-modern/src/features/vmware/VsphereHostsTable.tsx
index 218bbf3d2..268cb4cc1 100644
--- a/frontend-modern/src/features/vmware/VsphereHostsTable.tsx
+++ b/frontend-modern/src/features/vmware/VsphereHostsTable.tsx
@@ -385,12 +385,8 @@ export const VsphereHostsTable: Component<{
<>
drawer.toggle(host)}
- onKeyDown={drawer.handleActivationKey(host)}
- tabIndex={0}
>
diff --git a/frontend-modern/src/features/vmware/VsphereNetworksTable.tsx b/frontend-modern/src/features/vmware/VsphereNetworksTable.tsx
index 8ea1ae853..f3d25e5c5 100644
--- a/frontend-modern/src/features/vmware/VsphereNetworksTable.tsx
+++ b/frontend-modern/src/features/vmware/VsphereNetworksTable.tsx
@@ -247,12 +247,8 @@ export const VsphereNetworksTable: Component<{
<>
drawer.toggle(network)}
- onKeyDown={drawer.handleActivationKey(network)}
- tabIndex={0}
>
diff --git a/frontend-modern/src/features/vmware/__tests__/VsphereActivityTable.test.tsx b/frontend-modern/src/features/vmware/__tests__/VsphereActivityTable.test.tsx
index 6fe4f53a6..7c4d27f89 100644
--- a/frontend-modern/src/features/vmware/__tests__/VsphereActivityTable.test.tsx
+++ b/frontend-modern/src/features/vmware/__tests__/VsphereActivityTable.test.tsx
@@ -107,11 +107,16 @@ describe('VsphereActivityTable', () => {
expect(screen.getByText('administrator@vsphere.local')).toBeInTheDocument();
const row = screen.getByText('Reconfigure virtual machine').closest('tr');
- expect(row).toHaveAttribute('aria-expanded', 'false');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute(
+ 'aria-expanded',
+ 'false',
+ );
await fireEvent.click(row!);
- expect(row).toHaveAttribute('aria-expanded', 'true');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute('aria-expanded', 'true');
const detail = within(screen.getByTestId('vsphere-activity-detail'));
expect(detail.getByText('vSphere activity detail')).toBeInTheDocument();
expect(detail.getByText('Managed object')).toBeInTheDocument();
@@ -124,6 +129,10 @@ describe('VsphereActivityTable', () => {
await fireEvent.click(detail.getByRole('button', { name: /^Collapse .* details$/ }));
expect(screen.queryByTestId('vsphere-activity-detail')).not.toBeInTheDocument();
- expect(row).toHaveAttribute('aria-expanded', 'false');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute(
+ 'aria-expanded',
+ 'false',
+ );
});
});
diff --git a/frontend-modern/src/features/vmware/__tests__/VsphereAlertsTable.test.tsx b/frontend-modern/src/features/vmware/__tests__/VsphereAlertsTable.test.tsx
index 6a91c6f3a..81c10176d 100644
--- a/frontend-modern/src/features/vmware/__tests__/VsphereAlertsTable.test.tsx
+++ b/frontend-modern/src/features/vmware/__tests__/VsphereAlertsTable.test.tsx
@@ -105,11 +105,16 @@ describe('VsphereAlertsTable', () => {
const row = screen
.getByText('Host host-101 has VMware alarm Host connection and power state (red)')
.closest('tr');
- expect(row).toHaveAttribute('aria-expanded', 'false');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute(
+ 'aria-expanded',
+ 'false',
+ );
await fireEvent.click(row!);
- expect(row).toHaveAttribute('aria-expanded', 'true');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute('aria-expanded', 'true');
const detail = within(screen.getByTestId('vsphere-alert-detail'));
expect(detail.getByText('vSphere health detail')).toBeInTheDocument();
expect(detail.getByText('Managed object')).toBeInTheDocument();
@@ -122,6 +127,10 @@ describe('VsphereAlertsTable', () => {
await fireEvent.click(detail.getByRole('button', { name: /^Collapse .* details$/ }));
expect(screen.queryByTestId('vsphere-alert-detail')).not.toBeInTheDocument();
- expect(row).toHaveAttribute('aria-expanded', 'false');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute(
+ 'aria-expanded',
+ 'false',
+ );
});
});
diff --git a/frontend-modern/src/features/vmware/__tests__/VsphereDatastoresTable.test.tsx b/frontend-modern/src/features/vmware/__tests__/VsphereDatastoresTable.test.tsx
index 017a79f70..6af1cc036 100644
--- a/frontend-modern/src/features/vmware/__tests__/VsphereDatastoresTable.test.tsx
+++ b/frontend-modern/src/features/vmware/__tests__/VsphereDatastoresTable.test.tsx
@@ -85,10 +85,15 @@ describe('VsphereDatastoresTable', () => {
expect(screen.getAllByTestId('stacked-disk-bar').length).toBeGreaterThan(0);
const row = screen.getByText('nvme-primary').closest('tr');
- expect(row).toHaveAttribute('aria-expanded', 'false');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute(
+ 'aria-expanded',
+ 'false',
+ );
await fireEvent.click(row!);
- expect(row).toHaveAttribute('aria-expanded', 'true');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute('aria-expanded', 'true');
});
});
diff --git a/frontend-modern/src/features/vmware/__tests__/VsphereNetworksTable.test.tsx b/frontend-modern/src/features/vmware/__tests__/VsphereNetworksTable.test.tsx
index e86535323..b5ca05683 100644
--- a/frontend-modern/src/features/vmware/__tests__/VsphereNetworksTable.test.tsx
+++ b/frontend-modern/src/features/vmware/__tests__/VsphereNetworksTable.test.tsx
@@ -75,10 +75,15 @@ describe('VsphereNetworksTable', () => {
expect(screen.getByText('warehouse-api-01, etl-batch-01')).toBeInTheDocument();
const row = screen.getByText('VM Network').closest('tr');
- expect(row).toHaveAttribute('aria-expanded', 'false');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute(
+ 'aria-expanded',
+ 'false',
+ );
await fireEvent.click(row!);
- expect(row).toHaveAttribute('aria-expanded', 'true');
+ expect(row).not.toHaveAttribute('aria-expanded');
+ expect(row?.querySelector('[data-row-action="true"]')).toHaveAttribute('aria-expanded', 'true');
});
});
diff --git a/tests/integration/tests/83-product-trust-accessibility.spec.ts b/tests/integration/tests/83-product-trust-accessibility.spec.ts
index 4c19429fe..8022ef4c3 100644
--- a/tests/integration/tests/83-product-trust-accessibility.spec.ts
+++ b/tests/integration/tests/83-product-trust-accessibility.spec.ts
@@ -206,6 +206,45 @@ test("representative authenticated surfaces have no automatically detectable WCA
}
});
+test("populated platform tables expose one named disclosure control per resource", async ({
+ page,
+}) => {
+ await page.emulateMedia({ reducedMotion: "reduce" });
+
+ for (const viewport of [
+ { width: 1280, height: 800 },
+ { width: 390, height: 844 },
+ ]) {
+ await page.setViewportSize(viewport);
+ await page.goto("/truenas/overview", { waitUntil: "domcontentloaded" });
+
+ const row = page.locator("[data-truenas-system-row]").first();
+ await expect(row).toBeVisible({ timeout: 30_000 });
+ await expect(row).not.toHaveAttribute("tabindex");
+ await expect(row).not.toHaveAttribute("aria-expanded");
+ await expect(row).not.toHaveAttribute("aria-controls");
+
+ await expect(row.getByRole("button", { name: /Expand details for/ })).toBeAttached();
+ const disclosure = row.locator('button[data-row-action="true"]').first();
+ const detailRowId = await disclosure.getAttribute("aria-controls");
+ expect(detailRowId).toBeTruthy();
+
+ await disclosure.focus();
+ await page.keyboard.press("Enter");
+ await expect(disclosure).toHaveAttribute("aria-expanded", "true");
+ await expect(page.locator(`#${detailRowId}`)).toBeVisible();
+
+ await page.keyboard.press("Space");
+ await expect(disclosure).toHaveAttribute("aria-expanded", "false");
+
+ const rowBox = await row.boundingBox();
+ expect(rowBox).not.toBeNull();
+ await row.click({ position: { x: Math.min(30, rowBox!.width / 2), y: rowBox!.height / 2 } });
+ await expect(disclosure).toHaveAttribute("aria-expanded", "true");
+ expect(await scanForWcagViolations(page)).toEqual([]);
+ }
+});
+
test("the logged-out entry surface has no automatically detectable WCAG A/AA violations", async ({
browser,
}, testInfo) => {