feat: slider keyboard avt testing

e2e/components/OverflowMenu/OverflowMenu-test.e2e.js

@@ -67,6 +67,6 @@ test.describe('OverflowMenu', () => {
         theme: 'white',
       },
     });
-    await expect(page).toHaveNoACViolations('OverflowMenu');
+    await expect(page).toHaveNoACViolations('OverflowMenu feature-flag');
   });
 });

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

@@ -0,0 +1,97 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+
+test.describe('Slider @avt', () => {
+  test('accessibility-checker @avt - Slider default state', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Slider',
+      id: 'components-slider--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Slider');
+  });
+
+  test('accessibility-checker controlled slider', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Slider',
+      id: 'components-slider--controlled-slider',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Slider-controlled');
+  });
+
+  test('accessibility-checker controlled slider with layer', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Slider',
+      id: 'components-slider--controlled-slider-with-layer',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'Slider-controlled-slider-with-layer'
+    );
+  });
+
+  test('accessibility-checker skeleton', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Slider',
+      id: 'components-slider--skeleton',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Slider-skeleton');
+  });
+
+  test('accessibility-checker slider with layer', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Slider',
+      id: 'components-slider--with-layer',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Slider-with-layer');
+  });
+
+  // Prevent timeout
+  test.slow('default state - keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Slider',
+      id: 'components-slider--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    // Focus on the slider via keyboard navigation
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('slider')).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('slider')).toBeFocused();
+
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('spinbutton')).toBeFocused();
+
+    await page.keyboard.insertText('20');
+    await expect(page.getByRole('spinbutton')).toHaveValue('20');
+  });
+});

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

@@ -7,9 +7,9 @@
 
 'use strict';
 
-const { expect, test } = require('@playwright/test'); // eslint-disable-line
+const { test } = require('@playwright/test'); // eslint-disable-line
 const { themes } = require('../../test-utils/env');
-const { snapshotStory, visitStory } = require('../../test-utils/storybook'); // eslint-disable-line
+const { snapshotStory } = require('../../test-utils/storybook'); // eslint-disable-line
 
 test.describe('Slider', () => {
   themes.forEach((theme) => {
@@ -31,17 +31,4 @@ test.describe('Slider', () => {
       });
     });
   });
-
-  // TODO: uncomment when https://github.com/IBMa/equal-access/issues/761 is resolved
-
-  // test('accessibility-checker @avt', async ({ page }) => {
-  //   await visitStory(page, {
-  //     component: 'Slider',
-  //     id: 'components-slider--default',
-  //     globals: {
-  //       theme: 'white',
-  //     },
-  //   });
-  //   await expect(page).toHaveNoACViolations('Slider');
-  // });
 });

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

@@ -48,6 +48,7 @@ export const ControlledSlider = () => {
         randomize value
       </button>
       <Slider
+        labelText="Slider label"
         max={100}
         min={0}
         value={val}
@@ -82,6 +83,7 @@ export const ControlledSliderWithLayer = () => {
         randomize value
       </button>
       <Slider
+        labelText="Slider label"
         max={100}
         min={0}
         value={val}