diff --git a/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx b/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx index bf2e0ba84a..4302d199e7 100644 --- a/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx +++ b/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx @@ -102,7 +102,8 @@ test.describe(TAG.FUNCTIONAL, () => { await locators.options(page).first().waitFor({ state: 'visible' }); const count = await locators.options(page).count(); - for (let i = 1; i < count; i++) { + for (let i = 0; i < count; i++) { + await expect(locators.options(page).nth(i)).toHaveAttribute('aria-selected', 'false'); await expect(locators.options(page).nth(i)).not.toHaveClass(/selected/); } }); @@ -121,7 +122,8 @@ test.describe(TAG.FUNCTIONAL, () => { await page.keyboard.press('Enter'); await locators.options(page).first().waitFor({ state: 'visible' }); const count = await locators.options(page).count(); - for (let i = 1; i < count; i++) { + for (let i = 0; i < count; i++) { + await expect(locators.options(page).nth(i)).toHaveAttribute('aria-selected', 'false'); await expect(locators.options(page).nth(i)).not.toHaveClass(/selected/); } }); @@ -136,23 +138,29 @@ test.describe(TAG.FUNCTIONAL, () => { await expect(locators.trigger(page)).toHaveAttribute('value', 'ragdoll'); }); - await test.step('Verify selected item shown and highlighted but not focused', async () => { + await test.step('Verify selected value is shown without selected option styling', async () => { await page.keyboard.press('Enter'); await locators.options(page).first().waitFor({ state: 'visible' }); - await expect(locators.options(page).first()).toHaveClass(/selected/); + await expect(locators.options(page).first()).toHaveText(/ragdoll/); + await expect(locators.options(page).first()).toHaveAttribute('aria-selected', 'false'); + await expect(locators.options(page).first()).not.toHaveClass(/selected/); + await expect(locators.options(page).first()).not.toHaveClass(/highlighted/); }); - await test.step('Verify item is selected and menu not closed by Enter when exact match opened', async () => { + await test.step('Verify exact match keeps menu opened without selected option styling', async () => { for (let i = 0; i < 'ragdoll'.length; i++) { await page.keyboard.press('Backspace'); } await page.keyboard.type('persian'); await locators.options(page).first().waitFor({ state: 'visible' }); await expect(locators.options(page).first()).toHaveText(/persian/); - await expect(locators.options(page).first()).toHaveClass(/selected/); + await expect(locators.options(page).first()).toHaveAttribute('aria-selected', 'false'); + await expect(locators.options(page).first()).not.toHaveClass(/selected/); await page.keyboard.press('Enter'); + await expect(locators.menu(page)).toBeVisible(); await expect(locators.options(page).first()).toHaveText(/persian/); - await expect(locators.options(page).first()).toHaveClass(/selected/); + await expect(locators.options(page).first()).toHaveAttribute('aria-selected', 'false'); + await expect(locators.options(page).first()).not.toHaveClass(/selected/); }); }); @@ -176,7 +184,8 @@ test.describe(TAG.FUNCTIONAL, () => { await expect(locators.menu(page)).toBeVisible(); const count = await locators.options(page).count(); - for (let i = 1; i < count; i++) { + for (let i = 0; i < count; i++) { + await expect(locators.options(page).nth(i)).toHaveAttribute('aria-selected', 'false'); await expect(locators.options(page).nth(i)).not.toHaveClass(/selected/); } }); @@ -196,12 +205,14 @@ test.describe(TAG.FUNCTIONAL, () => { await expect(locators.trigger(page)).toHaveAttribute('value', 'persian'); }); - await test.step('Verify menu opened and selected option highlighted', async () => { + await test.step('Verify menu opened without selected option styling', async () => { await page.mouse.click(inputCoords[0], inputCoords[1]); await locators.options(page).first().waitFor({ state: 'visible' }); await expect(locators.trigger(page)).toHaveAttribute('value', 'persian'); - await expect(locators.options(page).first()).toHaveClass(/selected/); + await expect(locators.options(page).first()).toHaveText(/persian/); + await expect(locators.options(page).first()).toHaveAttribute('aria-selected', 'false'); + await expect(locators.options(page).first()).not.toHaveClass(/selected/); await expect(locators.options(page).first()).not.toHaveClass(/highlighted/); }); }); diff --git a/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx-snapshots/-visual-Verify-AutoSuggest-mouse-navigation-states-2-chromium-linux.png b/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx-snapshots/-visual-Verify-AutoSuggest-mouse-navigation-states-2-chromium-linux.png index faf259a045..2c4b922450 100644 Binary files a/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx-snapshots/-visual-Verify-AutoSuggest-mouse-navigation-states-2-chromium-linux.png and b/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx-snapshots/-visual-Verify-AutoSuggest-mouse-navigation-states-2-chromium-linux.png differ diff --git a/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx-snapshots/-visual-Verify-AutoSuggest-mouse-navigation-states-2-firefox-linux.png b/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx-snapshots/-visual-Verify-AutoSuggest-mouse-navigation-states-2-firefox-linux.png index 1231daafc6..535a89857f 100644 Binary files a/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx-snapshots/-visual-Verify-AutoSuggest-mouse-navigation-states-2-firefox-linux.png and b/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx-snapshots/-visual-Verify-AutoSuggest-mouse-navigation-states-2-firefox-linux.png differ diff --git a/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx-snapshots/-visual-Verify-AutoSuggest-mouse-navigation-states-2-webkit-linux.png b/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx-snapshots/-visual-Verify-AutoSuggest-mouse-navigation-states-2-webkit-linux.png index 240acec96b..d239a60848 100644 Binary files a/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx-snapshots/-visual-Verify-AutoSuggest-mouse-navigation-states-2-webkit-linux.png and b/semcore/select/__tests__/ux-patterns-with-select/auto-suggest.browser-test.tsx-snapshots/-visual-Verify-AutoSuggest-mouse-navigation-states-2-webkit-linux.png differ diff --git a/stories/patterns/ux-patterns/auto-suggest/docs/AutoSuggest.docs.stories.tsx b/stories/patterns/ux-patterns/auto-suggest/docs/AutoSuggest.docs.stories.tsx index f3f91b5804..160eb2bb99 100644 --- a/stories/patterns/ux-patterns/auto-suggest/docs/AutoSuggest.docs.stories.tsx +++ b/stories/patterns/ux-patterns/auto-suggest/docs/AutoSuggest.docs.stories.tsx @@ -7,7 +7,7 @@ import ComboboxExample from './examples/combobox_example'; import { playWrapper } from '../../../../utils/playWrapper'; const meta: Meta = { - title: 'Patterns/AutoSuggest', + title: 'Patterns/UX Patterns/AutoSuggest', }; export default meta; diff --git a/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx b/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx index f3a9d18e17..3ce78f9785 100644 --- a/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx +++ b/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx @@ -128,7 +128,7 @@ const Demo = () => { {suggestions.length > 0 && ( {suggestions.map((option) => ( - + {option.title} ))}