test(slider): add unit, avt, and e2e tests on slider for new behavior

- Avt, using tab and getting the value to show as medium
- Snapshot test
- Unit test to check the behavior for both single and two thumb variants

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

@@ -92,6 +92,20 @@ 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',
+      },
+    });
+
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('slider')).toHaveValue('Medium');
+    await expect(page).toHaveNoACViolations('Slider-with-custom-value-label');
+  });
+
   // Prevent timeout
   test.slow('@avt-keyboard-nav', async ({ page }) => {
     await visitStory(page, {

e2e/components/Slider/Slider-test.e2e.js

@@ -37,6 +37,14 @@ test.describe('Slider', () => {
           theme,
         });
       });
+
+      test('slider with formatLabel @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Slider',
+          id: 'components-slider--slider-with-custom-value-label',
+          theme,
+        });
+      });
     });
   });
 });

packages/react/src/components/Slider/Slider-test.js

@@ -466,6 +466,28 @@ describe('Slider', () => {
         expect(rangeLabels[0]).toHaveTextContent('0-min');
         expect(rangeLabels[1]).toHaveTextContent('100-max');
       });
+
+      it('supports custom formatting on the tooltip when input is hidden', () => {
+        const { container } = renderSlider({
+          min: 0,
+          max: 100,
+          value: 50,
+          formatLabel: (value) => `${value}%`,
+          hideTextInput: true,
+        });
+
+        const rangeLabels = container.querySelectorAll(
+          `.${prefix}--slider__range-label`
+        );
+
+        const valueLabel = container.querySelector(
+          `.${prefix}--popover-content.${prefix}--tooltip-content`
+        );
+
+        expect(rangeLabels[0]).toHaveTextContent('0%');
+        expect(rangeLabels[1]).toHaveTextContent('100%');
+        expect(valueLabel).toHaveTextContent('50%');
+      });
     });
 
     describe('Key/mouse event processing', () => {
@@ -744,6 +766,30 @@ describe('Slider', () => {
       expect(upperInput).toHaveAttribute('type', 'hidden');
     });
 
+    it('supports custom formatting on the tooltip when input is hidden', () => {
+      const { container } = renderTwoHandleSlider({
+        min: 0,
+        max: 100,
+        value: 50,
+        unstable_valueUpper: 70,
+        formatLabel: (value) => `${value}%`,
+        hideTextInput: true,
+      });
+
+      const rangeLabels = container.querySelectorAll(
+        `.${prefix}--slider__range-label`
+      );
+
+      const valueLabels = container.querySelectorAll(
+        `.${prefix}--popover-content.${prefix}--tooltip-content`
+      );
+
+      expect(rangeLabels[0]).toHaveTextContent('0%');
+      expect(rangeLabels[1]).toHaveTextContent('100%');
+      expect(valueLabels[0]).toHaveTextContent('50%');
+      expect(valueLabels[1]).toHaveTextContent('70%');
+    });
+
     it('allows user to set invalid value when typing in input field', async () => {
       const { type } = userEvent;
       renderTwoHandleSlider({

packages/react/src/components/Slider/Slider.stories.js

@@ -67,7 +67,7 @@ export const SliderWithHiddenInputsAndFormatLabel = () => (
   />
 );
 
-export const SliderWithHiddenInputsAndCustomFormat = () => (
+export const SliderWithCustomValueLabel = () => (
   <Slider
     labelText="Slider label with low/medium/high"
     value={50}

packages/react/src/components/Slider/Slider.tsx

@@ -1529,6 +1529,7 @@ class Slider extends PureComponent<SliderProps> {
                       role="slider"
                       id={twoHandles ? undefined : id}
                       tabIndex={!readOnly ? 0 : -1}
+                      aria-valuetext={`${formatLabel(value, '')}`}
                       aria-valuemax={twoHandles ? valueUpper : max}
                       aria-valuemin={min}
                       aria-valuenow={value}