diff --git a/e2e/components/Slider/Slider-test.avt.e2e.js b/e2e/components/Slider/Slider-test.avt.e2e.js index 93aff6331c55..ec067cbd0fe7 100644 --- a/e2e/components/Slider/Slider-test.avt.e2e.js +++ b/e2e/components/Slider/Slider-test.avt.e2e.js @@ -92,19 +92,45 @@ test.describe('@avt Slider', () => { await expect(page).toHaveNoACViolations('Slider-with-layer'); }); - test('@avt-advanced-states slider with custom format', async ({ page }) => { - await visitStory(page, { - component: 'Slider', - id: 'components-slider--slider-with-custom-value-label', - globals: { - theme: 'white', - }, - }); + test.slow( + '@avt-advanced-states slider with custom format', + async ({ page }) => { + await visitStory(page, { + component: 'Slider', + id: 'components-slider--slider-with-custom-value-label', + globals: { + theme: 'white', + }, + }); - await page.keyboard.press('Tab'); - await expect(page.getByRole('slider')).toHaveValue('Medium'); - await expect(page).toHaveNoACViolations('Slider-with-custom-value-label'); - }); + // Test for label changes + // Initial value + await page.keyboard.press('Tab'); + await expect(page.getByRole('slider')).toBeVisible(); + await page.keyboard.press('Tab'); + + await expect(page.getByRole('slider')).toHaveAttribute( + 'aria-valuetext', + 'Medium' + ); + // Move to high + await page.keyboard.press('Shift+ArrowRight'); + await expect(page.getByRole('slider')).toHaveAttribute( + 'aria-valuetext', + 'High' + ); + + // Move to Low + await page.keyboard.press('Shift+ArrowLeft'); + await page.keyboard.press('Shift+ArrowLeft'); + await expect(page.getByRole('slider')).toHaveAttribute( + 'aria-valuetext', + 'Low' + ); + + await expect(page).toHaveNoACViolations('Slider-with-custom-value-label'); + } + ); // Prevent timeout test.slow('@avt-keyboard-nav', async ({ page }) => { diff --git a/packages/react/src/components/Slider/Slider.stories.js b/packages/react/src/components/Slider/Slider.stories.js index 78934b90fb8b..d84b88d39f0b 100644 --- a/packages/react/src/components/Slider/Slider.stories.js +++ b/packages/react/src/components/Slider/Slider.stories.js @@ -53,27 +53,13 @@ export const SliderWithHiddenInputs = () => ( /> ); -export const SliderWithHiddenInputsAndFormatLabel = () => ( - `${val}%`} - /> -); - export const SliderWithCustomValueLabel = () => (