Skip to content

Commit 7fd3cb7

Browse files
andreancardonaalisonjosephfrancineluccakodiakhq[bot]
authored
feat: slider keyboard avt testing (#14160)
* feat: contained list persistent search * docs: update docs for contained list search * fix: fix border * feat: functionality working * fix(tabs): hover style bugs * fix: remove hover from disabled state * feat: clean up code * Update packages/react/src/components/ContainedList/ContainedList.mdx Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * fix: update docs * fix: fix styling Co-authored-by: Francine Lucca <francinelucca@users.noreply.github.com> * fix: update docs * fix: failing test * fix: fix tests * feat: basic keyboard testing * feat: slider keyboard nav * feat: updated get by role * feat: update failing test * fix: trying to fix failing tests * fix: avt timeout --------- Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com> Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: Francine Lucca <francinelucca@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent a157f0a commit 7fd3cb7

3 files changed

Lines changed: 101 additions & 15 deletions

File tree

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

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2023
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use strict';
9+
10+
const { expect, test } = require('@playwright/test');
11+
const { visitStory } = require('../../test-utils/storybook');
12+
13+
test.describe('Slider @avt', () => {
14+
test('accessibility-checker @avt - Slider default state', async ({
15+
page,
16+
}) => {
17+
await visitStory(page, {
18+
component: 'Slider',
19+
id: 'components-slider--default',
20+
globals: {
21+
theme: 'white',
22+
},
23+
});
24+
await expect(page).toHaveNoACViolations('Slider');
25+
});
26+
27+
test('accessibility-checker controlled slider', async ({ page }) => {
28+
await visitStory(page, {
29+
component: 'Slider',
30+
id: 'components-slider--controlled-slider',
31+
globals: {
32+
theme: 'white',
33+
},
34+
});
35+
await expect(page).toHaveNoACViolations('Slider-controlled');
36+
});
37+
38+
test('accessibility-checker controlled slider with layer', async ({
39+
page,
40+
}) => {
41+
await visitStory(page, {
42+
component: 'Slider',
43+
id: 'components-slider--controlled-slider-with-layer',
44+
globals: {
45+
theme: 'white',
46+
},
47+
});
48+
await expect(page).toHaveNoACViolations(
49+
'Slider-controlled-slider-with-layer'
50+
);
51+
});
52+
53+
test('accessibility-checker skeleton', async ({ page }) => {
54+
await visitStory(page, {
55+
component: 'Slider',
56+
id: 'components-slider--skeleton',
57+
globals: {
58+
theme: 'white',
59+
},
60+
});
61+
await expect(page).toHaveNoACViolations('Slider-skeleton');
62+
});
63+
64+
test('accessibility-checker slider with layer', async ({ page }) => {
65+
await visitStory(page, {
66+
component: 'Slider',
67+
id: 'components-slider--with-layer',
68+
globals: {
69+
theme: 'white',
70+
},
71+
});
72+
await expect(page).toHaveNoACViolations('Slider-with-layer');
73+
});
74+
75+
// Prevent timeout
76+
test.slow('default state - keyboard nav', async ({ page }) => {
77+
await visitStory(page, {
78+
component: 'Slider',
79+
id: 'components-slider--default',
80+
globals: {
81+
theme: 'white',
82+
},
83+
});
84+
85+
// Focus on the slider via keyboard navigation
86+
await page.keyboard.press('Tab');
87+
await expect(page.getByRole('slider')).toBeVisible();
88+
await page.keyboard.press('Tab');
89+
await expect(page.getByRole('slider')).toBeFocused();
90+
91+
await page.keyboard.press('Tab');
92+
await expect(page.getByRole('spinbutton')).toBeFocused();
93+
94+
await page.keyboard.insertText('20');
95+
await expect(page.getByRole('spinbutton')).toHaveValue('20');
96+
});
97+
});

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77

88
'use strict';
99

10-
const { expect, test } = require('@playwright/test'); // eslint-disable-line
10+
const { test } = require('@playwright/test'); // eslint-disable-line
1111
const { themes } = require('../../test-utils/env');
12-
const { snapshotStory, visitStory } = require('../../test-utils/storybook'); // eslint-disable-line
12+
const { snapshotStory } = require('../../test-utils/storybook'); // eslint-disable-line
1313

1414
test.describe('Slider', () => {
1515
themes.forEach((theme) => {
@@ -31,17 +31,4 @@ test.describe('Slider', () => {
3131
});
3232
});
3333
});
34-
35-
// TODO: uncomment when https://github.com/IBMa/equal-access/issues/761 is resolved
36-
37-
// test('accessibility-checker @avt', async ({ page }) => {
38-
// await visitStory(page, {
39-
// component: 'Slider',
40-
// id: 'components-slider--default',
41-
// globals: {
42-
// theme: 'white',
43-
// },
44-
// });
45-
// await expect(page).toHaveNoACViolations('Slider');
46-
// });
4734
});

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export const ControlledSlider = () => {
4848
randomize value
4949
</button>
5050
<Slider
51+
labelText="Slider label"
5152
max={100}
5253
min={0}
5354
value={val}
@@ -82,6 +83,7 @@ export const ControlledSliderWithLayer = () => {
8283
randomize value
8384
</button>
8485
<Slider
86+
labelText="Slider label"
8587
max={100}
8688
min={0}
8789
value={val}

0 commit comments

Comments
 (0)