diff --git a/e2e/components/Slug/Slug-test.avt.e2e.js b/e2e/components/Slug/Slug-test.avt.e2e.js new file mode 100644 index 000000000000..1213810067c7 --- /dev/null +++ b/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'); + }); +}); diff --git a/e2e/components/Slug/Slug-test.e2e.js b/e2e/components/Slug/Slug-test.e2e.js new file mode 100644 index 000000000000..de3d14949c48 --- /dev/null +++ b/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, + }); + }); + }); + }); +}); diff --git a/packages/react/src/components/Slug/index.js b/packages/react/src/components/Slug/index.js index 87c5808624d0..40d3c00b3251 100644 --- a/packages/react/src/components/Slug/index.js +++ b/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 (