diff --git a/semcore/wizard/CHANGELOG.md b/semcore/wizard/CHANGELOG.md index 6812407ab0..57eed1ae07 100644 --- a/semcore/wizard/CHANGELOG.md +++ b/semcore/wizard/CHANGELOG.md @@ -2,7 +2,13 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/). -## [16.2.0] - 2025-10-17 +## [16.2.1] - 2025-11-10 + +### Fixed + +- Disabled `Wizard.Stepper` in `Sidebar` can be focused and activated by keyboard. + +## [16.2.0] - 2025-10-29 ### Changed diff --git a/semcore/wizard/__tests__/wizard.axe-test.tsx b/semcore/wizard/__tests__/wizard.axe-test.tsx index 0632f6ad99..4a91c77d73 100644 --- a/semcore/wizard/__tests__/wizard.axe-test.tsx +++ b/semcore/wizard/__tests__/wizard.axe-test.tsx @@ -1,41 +1,45 @@ import { e2eStandToHtml } from '@semcore/testing-utils/e2e-stand'; import { expect, test, getAccessibilityViolations } from '@semcore/testing-utils/playwright'; - -test.describe('Wizard axe checks', () => { +import type { Page, Locator } from '@semcore/testing-utils/playwright'; +import { loadPage } from '@semcore/testing-utils/shared/helpers'; +import { TAG } from '@semcore/testing-utils/shared/tags'; + +export const locators = { + button: (page: Page, name?: string, index?: number): Locator => { + const base = page.getByRole('button', { name }); + return typeof index === 'number' ? base.nth(index) : base; + }, +}; + +test.describe(`@wizard ${TAG.ACCESSIBILITY}`, () => { test('Base example', async ({ page }) => { - const standPath = 'stories/components/wizard/docs/examples/basic_example.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); + await loadPage(page, 'stories/components/wizard/docs/examples/basic_example.tsx', 'en'); - await page.setContent(htmlContent); await page.keyboard.press('Tab'); await page.keyboard.press('Enter'); - await page.waitForTimeout(100); + await locators.button(page, 'Close').waitFor({ state: 'visible' }); const violations = await getAccessibilityViolations({ page }); expect(violations).toEqual([]); }); test('Custom Step', async ({ page }) => { - const standPath = 'stories/components/wizard/docs/examples/custom_step.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); + await loadPage(page, 'stories/components/wizard/docs/examples/custom_step.tsx', 'en'); - await page.setContent(htmlContent); await page.keyboard.press('Tab'); await page.keyboard.press('Enter'); - await page.waitForTimeout(100); + await locators.button(page, 'Close').waitFor({ state: 'visible' }); const violations = await getAccessibilityViolations({ page }); expect(violations).toEqual([]); }); test('Custom Stepper', async ({ page }) => { - const standPath = 'stories/components/wizard/docs/examples/custom_stepper.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); + await loadPage(page, 'stories/components/wizard/docs/examples/custom_stepper.tsx', 'en'); - await page.setContent(htmlContent); await page.keyboard.press('Tab'); await page.keyboard.press('Enter'); - await page.waitForTimeout(100); + await locators.button(page, 'Close').waitFor({ state: 'visible' }); const violations = await getAccessibilityViolations({ page }); expect(violations).toEqual([]); diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx b/semcore/wizard/__tests__/wizard.browser-test.tsx index 71e42aad29..7fc3dc0c27 100644 --- a/semcore/wizard/__tests__/wizard.browser-test.tsx +++ b/semcore/wizard/__tests__/wizard.browser-test.tsx @@ -1,6 +1,7 @@ -import { e2eStandToHtml } from '@semcore/testing-utils/e2e-stand'; import { expect, test } from '@semcore/testing-utils/playwright'; import type { Page, Locator } from '@semcore/testing-utils/playwright'; +import { loadPage } from '@semcore/testing-utils/shared/helpers'; +import { TAG } from '@semcore/testing-utils/shared/tags'; export const locators = { button: (page: Page, name?: string, index?: number): Locator => { @@ -28,553 +29,182 @@ export const locators = { return typeof index === 'number' ? base.nth(index) : base; }, }; +/* ===================================================== +@visual +Visual states, hover and focus styles, paddings, margins, and snapshots. +===================================================== */ +test.describe(`${TAG.VISUAL}`, () => { + test('Verify Custom step example', { + tag: [ + TAG.PRIORITY_HIGH, + '@wizard', + '@button', + '@input', + '@base-components'], + }, + async ({ page }) => { + await loadPage(page, 'stories/components/wizard/docs/examples/custom_step.tsx', 'en'); -test.describe('Base example', () => { - test('Base example - Attributes and Mouse interactions', async ({ page }) => { - const standPath = 'stories/components/wizard/docs/examples/basic_example.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); - await page.setContent(htmlContent); - - await test.step('Open modal and verify modal attributes', async () => { - await locators.button(page).click(); - await locators.button(page, 'Keywords').waitFor({ state: 'visible' }); - await expect(locators.modal(page)).toHaveAttribute('aria-modal', 'true'); - await expect(locators.modal(page)).toHaveAttribute('tabindex', '-1'); - await expect(locators.modal(page)).toHaveAttribute('step', '1'); - }); - - await test.step('Verify sidebar header has h2 tag', async () => { - const firstChild = locators.sidebar(page).locator('> *').first(); - await expect(firstChild).toHaveJSProperty('tagName', 'H2'); - }); - - await test.step('Verify stepper fist and last tabs initial attributes', async () => { - await expect(locators.stepperTabs(page).first()).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).first()).not.toHaveAttribute('aria-disabled', 'true'); - await expect(locators.stepperTabs(page).first()).toHaveAttribute('tabindex', '0'); - - await expect(locators.stepperTabs(page).nth(1)).not.toHaveAttribute('aria-disabled', 'true'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('tabindex', '-1'); - - await expect(locators.stepperTabs(page).nth(2)).not.toHaveAttribute('aria-disabled', 'true'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('tabindex', '-1'); - }); - - await test.step('Switch to middle step and check stepper attributes', async () => { - await (locators.stepperTabs(page).nth(1)).click(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - }); - - await test.step('Verify content panel attrubutes for the middle step', async () => { - await expect(locators.modal(page)).toHaveAttribute('step', '2'); - }); - - await test.step('Verify navigation buttons for the middle step', async () => { - await expect(locators.button(page, 'Location')).toBeVisible(); - await expect(locators.button(page, 'Location')).toHaveAttribute( - 'aria-label', - 'Back to Location', - ); - await expect(locators.button(page, 'Schedule')).toBeVisible(); - await expect(locators.button(page, 'Schedule')).toHaveAttribute( - 'aria-label', - 'Go to Schedule', - ); - }); - - await test.step('Click on Prev button on middle step and verify 1st step ', async () => { - await locators.button(page, 'Location').click(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.button(page, 'Keywords')).toBeVisible(); - }); - - await test.step('Click on Next button ang go to last step ', async () => { - await locators.button(page, 'Keywords').click(); - await locators.button(page, 'Schedule').click(); - await expect(locators.button(page, 'Keywords')).toBeVisible(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); - }); - - await test.step('Click on Prev button on last step', async () => { - await locators.button(page, 'Keywords').click(); - await expect(locators.button(page, 'Keywords')).not.toBeVisible(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - }); - - await test.step('Verify selected step saved when Close and reopen modal', async () => { - await locators.button(page, 'Close').click(); - await locators.modal(page).waitFor({ state: 'hidden' }); - - await locators.button(page).click(); - await locators.modal(page).waitFor({ state: 'visible' }); - }); - - await test.step('Click on 1st step on stepper and check content', async () => { - await locators.stepperTabs(page).nth(0).click(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.button(page, 'Keywords')).toBeVisible(); - }); - - await test.step('Click on last step on stepper and check content', async () => { - await locators.stepperTabs(page).nth(2).click(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.button(page, 'Keywords')).toBeVisible(); - }); - }); - - test('Base example - Keyboard interactions', async ({ page }) => { - const standPath = 'stories/components/wizard/docs/examples/basic_example.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); - await page.setContent(htmlContent); - - await test.step('Open modal using keyboard and verify focus', async () => { - await page.keyboard.press('Tab'); - await page.keyboard.press('Enter'); - await locators.button(page, 'Keywords').waitFor({ state: 'visible' }); - await expect(locators.button(page, 'Close')).toBeFocused(); - }); - - await test.step('Close modal using keyboard', async () => { - await page.keyboard.press('Enter'); - await locators.button(page, 'Keywords').waitFor({ state: 'hidden' }); - await expect(locators.button(page)).toBeFocused(); - }); - - await test.step('Reopen and close modal with Escape key', async () => { - await page.keyboard.press('Enter'); - await locators.button(page, 'Keywords').waitFor({ state: 'visible' }); - await page.keyboard.press('Escape'); - await locators.button(page, 'Keywords').waitFor({ state: 'hidden' }); - await expect(locators.button(page)).toBeFocused(); - }); - - await test.step('Verify keyboard navigation on 1st page by TAB after modal just opened', async () => { - await page.keyboard.press('Enter'); - await locators.button(page, 'Keywords').waitFor({ state: 'visible' }); - - await expect(locators.button(page, 'Close')).toBeFocused(); - await page.keyboard.press('Tab'); - await expect(locators.stepperTabs(page).nth(0)).toBeFocused(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - await page.keyboard.press('Tab'); - await expect(locators.button(page, 'Keywords')).toBeFocused(); - await page.keyboard.press('Tab'); - await expect(locators.button(page, 'Close')).toBeFocused(); - }); - - await test.step('Verify keyboard navigation by Arrows in Sidebar', async () => { - await page.keyboard.press('Tab'); - await expect(locators.stepperTabs(page).nth(0)).toBeFocused(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - - await page.keyboard.press('ArrowUp'); - await expect(locators.stepperTabs(page).nth(0)).toBeFocused(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - - await page.keyboard.press('ArrowDown'); - await expect(locators.stepperTabs(page).nth(1)).toBeFocused(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - - await page.keyboard.press('ArrowDown'); - await expect(locators.stepperTabs(page).nth(2)).toBeFocused(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - - await page.keyboard.press('ArrowDown'); - await expect(locators.stepperTabs(page).nth(2)).toBeFocused(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - }); - - await test.step('Verify navigation between pages by pressing Steps in sidebar ', async () => { - await page.keyboard.press('Enter'); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.button(page, 'Keywords')).toBeFocused(); - - await page.keyboard.press('Tab'); - await page.keyboard.press('Tab'); - await expect(locators.stepperTabs(page).nth(2)).toBeFocused(); - - await page.keyboard.press('ArrowUp'); - await expect(locators.stepperTabs(page).nth(1)).toBeFocused(); - await page.keyboard.press('ArrowUp'); - await page.keyboard.press('Enter'); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.button(page, 'Keywords')).toBeFocused(); - - await page.keyboard.press('Tab'); - await page.keyboard.press('Tab'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('Space'); - await expect(locators.button(page, 'Location')).toBeFocused(); - }); - - await test.step('Verify navigation between pages by pressing Next and Prev buttons', async () => { - await page.keyboard.press('Enter'); - await expect(locators.button(page, 'Keywords')).toBeFocused(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - - await page.keyboard.press('Enter'); - await expect(locators.button(page, 'Location')).toBeFocused(); - - await page.keyboard.press('Tab'); - await expect(locators.button(page, 'Schedule')).toBeFocused(); - await page.keyboard.press('Shift+Tab'); - await expect(locators.button(page, 'Location')).toBeFocused(); - await page.keyboard.press('Tab'); - await expect(locators.button(page, 'Schedule')).toBeFocused(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - - await page.keyboard.press('Space'); - await expect(locators.button(page, 'Keywords')).toBeFocused(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); - - await page.keyboard.press('Space'); - await expect(locators.button(page, 'Location')).toBeFocused(); - - await page.keyboard.press('Space'); - await expect(locators.button(page, 'Keywords')).toBeFocused(); - }); - }); -}); - -test.describe('Custom step example', () => { - test('Custom step Keyboard interactions', async ({ page }) => { - const standPath = 'stories/components/wizard/docs/examples/custom_step.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); - await page.setContent(htmlContent); - - await test.step('Open modal using keyboard and verify focus', async () => { - await page.keyboard.press('Tab'); - await page.keyboard.press('Enter'); - await locators.button(page, 'Close').waitFor({ state: 'visible' }); - await expect(locators.button(page, 'Close')).toBeFocused(); - }); - - await test.step('Close modal with Escape key', async () => { - await page.keyboard.press('Escape'); - await locators.button(page, 'Close').waitFor({ state: 'hidden' }); - await expect(locators.button(page)).toBeFocused(); - }); - - await test.step('Verify keyboard navigation on 1st page with inputs by TAB after modal just opened', async () => { - await page.keyboard.press('Enter'); - await locators.button(page, 'Close').waitFor({ state: 'visible' }); - await page.keyboard.press('Tab'); - await expect(locators.stepperTabs(page).nth(0)).toBeFocused(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - - await page.keyboard.press('Tab'); - await expect(locators.input(page, 'Keyword 1')).toBeFocused(); - await expect(page).toHaveScreenshot(); - await locators.input(page, 'Keyword 1').fill('Test'); - await page.keyboard.press('Tab'); - await expect(locators.input(page, 'Keyword 2')).toBeFocused(); - await page.keyboard.press('Tab'); - await expect(locators.button(page, 'Location')).toBeFocused(); - - await page.keyboard.press('Tab'); - await expect(locators.button(page, 'Close')).toBeFocused(); - }); - - await test.step('Verify navigation between pages by pressing Steps in sidebar ', async () => { - await page.keyboard.press('Tab'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('Enter'); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - - await expect(locators.button(page, 'Keywords')).toBeFocused(); - await page.keyboard.press('Enter'); - await expect(locators.input(page, 'Keyword 1')).toBeFocused(); - }); - }); - - test('Custom step - Mouse interactions', async ({ page }) => { - const standPath = 'stories/components/wizard/docs/examples/custom_step.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); - await page.setContent(htmlContent); - - await test.step('Open modal using mouse', async () => { - await locators.button(page).click(); - await locators.button(page, 'Close').waitFor({ state: 'visible' }); - }); - - await test.step('Click inside text fields and check focus', async () => { - await locators.input(page, 'Keyword 1').click(); - await expect(locators.input(page, 'Keyword 1')).toBeFocused(); - await locators.input(page, 'Keyword 1').fill('Test'); - await locators.input(page, 'Keyword 2').click(); - await expect(locators.input(page, 'Keyword 2')).toBeFocused(); - }); - - await test.step('Verify navigation between pages by pressing Steps in sidebar ', async () => { - await locators.stepperTabs(page).nth(1).click(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - - await expect(locators.button(page, 'Keywords')).toBeVisible(); - await expect(locators.button(page, 'Schedule')).toBeVisible(); - }); - - await test.step('Verify navigation between pages by pressing Prev/Next steps ', async () => { - await locators.button(page, 'Schedule').click(); - await expect(locators.button(page, 'Location')).toBeVisible(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); - await locators.button(page, 'Location').click(); - await expect(locators.button(page, 'Keywords')).toBeVisible(); - await expect(locators.button(page, 'Schedule')).toBeVisible(); - }); - - await test.step('Back to 1st step and check focus', async () => { - await locators.stepperTabs(page).nth(0).click(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.input(page, 'Keyword 1')).toBeFocused(); - await expect(locators.input(page, 'Keyword 2')).not.toBeFocused(); - }); - }); -}); - -test.describe('Custom stepper example', () => { - test('Custom steper - Change values by mouse', async ({ page }) => { - const standPath = 'stories/components/wizard/docs/examples/custom_stepper.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); - await page.setContent(htmlContent); - - await test.step('Open modal using mouse', async () => { - await locators.button(page).click(); - await locators.button(page, 'Close').waitFor({ state: 'visible' }); - }); - - await test.step('Verify content on the custom stepper', async () => { - await expect(locators.stepperTabs(page).nth(0)).toHaveText(/1.*Personal.*optional/); - await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*Not selected/); - }); - - await test.step('Click inside text fields and check focus', async () => { - await locators.input(page, 'Name').click(); - await expect(locators.input(page, 'Name')).toBeFocused(); - await locators.input(page, 'Name').fill('Test'); - await locators.input(page, 'Email').click(); - await expect(locators.input(page, 'Email')).toBeFocused(); - }); - - await test.step('Verify navigation between pages by pressing Steps in sidebar ', async () => { - await locators.stepperTabs(page).nth(1).click(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - }); - - await test.step('Verify navigation between pages by pressing Prev/Next steps ', async () => { - await locators.button(page, 'Go to ').click(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); - }); - - await test.step('Verify that last step title changes when selecting radio buttons', async () => { - await page.locator('label >> text=Manually').click(); - await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*Manually/); - await page.locator('label >> text=From CSV').click(); - await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*From CSV/); - }); + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + await locators.button(page, 'Close').waitFor({ state: 'visible' }); + await page.keyboard.press('Tab'); - await test.step('Verify value changes on subtitle of the 3rd step after navigation', async () => { - await locators.stepperTabs(page).nth(0).click(); - await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*From CSV/); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - }); + await page.keyboard.press('Tab'); + await expect(page).toHaveScreenshot(); }); - test('Custom Stepper - Change value by Keyboard interactions', async ({ page }) => { - const standPath = 'stories/components/wizard/docs/examples/custom_stepper.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); - await page.setContent(htmlContent); - - await test.step('Open modal using keyboard and verify focus', async () => { - await page.keyboard.press('Tab'); - await page.keyboard.press('Enter'); - await locators.button(page, 'Close').waitFor({ state: 'visible' }); - await page.keyboard.press('Tab'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('Enter'); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(0)).toHaveText(/1.*Personal.*optional/); - await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*Not selected/); - }); - - await test.step('Verify step text changes when selection radios ', async () => { - await expect(page.locator('input[type=\'radio\'][value=\'Manually\']')).toBeFocused(); - await page.keyboard.press('Space'); - await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*Manually/); - await expect(page).toHaveScreenshot(); - await page.keyboard.press('ArrowDown'); - await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*From TXT/); - await expect(page.locator('input[type=\'radio\'][value=\'From TXT\']')).toBeFocused(); - }); + test('Verify Custom Stepper example', { + tag: [ + TAG.PRIORITY_HIGH, + TAG.KEYBOARD, + '@wizard', + '@button', + '@input', + '@radio', + '@base-components'], + }, + async ({ page }) => { + await loadPage(page, 'stories/components/wizard/docs/examples/custom_stepper.tsx', 'en'); - await test.step('Verify last step text not changes navigate to other step', async () => { - await page.keyboard.press('Tab'); - await expect(locators.button(page, 'Back to ')).toHaveText(/Keywords/); - await expect(locators.button(page, 'Back to ')).toBeFocused(); - await page.keyboard.press('Enter'); - await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*From TXT/); - await expect(locators.button(page, 'Back to ')).toHaveText(/Personal/); - await expect(locators.button(page, 'Back to ')).toBeFocused(); - await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); - await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); - await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); - }); + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + await locators.button(page, 'Close').waitFor({ state: 'visible' }); + await page.keyboard.press('Tab'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('Enter'); + await page.keyboard.press('Space'); + await expect(page).toHaveScreenshot(); }); -}); - -test.describe('Steps and buttons states', () => { - test('Steps on hover and focus - expanded state', async ({ page }) => { - const standPath = 'stories/components/wizard/tests/examples/steps_and_buttons_states.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); - await page.setContent(htmlContent); - - await test.step('Hover active', async () => { - await locators.button(page).click(); - await locators.button(page, 'Close').waitFor({ state: 'visible' }); - await locators.stepperTabs(page).nth(0).hover(); - await expect(page).toHaveScreenshot(); - }); - - await test.step('Hover normal', async () => { - await locators.stepperTabs(page).nth(5).hover(); - await expect(page).toHaveScreenshot(); - }); - - await test.step('Hover submenu', async () => { - await locators.stepperTabs(page).nth(1).hover(); - await expect(page).toHaveScreenshot(); - }); - await test.step('Verify disabled state', async () => { - await expect(locators.stepperTabs(page).nth(8)).toHaveAttribute('aria-disabled', 'true'); - // will add more casses after fixing the bug UIK-3191 - }); - - await test.step('Click submenu', async () => { - await locators.stepperTabs(page).nth(1).click(); - await expect(page).toHaveScreenshot(); - }); - - await test.step('Focus on the normal menu', async () => { - await locators.stepperTabs(page).nth(5).click(); - await page.keyboard.press('Tab'); - await page.keyboard.press('Tab'); - await page.keyboard.press('Tab'); - await expect(page).toHaveScreenshot(); - }); - - await test.step('Focus on the submenu', async () => { - await page.keyboard.press('ArrowUp'); - await page.keyboard.press('ArrowUp'); - await expect(page).toHaveScreenshot(); + test.describe('Steps and buttons states', () => { + test('Verify Steps on hover and focus - expanded state', { + tag: [ + TAG.PRIORITY_HIGH, + '@wizard', + '@button', + '@typography', + '@base-components'], + }, + async ({ page }) => { + await loadPage(page, 'stories/components/wizard/tests/examples/steps_and_buttons_states.tsx', 'en'); + + await test.step('Verify active hovered', async () => { + await locators.button(page).click(); + await locators.button(page, 'Close').waitFor({ state: 'visible' }); + await locators.stepperTabs(page).nth(0).hover(); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify normal hovered', async () => { + await locators.stepperTabs(page).nth(5).hover(); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify submenu hovered', async () => { + await locators.stepperTabs(page).nth(1).hover(); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify submenu clicked', async () => { + await locators.stepperTabs(page).nth(1).click(); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify Focus on the normal menu', async () => { + await locators.stepperTabs(page).nth(5).click(); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify Focus on the submenu', async () => { + await page.keyboard.press('ArrowUp'); + await page.keyboard.press('ArrowUp'); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify focus doesnt go on disabled element', async () => { + for (let i = 0; i < 6; i++) await page.keyboard.press('ArrowDown'); + await expect(page).toHaveScreenshot(); + }); + }); + + test('Steps on hover and focus - small state', { + tag: [ + TAG.PRIORITY_HIGH, + '@wizard', + '@button', + '@typography', + '@base-components'], + }, + async ({ page }) => { + await loadPage(page, 'stories/components/wizard/tests/examples/steps_and_buttons_states.tsx', 'en'); + + await page.setViewportSize({ width: 800, height: 600 }); + + await test.step('Open modal and check all states look good', async () => { + await locators.button(page).click(); + await locators.button(page, 'Close').waitFor({ state: 'visible' }); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify active hovered', async () => { + await locators.stepperTabs(page).nth(0).hover(); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify normal hovered', async () => { + await locators.stepperTabs(page).nth(5).hover(); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify submenu hovered', async () => { + await locators.stepperTabs(page).nth(1).hover(); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify submenu clicked', async () => { + await locators.stepperTabs(page).nth(1).click(); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify Focus on the active normal menu', async () => { + await locators.stepperTabs(page).nth(5).click(); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify Focus on the not active submenu', async () => { + await page.keyboard.press('ArrowUp'); + await page.keyboard.press('ArrowUp'); + await expect(page).toHaveScreenshot(); + }); + + await test.step('Verify focus doesnt go on disabled element', async () => { + for (let i = 0; i < 6; i++) await page.keyboard.press('ArrowDown'); + await expect(page).toHaveScreenshot(); + }); }); }); - test('Steps on hover and focus - small state', async ({ page }) => { - const standPath = 'stories/components/wizard/tests/examples/steps_and_buttons_states.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); - - await page.setContent(htmlContent); - - await page.setViewportSize({ width: 800, height: 600 }); - - await test.step('Open modal and check all states look good', async () => { - await locators.button(page).click(); - await locators.button(page, 'Close').waitFor({ state: 'visible' }); - await expect(page).toHaveScreenshot(); - }); - - await test.step('Hover active', async () => { - await locators.stepperTabs(page).nth(0).hover(); - await expect(page).toHaveScreenshot(); - }); - - await test.step('Hover normal', async () => { - await locators.stepperTabs(page).nth(5).hover(); - await expect(page).toHaveScreenshot(); - }); - - await test.step('Hover submenu', async () => { - await locators.stepperTabs(page).nth(1).hover(); - await expect(page).toHaveScreenshot(); - }); - - await test.step('Click submenu', async () => { - await locators.stepperTabs(page).nth(1).click(); - await expect(page).toHaveScreenshot(); - }); - - await test.step('Focus on the active normal menu', async () => { - await locators.stepperTabs(page).nth(5).click(); - await page.keyboard.press('Tab'); - await page.keyboard.press('Tab'); - await page.keyboard.press('Tab'); - await expect(page).toHaveScreenshot(); - }); - - await test.step('Focus on the not active submenu', async () => { - await page.keyboard.press('ArrowUp'); - await page.keyboard.press('ArrowUp'); - await expect(page).toHaveScreenshot(); - }); - }); -}); + test('Verify WizardContent is not right rounded when noSidebar=false', { + tag: [ + TAG.PRIORITY_HIGH, + TAG.MOUSE, + '@wizard', + '@button', + '@input', + '@radio', + '@base-components'], + }, + async ({ page }) => { + await loadPage(page, 'stories/components/wizard/tests/examples/sidebar-as-component.tsx', 'en'); -test.describe('No SideBar', () => { - test('Verify WizardContent is not right rounded when noSidebar=false', async ({ page }) => { - const standPath = 'stories/components/wizard/tests/examples/sidebar-as-component.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); - await page.setContent(htmlContent); await locators.button(page).click(); await locators.button(page, 'Close').waitFor({ state: 'visible' }); const { @@ -598,13 +228,534 @@ test.describe('No SideBar', () => { expect(topRight).toBe('12px'); expect(bottomRight).toBe('12px'); }); + + test('Verify z index in content', { + tag: [ + TAG.PRIORITY_HIGH, + TAG.MOUSE, + '@wizard', + '@button', + '@input', + '@radio', + '@base-components'], + }, + async ({ page, browserName }) => { + await loadPage(page, 'stories/components/wizard/docs/examples/custom_stepper.tsx', 'en'); + + if (browserName == 'firefox') test.skip(); + await page.setViewportSize({ width: 800, height: 600 }); + + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + await locators.button(page, 'Close').waitFor({ state: 'visible' }); + await locators.stepperTabs(page).nth(0).hover(); + await expect(page).toHaveScreenshot(); + }); }); -test.describe('Focus Next Prev', () => { - test('Verify keyboard interaction when Focus Next and Focus Prev are defined', async ({ page }) => { - const standPath = 'stories/components/wizard/tests/examples/focus-next-prev.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); - await page.setContent(htmlContent); +/* ===================================================== +@functional +Keyboard and mouse interactions - no snapshots here. +We verify states, visibility, and attributes. +===================================================== */ +test.describe(`${TAG.FUNCTIONAL}`, () => { + test.describe('Base example', () => { + test('Verify Attributes and Mouse interactions', { + tag: [ + TAG.PRIORITY_HIGH, + TAG.MOUSE, + '@wizard', + '@button', + '@base-components'], + }, + async ({ page }) => { + await loadPage(page, 'stories/components/wizard/docs/examples/basic_example.tsx', 'en'); + + await test.step('Open modal and verify modal attributes', async () => { + await locators.button(page).click(); + await locators.button(page, 'Keywords').waitFor({ state: 'visible' }); + await expect(locators.modal(page)).toHaveAttribute('aria-modal', 'true'); + await expect(locators.modal(page)).toHaveAttribute('tabindex', '-1'); + await expect(locators.modal(page)).toHaveAttribute('step', '1'); + }); + + await test.step('Verify sidebar header has h2 tag', async () => { + const firstChild = locators.sidebar(page).locator('> *').first(); + await expect(firstChild).toHaveJSProperty('tagName', 'H2'); + }); + + await test.step('Verify stepper fist and last tabs initial attributes', async () => { + await expect(locators.stepperTabs(page).first()).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).first()).not.toHaveAttribute('aria-disabled', 'true'); + await expect(locators.stepperTabs(page).first()).toHaveAttribute('tabindex', '0'); + + await expect(locators.stepperTabs(page).nth(1)).not.toHaveAttribute('aria-disabled', 'true'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('tabindex', '-1'); + + await expect(locators.stepperTabs(page).nth(2)).not.toHaveAttribute('aria-disabled', 'true'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('tabindex', '-1'); + }); + + await test.step('Switch to middle step and check stepper attributes', async () => { + await (locators.stepperTabs(page).nth(1)).click(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + }); + + await test.step('Verify content panel attrubutes for the middle step', async () => { + await expect(locators.modal(page)).toHaveAttribute('step', '2'); + }); + + await test.step('Verify navigation buttons for the middle step', async () => { + await expect(locators.button(page, 'Location')).toBeVisible(); + await expect(locators.button(page, 'Location')).toHaveAttribute( + 'aria-label', + 'Back to Location', + ); + await expect(locators.button(page, 'Schedule')).toBeVisible(); + await expect(locators.button(page, 'Schedule')).toHaveAttribute( + 'aria-label', + 'Go to Schedule', + ); + }); + + await test.step('Click on Prev button on middle step and verify 1st step ', async () => { + await locators.button(page, 'Location').click(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.button(page, 'Keywords')).toBeVisible(); + }); + + await test.step('Click on Next button ang go to last step ', async () => { + await locators.button(page, 'Keywords').click(); + await locators.button(page, 'Schedule').click(); + await expect(locators.button(page, 'Keywords')).toBeVisible(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); + }); + + await test.step('Click on Prev button on last step', async () => { + await locators.button(page, 'Keywords').click(); + await expect(locators.button(page, 'Keywords')).not.toBeVisible(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + }); + + await test.step('Verify selected step saved when Close and reopen modal', async () => { + await locators.button(page, 'Close').click(); + await locators.modal(page).waitFor({ state: 'hidden' }); + + await locators.button(page).click(); + await locators.modal(page).waitFor({ state: 'visible' }); + }); + + await test.step('Click on 1st step on stepper and check content', async () => { + await locators.stepperTabs(page).nth(0).click(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.button(page, 'Keywords')).toBeVisible(); + }); + + await test.step('Click on last step on stepper and check content', async () => { + await locators.stepperTabs(page).nth(2).click(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.button(page, 'Keywords')).toBeVisible(); + }); + }); + + test('Verify Keyboard interactions', { + tag: [ + TAG.PRIORITY_HIGH, + TAG.KEYBOARD, + '@wizard', + '@button', + '@base-components'], + }, + async ({ page }) => { + await loadPage(page, 'stories/components/wizard/docs/examples/basic_example.tsx', 'en'); + + await test.step('Open modal using keyboard and verify focus', async () => { + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + await locators.button(page, 'Keywords').waitFor({ state: 'visible' }); + await expect(locators.button(page, 'Close')).toBeFocused(); + }); + + await test.step('Close modal using keyboard', async () => { + await page.keyboard.press('Enter'); + await locators.button(page, 'Keywords').waitFor({ state: 'hidden' }); + await expect(locators.button(page)).toBeFocused(); + }); + + await test.step('Reopen and close modal with Escape key', async () => { + await page.keyboard.press('Enter'); + await locators.button(page, 'Keywords').waitFor({ state: 'visible' }); + await page.keyboard.press('Escape'); + await locators.button(page, 'Keywords').waitFor({ state: 'hidden' }); + await expect(locators.button(page)).toBeFocused(); + }); + + await test.step('Verify keyboard navigation on 1st page by TAB after modal just opened', async () => { + await page.keyboard.press('Enter'); + await locators.button(page, 'Keywords').waitFor({ state: 'visible' }); + + await expect(locators.button(page, 'Close')).toBeFocused(); + await page.keyboard.press('Tab'); + await expect(locators.stepperTabs(page).nth(0)).toBeFocused(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + await page.keyboard.press('Tab'); + await expect(locators.button(page, 'Keywords')).toBeFocused(); + await page.keyboard.press('Tab'); + await expect(locators.button(page, 'Close')).toBeFocused(); + }); + + await test.step('Verify keyboard navigation by Arrows in Sidebar', async () => { + await page.keyboard.press('Tab'); + await expect(locators.stepperTabs(page).nth(0)).toBeFocused(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + + await page.keyboard.press('ArrowUp'); + await expect(locators.stepperTabs(page).nth(0)).toBeFocused(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + + await page.keyboard.press('ArrowDown'); + await expect(locators.stepperTabs(page).nth(1)).toBeFocused(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + + await page.keyboard.press('ArrowDown'); + await expect(locators.stepperTabs(page).nth(2)).toBeFocused(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + + await page.keyboard.press('ArrowDown'); + await expect(locators.stepperTabs(page).nth(2)).toBeFocused(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + }); + + await test.step('Verify navigation between pages by pressing Steps in sidebar ', async () => { + await page.keyboard.press('Enter'); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.button(page, 'Keywords')).toBeFocused(); + + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await expect(locators.stepperTabs(page).nth(2)).toBeFocused(); + + await page.keyboard.press('ArrowUp'); + await expect(locators.stepperTabs(page).nth(1)).toBeFocused(); + await page.keyboard.press('ArrowUp'); + await page.keyboard.press('Enter'); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.button(page, 'Keywords')).toBeFocused(); + + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('Space'); + await expect(locators.button(page, 'Location')).toBeFocused(); + }); + + await test.step('Verify navigation between pages by pressing Next and Prev buttons', async () => { + await page.keyboard.press('Enter'); + await expect(locators.button(page, 'Keywords')).toBeFocused(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + + await page.keyboard.press('Enter'); + await expect(locators.button(page, 'Location')).toBeFocused(); + + await page.keyboard.press('Tab'); + await expect(locators.button(page, 'Schedule')).toBeFocused(); + await page.keyboard.press('Shift+Tab'); + await expect(locators.button(page, 'Location')).toBeFocused(); + await page.keyboard.press('Tab'); + await expect(locators.button(page, 'Schedule')).toBeFocused(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + + await page.keyboard.press('Space'); + await expect(locators.button(page, 'Keywords')).toBeFocused(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); + + await page.keyboard.press('Space'); + await expect(locators.button(page, 'Location')).toBeFocused(); + + await page.keyboard.press('Space'); + await expect(locators.button(page, 'Keywords')).toBeFocused(); + }); + }); + }); + + test.describe('Custom step example', () => { + test('Verify Keyboard interactions', { + tag: [ + TAG.PRIORITY_HIGH, + TAG.KEYBOARD, + '@wizard', + '@button', + '@input', + '@base-components'], + }, + async ({ page }) => { + await loadPage(page, 'stories/components/wizard/docs/examples/custom_step.tsx', 'en'); + + await test.step('Open modal using keyboard and verify focus', async () => { + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + await locators.button(page, 'Close').waitFor({ state: 'visible' }); + await expect(locators.button(page, 'Close')).toBeFocused(); + }); + + await test.step('Close modal with Escape key', async () => { + await page.keyboard.press('Escape'); + await locators.button(page, 'Close').waitFor({ state: 'hidden' }); + await expect(locators.button(page)).toBeFocused(); + }); + + await test.step('Verify keyboard navigation on 1st page with inputs by TAB after modal just opened', async () => { + await page.keyboard.press('Enter'); + await locators.button(page, 'Close').waitFor({ state: 'visible' }); + await page.keyboard.press('Tab'); + await expect(locators.stepperTabs(page).nth(0)).toBeFocused(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + + await page.keyboard.press('Tab'); + await expect(locators.input(page, 'Keyword 1')).toBeFocused(); + // await expect(page).toHaveScreenshot(); + await locators.input(page, 'Keyword 1').fill('Test'); + await page.keyboard.press('Tab'); + await expect(locators.input(page, 'Keyword 2')).toBeFocused(); + await page.keyboard.press('Tab'); + await expect(locators.button(page, 'Location')).toBeFocused(); + + await page.keyboard.press('Tab'); + await expect(locators.button(page, 'Close')).toBeFocused(); + }); + + await test.step('Verify navigation between pages by pressing Steps in sidebar ', async () => { + await page.keyboard.press('Tab'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('Enter'); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + + await expect(locators.button(page, 'Keywords')).toBeFocused(); + await page.keyboard.press('Enter'); + await expect(locators.input(page, 'Keyword 1')).toBeFocused(); + }); + }); + + test('Verify Mouse interactions', { + tag: [ + TAG.PRIORITY_HIGH, + TAG.MOUSE, + '@wizard', + '@button', + '@input', + '@base-components'], + }, + async ({ page }) => { + await loadPage(page, 'stories/components/wizard/docs/examples/custom_step.tsx', 'en'); + + await test.step('Open modal using mouse', async () => { + await locators.button(page).click(); + await locators.button(page, 'Close').waitFor({ state: 'visible' }); + }); + + await test.step('Click inside text fields and check focus', async () => { + await locators.input(page, 'Keyword 1').click(); + await expect(locators.input(page, 'Keyword 1')).toBeFocused(); + await locators.input(page, 'Keyword 1').fill('Test'); + await locators.input(page, 'Keyword 2').click(); + await expect(locators.input(page, 'Keyword 2')).toBeFocused(); + }); + + await test.step('Verify navigation between pages by pressing Steps in sidebar ', async () => { + await locators.stepperTabs(page).nth(1).click(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + + await expect(locators.button(page, 'Keywords')).toBeVisible(); + await expect(locators.button(page, 'Schedule')).toBeVisible(); + }); + + await test.step('Verify navigation between pages by pressing Prev/Next steps ', async () => { + await locators.button(page, 'Schedule').click(); + await expect(locators.button(page, 'Location')).toBeVisible(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); + await locators.button(page, 'Location').click(); + await expect(locators.button(page, 'Keywords')).toBeVisible(); + await expect(locators.button(page, 'Schedule')).toBeVisible(); + }); + + await test.step('Back to 1st step and check focus', async () => { + await locators.stepperTabs(page).nth(0).click(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.input(page, 'Keyword 1')).toBeFocused(); + await expect(locators.input(page, 'Keyword 2')).not.toBeFocused(); + }); + }); + }); + + test.describe('Custom stepper example', () => { + test('Verify Change values by mouse', { + tag: [ + TAG.PRIORITY_HIGH, + TAG.MOUSE, + '@wizard', + '@button', + '@input', + '@radio', + '@base-components'], + }, + async ({ page }) => { + await loadPage(page, 'stories/components/wizard/docs/examples/custom_stepper.tsx', 'en'); + + await test.step('Open modal using mouse', async () => { + await locators.button(page).click(); + await locators.button(page, 'Close').waitFor({ state: 'visible' }); + }); + + await test.step('Verify content on the custom stepper', async () => { + await expect(locators.stepperTabs(page).nth(0)).toHaveText(/1.*Personal.*optional/); + await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*Not selected/); + }); + + await test.step('Click inside text fields and check focus', async () => { + await locators.input(page, 'Name').click(); + await expect(locators.input(page, 'Name')).toBeFocused(); + await locators.input(page, 'Name').fill('Test'); + await locators.input(page, 'Email').click(); + await expect(locators.input(page, 'Email')).toBeFocused(); + }); + + await test.step('Verify navigation between pages by pressing Steps in sidebar ', async () => { + await locators.stepperTabs(page).nth(1).click(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + }); + + await test.step('Verify navigation between pages by pressing Prev/Next steps ', async () => { + await locators.button(page, 'Go to ').click(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); + }); + + await test.step('Verify that last step title changes when selecting radio buttons', async () => { + await page.locator('label >> text=Manually').click(); + await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*Manually/); + await page.locator('label >> text=From CSV').click(); + await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*From CSV/); + }); + + await test.step('Verify value changes on subtitle of the 3rd step after navigation', async () => { + await locators.stepperTabs(page).nth(0).click(); + await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*From CSV/); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + }); + }); + + test('Verify Change value by Keyboard interactions', { + tag: [ + TAG.PRIORITY_HIGH, + TAG.KEYBOARD, + '@wizard', + '@button', + '@input', + '@radio', + '@base-components'], + }, + async ({ page }) => { + await loadPage(page, 'stories/components/wizard/docs/examples/custom_stepper.tsx', 'en'); + + await test.step('Open modal using keyboard and verify focus', async () => { + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + await locators.button(page, 'Close').waitFor({ state: 'visible' }); + await page.keyboard.press('Tab'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('Enter'); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(0)).toHaveText(/1.*Personal.*optional/); + await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*Not selected/); + }); + + await test.step('Verify step text changes when selection radios ', async () => { + await expect(page.locator('input[type=\'radio\'][value=\'Manually\']')).toBeFocused(); + await page.keyboard.press('Space'); + await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*Manually/); + // await expect(page).toHaveScreenshot(); + await page.keyboard.press('ArrowDown'); + await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*From TXT/); + await expect(page.locator('input[type=\'radio\'][value=\'From TXT\']')).toBeFocused(); + }); + + await test.step('Verify last step text not changes navigate to other step', async () => { + await page.keyboard.press('Tab'); + await expect(locators.button(page, 'Back to ')).toHaveText(/Keywords/); + await expect(locators.button(page, 'Back to ')).toBeFocused(); + await page.keyboard.press('Enter'); + await expect(locators.stepperTabs(page).nth(2)).toHaveText(/2\.1.*Import source.*From TXT/); + await expect(locators.button(page, 'Back to ')).toHaveText(/Personal/); + await expect(locators.button(page, 'Back to ')).toBeFocused(); + await expect(locators.stepperTabs(page).nth(0)).toHaveAttribute('aria-selected', 'false'); + await expect(locators.stepperTabs(page).nth(1)).toHaveAttribute('aria-selected', 'true'); + await expect(locators.stepperTabs(page).nth(2)).toHaveAttribute('aria-selected', 'false'); + }); + }); + }); + + test('Verify keyboard interaction when Focus Next and Focus Prev are defined', { + tag: [ + TAG.PRIORITY_HIGH, + TAG.KEYBOARD, + '@wizard', + '@button', + '@typography', + '@radio', + '@base-components'], + }, + async ({ page }) => { + await loadPage(page, 'stories/components/wizard/tests/examples/focus-next-prev.tsx', 'en'); await page.keyboard.press('Tab'); await page.keyboard.press('Enter'); @@ -619,19 +770,3 @@ test.describe('Focus Next Prev', () => { await expect(locators.button(page, 'Keywords')).toBeFocused(); }); }); - -test.describe('z-index', () => { - test('Verify tabs hover elements in content ', async ({ page, browserName }) => { - if (browserName == 'firefox') test.skip(); - const standPath = 'stories/components/wizard/docs/examples/custom_stepper.tsx'; - const htmlContent = await e2eStandToHtml(standPath, 'en'); - await page.setContent(htmlContent); - await page.setViewportSize({ width: 800, height: 600 }); - - await page.keyboard.press('Tab'); - await page.keyboard.press('Enter'); - await locators.button(page, 'Close').waitFor({ state: 'visible' }); - await locators.stepperTabs(page).nth(0).hover(); - await expect(page).toHaveScreenshot(); - }); -}); diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-6-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-7-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-8-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-8-chromium-linux.png new file mode 100644 index 0000000000..c15193c6ba Binary files /dev/null and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-8-chromium-linux.png differ diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-8-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-8-firefox-linux.png new file mode 100644 index 0000000000..27cd5c30ba Binary files /dev/null and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-8-firefox-linux.png differ diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-8-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-8-webkit-linux.png new file mode 100644 index 0000000000..e24241cc05 Binary files /dev/null and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-8-webkit-linux.png differ diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-1-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-1-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-1-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-1-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-1-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-1-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-2-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-2-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-2-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-2-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-2-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-2-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-3-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-3-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-3-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-3-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-3-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-3-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-4-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-4-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-4-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-4-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-4-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-4-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-chromium-linux.png new file mode 100644 index 0000000000..f4935d1306 Binary files /dev/null and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-chromium-linux.png differ diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-5-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-5-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-5-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-5-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-chromium-linux.png new file mode 100644 index 0000000000..dd9e752233 Binary files /dev/null and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-chromium-linux.png differ diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-6-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-6-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-6-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-6-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-chromium-linux.png new file mode 100644 index 0000000000..19a8e28d99 Binary files /dev/null and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-chromium-linux.png differ diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-firefox-linux.png new file mode 100644 index 0000000000..de30a2e5bf Binary files /dev/null and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-firefox-linux.png differ diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-webkit-linux.png new file mode 100644 index 0000000000..67eb871994 Binary files /dev/null and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-webkit-linux.png differ diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Custom-stepper-example-Custom-Stepper---Change-value-by-Keyboard-interactions-1-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-Stepper-example-1-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Custom-stepper-example-Custom-Stepper---Change-value-by-Keyboard-interactions-1-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-Stepper-example-1-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Custom-stepper-example-Custom-Stepper---Change-value-by-Keyboard-interactions-1-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-Stepper-example-1-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Custom-stepper-example-Custom-Stepper---Change-value-by-Keyboard-interactions-1-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-Stepper-example-1-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Custom-stepper-example-Custom-Stepper---Change-value-by-Keyboard-interactions-1-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-Stepper-example-1-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Custom-stepper-example-Custom-Stepper---Change-value-by-Keyboard-interactions-1-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-Stepper-example-1-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Custom-step-example-Custom-step-Keyboard-interactions-1-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Custom-step-example-Custom-step-Keyboard-interactions-1-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Custom-step-example-Custom-step-Keyboard-interactions-1-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-firefox-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Custom-step-example-Custom-step-Keyboard-interactions-1-firefox-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-firefox-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Custom-step-example-Custom-step-Keyboard-interactions-1-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Custom-step-example-Custom-step-Keyboard-interactions-1-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/z-index-Verify-tabs-hover-elements-in-content-1-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-z-index-in-content-1-chromium-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/z-index-Verify-tabs-hover-elements-in-content-1-chromium-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-z-index-in-content-1-chromium-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/z-index-Verify-tabs-hover-elements-in-content-1-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-z-index-in-content-1-webkit-linux.png similarity index 100% rename from semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/z-index-Verify-tabs-hover-elements-in-content-1-webkit-linux.png rename to semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-z-index-in-content-1-webkit-linux.png diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-5-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-5-chromium-linux.png deleted file mode 100644 index de35843114..0000000000 Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-5-chromium-linux.png and /dev/null differ diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-6-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-6-chromium-linux.png deleted file mode 100644 index 40ccd39dbe..0000000000 Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/Steps-and-buttons-states-Steps-on-hover-and-focus---expanded-state-6-chromium-linux.png and /dev/null differ diff --git a/semcore/wizard/src/Wizard.tsx b/semcore/wizard/src/Wizard.tsx index 8f978772ec..6edcba955b 100644 --- a/semcore/wizard/src/Wizard.tsx +++ b/semcore/wizard/src/Wizard.tsx @@ -28,7 +28,11 @@ import type { WizardStepNextProps, } from './Wizard.types'; -class WizardRoot extends Component { +type State = { + highlighted: number; +}; + +class WizardRoot extends Component { static displayName = 'Wizard'; static style = style; static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement()] as const; @@ -41,10 +45,14 @@ class WizardRoot extends Component(); contentRef = React.createRef(); - state = { highlighted: null }; stepperRefs: Array = []; + state: State = { + // @ts-ignore + highlighted: this.props.step, + }; + getStepId(step: WizardStep): string { return `${this.asProps.uid}-step-${step}`; } @@ -109,6 +117,10 @@ class WizardRoot extends Component () => { const prevStep = this._steps.get(i); if (!prevStep) return; + if (prevStep.disabled) { + this.stepperFocusPrev(i - 1)(); + return; + } this.setState({ highlighted: prevStep?.step }); setTimeout(() => { this.stepperRefs[i - 1]?.focus(); @@ -118,6 +130,10 @@ class WizardRoot extends Component () => { const nextStep = this._steps.get(i + 2); if (!nextStep) return; + if (nextStep.disabled) { + this.stepperFocusNext(i + 1)(); + return; + } this.setState({ highlighted: nextStep?.step }); setTimeout(() => { this.stepperRefs[i + 1]?.focus(); @@ -133,8 +149,7 @@ class WizardRoot extends Component { if (prevProps.step === this.asProps.step) return; if (this.contentRef.current) { diff --git a/stories/components/wizard/docs/examples/basic_example.tsx b/stories/components/wizard/docs/examples/basic_example.tsx index 80b4f0ffb2..d350f9f6f0 100644 --- a/stories/components/wizard/docs/examples/basic_example.tsx +++ b/stories/components/wizard/docs/examples/basic_example.tsx @@ -6,8 +6,6 @@ import React from 'react'; const steps = [{ title: 'Location' }, { title: 'Keywords' }, { title: 'Schedule' }]; -type WizardStep = { title: string }; - const Demo = () => { const [step, setStep] = React.useState(1); const [visible, setVisible] = React.useState(false);