test: add e2e for row grouping

playwright/e2e/row-group.spec.ts

@@ -0,0 +1,53 @@
+import { expect, test } from '../support/test-helpers';
+
+test.describe('row grouping', () => {
+  const example = 'row-grouping';
+
+  test(example, async ({ ngx, page }) => {
+    await ngx.visitExample(example);
+
+    await expect(page.getByText('Ethel Price')).toBeVisible();
+    await ngx.runVisualAndA11yTests('default', [
+      // interactive elements< (<a/>, <input/> etc) within table cells are failing
+      {
+        id: 'aria-required-children',
+        enabled: false
+      }
+    ]);
+
+    const groupCheckbox = page.locator('.datatable-group-cell .datatable-checkbox input').first();
+    groupCheckbox.check();
+
+    await expect(page.getByText('4 selected')).toBeVisible();
+
+    await ngx.runVisualAndA11yTests('group-selected', [
+      {
+        id: 'aria-required-children',
+        enabled: false
+      }
+    ]);
+  });
+
+  test(example + ' expand/collapse', async ({ ngx, page }) => {
+    await ngx.visitExample(example);
+
+    await expect(page.getByText('Ethel Price')).toBeVisible();
+    const groupHeader = page.getByTitle('Expand/Collapse Group').first();
+    groupHeader.click();
+    await expect(page.getByText('Ethel Price')).not.toBeVisible();
+    await ngx.runVisualAndA11yTests('group-collapsed', [
+      {
+        id: 'aria-required-children',
+        enabled: false
+      }
+    ]);
+    groupHeader.click();
+    await expect(page.getByText('Ethel Price')).toBeVisible();
+    await ngx.runVisualAndA11yTests('group-expanded', [
+      {
+        id: 'aria-required-children',
+        enabled: false
+      }
+    ]);
+  });
+});

src/app/basic/row-grouping.component.ts

@@ -51,7 +51,7 @@ import {
           >
             <div style="padding-left:5px;height: 100%; display:flex;align-items: center;">
               <a
-                href="#"
+                href="javascript:void(0)"
                 [class.datatable-icon-right]="!expanded"
                 [class.datatable-icon-down]="expanded"
                 title="Expand/Collapse Group"
@@ -87,6 +87,7 @@ import {
                 name="{{ rowIndex }}"
                 value="0"
                 class="expectedpayment"
+                [attr.aria-label]="'ex pay1' + rowIndex"
                 (change)="checkGroup($event, row, rowIndex, group)"
                 [checked]="row.exppayyes === 1"
               />
@@ -98,6 +99,7 @@ import {
                 name="{{ rowIndex }}"
                 value="1"
                 class="expectedpayment2"
+                [attr.aria-label]="'ex pay2' + rowIndex"
                 (change)="checkGroup($event, row, rowIndex, group)"
                 [checked]="row.exppayno === 1"
               />
@@ -109,6 +111,7 @@ import {
                 name="{{ rowIndex }}"
                 value="2"
                 class="expectedpayment3"
+                [attr.aria-label]="'ex pay3' + rowIndex"
                 (change)="checkGroup($event, row, rowIndex, group)"
                 [checked]="row.exppaypending === 1"
               />
@@ -139,6 +142,7 @@ import {
               (blur)="updateValue($event, 'comment', rowIndex)"
               type="text"
               name="comment"
+              aria-label="comment"
               [value]="value"
             />
           </ng-template>