test(Slug): add VRT, AVT tests (#15238)

* test(Slug): add VRT, AVT tests

* test(Slug): test form story

---------

Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>

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

@@ -0,0 +1,50 @@
+/**
+ * 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('Slug @avt', () => {
+  test('@avt-default-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Slug',
+      id: 'experimental-unstable-slug--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Slug');
+  });
+
+  test('@avt-advanced-states open state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Slug',
+      id: 'experimental-unstable-slug--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await expect(page).toHaveNoACViolations('Slug-open');
+  });
+
+  test('@avt-advanced-states ai form', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Slug',
+      id: 'components-form--ai-form',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Slug-form');
+  });
+});

e2e/components/Slug/Slug-test.e2e.js

@@ -0,0 +1,34 @@
+/**
+ * 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 { test } = require('@playwright/test'); // eslint-disable-line
+const { themes } = require('../../test-utils/env');
+const { snapshotStory } = require('../../test-utils/storybook'); // eslint-disable-line
+
+test.describe('Slug', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('default @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Slug',
+          id: 'experimental-unstable-slug--default',
+          theme,
+        });
+      });
+
+      test('slug inside form @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Slug',
+          id: 'components-form--ai-form',
+          theme,
+        });
+      });
+    });
+  });
+});

packages/react/src/components/Slug/index.js

@@ -125,7 +125,9 @@ export const Slug = React.forwardRef(function Slug(
     }
   };
 
-  const ariaLabel = `${aiText} - ${slugLabel}`;
+  const ariaLabel = !aiTextLabel
+    ? `${aiText} - ${slugLabel}`
+    : `${aiText} - ${aiTextLabel}`;
 
   return (
     <div className={slugClasses} ref={ref} id={id}>