[AVT] - StructuredList test (#14375)

* test: added avt test

* test: added AVT tests

* fix: added aria-label

* fix: changed aria-busy position

* test: fixed version in esbuild

* test: sanpshot e2e updated

* test: updated snapshot

e2e/components/StructuredList/StructuredList-test.avt.e2e.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+
+test.describe('StructuredList @avt', () => {
+  test('accessibility-checker', async ({ page }) => {
+    await visitStory(page, {
+      component: 'StructuredList',
+      id: 'components-structuredlist--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('StructuredList');
+  });
+
+  test('accessibility-checker selection', async ({ page }) => {
+    await visitStory(page, {
+      component: 'StructuredList',
+      id: 'components-structuredlist--selection',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('StructuredList-selection');
+  });
+
+  test('accessibility-checker skeleton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'StructuredList',
+      id: 'components-structuredlist--skeleton',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('StructuredList-skeleton');
+  });
+
+  test('accessibility-checker keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'StructuredList',
+      id: 'components-structuredlist--selection',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    await expect(page.getByRole('table')).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(page.locator('input#row-0')).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    const row = page.getByRole('row');
+    await expect(row.nth(2)).toHaveClass(/cds--structured-list-row--selected/);
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await expect(page.locator('input#row-0')).toBeFocused();
+
+    await expect(page).toHaveNoACViolations('StructuredList-keyboardnav');
+  });
+
+  test('accessibility-checker mouse interaction', async ({ page }) => {
+    await visitStory(page, {
+      component: 'StructuredList',
+      id: 'components-structuredlist--selection',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    await expect(page.getByRole('table')).toBeVisible();
+    page.locator('input#row-1').click({ force: true });
+    const row = page.getByRole('row');
+    await expect(row.nth(2)).toHaveClass(/cds--structured-list-row--selected/);
+
+    await expect(page).toHaveNoACViolations('StructuredList-mouse-interaction');
+  });
+});

e2e/components/StructuredList/StructuredList-test.e2e.js

@@ -7,9 +7,9 @@
 
 'use strict';
 
-const { expect, test } = require('@playwright/test');
+const { test } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
-const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+const { snapshotStory } = require('../../test-utils/storybook');
 
 test.describe('StructuredList', () => {
   themes.forEach((theme) => {
@@ -31,15 +31,4 @@ test.describe('StructuredList', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'StructuredList',
-      id: 'components-structuredlist--default',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('StructuredList');
-  });
 });

packages/react/src/components/StructuredList/StructuredList.js

@@ -173,12 +173,13 @@ export function StructuredListRow(props) {
   });
 
   return head ? (
-    <div role="row" {...other} className={classes}>
+    <div role="row" {...other} className={classes} aria-busy="true">
       {children}
     </div>
   ) : (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     <div
+      aria-busy="true"
       {...other}
       role="row"
       className={classes}

packages/react/src/components/StructuredList/StructuredList.stories.js

@@ -119,6 +119,7 @@ export const Selection = (args) => {
           value={`row-${i}`}
           title={`row-${i}`}
           name="row-0"
+          aria-label={`row-${i}`}
         />
         <StructuredListCell>
           <CheckmarkFilled
@@ -137,7 +138,6 @@ export const Selection = (args) => {
           <StructuredListCell head>ColumnA</StructuredListCell>
           <StructuredListCell head>ColumnB</StructuredListCell>
           <StructuredListCell head>ColumnC</StructuredListCell>
-          <StructuredListCell head>{''}</StructuredListCell>
         </StructuredListRow>
       </StructuredListHead>
       <StructuredListBody>