@sit-onyx/headless 0.8.0 → 0.8.1-dev-20260330154207
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/composables/slider/createSlider.d.ts +1 -1
- package/dist/index.js +1605 -1605
- package/dist/playwright.js +439 -522
- package/package.json +3 -3
package/dist/playwright.js
CHANGED
|
@@ -1,539 +1,456 @@
|
|
|
1
1
|
import { expect, test } from "@playwright/experimental-ct-vue";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
expect(active, "Given option should be active").toBeTruthy();
|
|
9
|
-
}
|
|
2
|
+
//#region src/composables/comboBox/createComboBox.testing.ts
|
|
3
|
+
var expectToOpen = async (keyCombo, combobox, listbox, checkActive) => {
|
|
4
|
+
await closeCombobox(combobox, listbox);
|
|
5
|
+
await combobox.press(keyCombo);
|
|
6
|
+
await expect(listbox, `Listbox should be opened after pressing ${keyCombo}.`).toBeVisible();
|
|
7
|
+
if (checkActive) expect(await checkActive(), "Given option should be active").toBeTruthy();
|
|
10
8
|
};
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
await expectToBeSelected(selectedLocator());
|
|
19
|
-
}
|
|
9
|
+
var expectToClose = async (keyCombo, combobox, listbox, selectedLocator) => {
|
|
10
|
+
await openCombobox(combobox, listbox);
|
|
11
|
+
await combobox.press(keyCombo);
|
|
12
|
+
await expect(listbox, `Listbox should be closed after pressing ${keyCombo}.`).toBeHidden();
|
|
13
|
+
await expect(combobox).toBeFocused();
|
|
14
|
+
await openCombobox(combobox, listbox);
|
|
15
|
+
if (selectedLocator) await expectToBeSelected(selectedLocator());
|
|
20
16
|
};
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
await button.click();
|
|
48
|
-
await button.focus();
|
|
49
|
-
await expect(button, "authors SHOULD ensure that the button is focusable").toBeFocused();
|
|
50
|
-
await expect(
|
|
51
|
-
button,
|
|
52
|
-
"authors SHOULD ensure that the button is not included in the page Tab sequence"
|
|
53
|
-
).toHaveAttribute("tabindex", "-1");
|
|
54
|
-
await expect(
|
|
55
|
-
combobox.getByRole("button"),
|
|
56
|
-
"authors SHOULD ensure that the button is not a descendant of the element with role combobox"
|
|
57
|
-
).toHaveCount(0);
|
|
58
|
-
const firstElement = options.first();
|
|
59
|
-
await combobox.focus();
|
|
60
|
-
expectToOpen("ArrowDown", combobox, listbox);
|
|
61
|
-
const firstId = await (await firstElement.elementHandle()).getAttribute("id");
|
|
62
|
-
expect(typeof firstId).toBe("string");
|
|
63
|
-
await expect(
|
|
64
|
-
combobox,
|
|
65
|
-
"When a descendant of the popup element is active, authors MAY set aria-activedescendant on the combobox to a value that refers to the active element within the popup."
|
|
66
|
-
).toHaveAttribute("aria-activedescendant", firstId);
|
|
67
|
-
await expect(
|
|
68
|
-
combobox,
|
|
69
|
-
"When a descendant of the popup element is active, authors MAY ensure that the focus remains on the combobox element"
|
|
70
|
-
).toBeFocused();
|
|
17
|
+
/**
|
|
18
|
+
* Test an implementation of the combobox based on https://w3c.github.io/aria/#combobox
|
|
19
|
+
*/
|
|
20
|
+
var comboboxTesting = async (_page, listbox, combobox, button, options) => {
|
|
21
|
+
await expect(listbox, "Typically, the initial state of a combobox is collapsed.").toBeHidden();
|
|
22
|
+
await expect(combobox, "In the collapsed state, the combobox element is visible.").toBeVisible();
|
|
23
|
+
await expect(button, "In the collapsed state, the optional button element is visible.").toBeVisible();
|
|
24
|
+
await button.click();
|
|
25
|
+
await expect(combobox, "A combobox is said to be expanded when the combobox element shows its current value").toHaveValue("");
|
|
26
|
+
await expect(listbox, "A combobox is said to be expanded when the associated popup is visible").toBeVisible();
|
|
27
|
+
await button.click();
|
|
28
|
+
await expect(combobox, "Authors MUST set aria-expanded to false when it is collapsed.").toHaveAttribute("aria-expanded", "false");
|
|
29
|
+
await button.click();
|
|
30
|
+
await expect(combobox, "Authors MUST set aria-expanded to true when it is expanded.").toHaveAttribute("aria-expanded", "true");
|
|
31
|
+
await button.click();
|
|
32
|
+
await button.focus();
|
|
33
|
+
await expect(button, "authors SHOULD ensure that the button is focusable").toBeFocused();
|
|
34
|
+
await expect(button, "authors SHOULD ensure that the button is not included in the page Tab sequence").toHaveAttribute("tabindex", "-1");
|
|
35
|
+
await expect(combobox.getByRole("button"), "authors SHOULD ensure that the button is not a descendant of the element with role combobox").toHaveCount(0);
|
|
36
|
+
const firstElement = options.first();
|
|
37
|
+
await combobox.focus();
|
|
38
|
+
expectToOpen("ArrowDown", combobox, listbox);
|
|
39
|
+
const firstId = await (await firstElement.elementHandle()).getAttribute("id");
|
|
40
|
+
expect(typeof firstId).toBe("string");
|
|
41
|
+
await expect(combobox, "When a descendant of the popup element is active, authors MAY set aria-activedescendant on the combobox to a value that refers to the active element within the popup.").toHaveAttribute("aria-activedescendant", firstId);
|
|
42
|
+
await expect(combobox, "When a descendant of the popup element is active, authors MAY ensure that the focus remains on the combobox element").toBeFocused();
|
|
71
43
|
};
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
44
|
+
var closeCombobox = async (combobox, listbox) => {
|
|
45
|
+
await combobox.press("Escape");
|
|
46
|
+
return expect(listbox, "Listbox should be collapsed again").toBeHidden();
|
|
75
47
|
};
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
48
|
+
var openCombobox = async (combobox, listbox) => {
|
|
49
|
+
await combobox.press("Home");
|
|
50
|
+
return expect(listbox, "Listbox should be open again").toBeVisible();
|
|
79
51
|
};
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
const active = await isActive(listbox.getByRole("option").first());
|
|
115
|
-
expect(active, "Given option should be active").toBeTruthy();
|
|
116
|
-
await expect(combobox).toBeFocused();
|
|
117
|
-
});
|
|
52
|
+
var expectToBeSelected = async (selectedItem) => expect(selectedItem, "Option should be selected").toHaveAttribute("aria-selected", "true");
|
|
53
|
+
/**
|
|
54
|
+
* Test an implementation of the combobox based on https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
|
|
55
|
+
*/
|
|
56
|
+
var comboboxSelectOnlyTesting = async (page, listbox, combobox, isActive) => {
|
|
57
|
+
await expect(listbox, "Initial state of a combobox is collapsed.").toBeHidden();
|
|
58
|
+
await combobox.focus();
|
|
59
|
+
await test.step("Test opening keys", async () => {
|
|
60
|
+
await expectToOpen("ArrowUp", combobox, listbox, () => isActive(page.getByRole("option").first()));
|
|
61
|
+
await expectToOpen("Alt+ArrowDown", combobox, listbox);
|
|
62
|
+
await expectToOpen("Space", combobox, listbox);
|
|
63
|
+
await expectToOpen("Enter", combobox, listbox);
|
|
64
|
+
await expectToOpen("Home", combobox, listbox, () => isActive(page.getByRole("option").first()));
|
|
65
|
+
await expectToOpen("End", combobox, listbox, () => isActive(page.getByRole("option").last()));
|
|
66
|
+
await expectToOpen("ArrowDown", combobox, listbox);
|
|
67
|
+
await expectToOpen("a", combobox, listbox);
|
|
68
|
+
});
|
|
69
|
+
await test.step("Selecting with Enter", async () => {
|
|
70
|
+
await expectToClose("Enter", combobox, listbox, () => page.getByRole("option").first());
|
|
71
|
+
await expectToClose(" ", combobox, listbox, () => page.getByRole("option").first());
|
|
72
|
+
await expectToClose("Escape", combobox, listbox, () => page.getByRole("option").first());
|
|
73
|
+
});
|
|
74
|
+
await test.step("Activating with End", async () => {
|
|
75
|
+
await openCombobox(combobox, listbox);
|
|
76
|
+
await combobox.press("End");
|
|
77
|
+
expect(await isActive(listbox.getByRole("option").last()), "Given option should be active").toBeTruthy();
|
|
78
|
+
await expect(combobox).toBeFocused();
|
|
79
|
+
});
|
|
80
|
+
await test.step("Activating with Home", async () => {
|
|
81
|
+
await openCombobox(combobox, listbox);
|
|
82
|
+
await combobox.press("Home");
|
|
83
|
+
expect(await isActive(listbox.getByRole("option").first()), "Given option should be active").toBeTruthy();
|
|
84
|
+
await expect(combobox).toBeFocused();
|
|
85
|
+
});
|
|
118
86
|
};
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
await listbox.press("ArrowUp");
|
|
173
|
-
await expectOptionToBeActive(
|
|
174
|
-
options.first(),
|
|
175
|
-
"Pressing arrow up key should activate the previous option"
|
|
176
|
-
);
|
|
177
|
-
await listbox.press("End");
|
|
178
|
-
await expectOptionToBeActive(options.last(), "Pressing End key should activate the last option");
|
|
179
|
-
const secondOptionText = await options.nth(1).textContent();
|
|
180
|
-
expect(secondOptionText).toBeDefined();
|
|
181
|
-
const firstCharacter = secondOptionText.charAt(0);
|
|
182
|
-
await listbox.press(firstCharacter);
|
|
183
|
-
await expectOptionToBeActive(
|
|
184
|
-
listbox.getByLabel(firstCharacter).first(),
|
|
185
|
-
"Pressing any other printable character should activate the fist option starting with the pressed key"
|
|
186
|
-
);
|
|
187
|
-
await listbox.press("Home");
|
|
188
|
-
await expectOptionToBeActive(
|
|
189
|
-
options.first(),
|
|
190
|
-
"Pressing Home key should activate the first option"
|
|
191
|
-
);
|
|
192
|
-
const firstOptionHeight = await options.first().evaluate((element) => element.clientHeight);
|
|
193
|
-
await listbox.evaluate((element, height) => {
|
|
194
|
-
element.style.height = `${height}px`;
|
|
195
|
-
element.style.overflow = "hidden";
|
|
196
|
-
}, firstOptionHeight);
|
|
197
|
-
await expect(options.nth(1)).not.toBeInViewport();
|
|
198
|
-
await listbox.press("ArrowDown");
|
|
199
|
-
await expect(
|
|
200
|
-
options.nth(1),
|
|
201
|
-
"activating an option should scroll it into viewport if not visible"
|
|
202
|
-
).toBeInViewport();
|
|
203
|
-
await listbox.evaluate((element) => {
|
|
204
|
-
element.style.height = "";
|
|
205
|
-
element.style.overflow = "";
|
|
206
|
-
});
|
|
87
|
+
//#endregion
|
|
88
|
+
//#region src/composables/listbox/createListbox.testing.ts
|
|
89
|
+
/**
|
|
90
|
+
* Playwright utility for executing accessibility testing for a listbox.
|
|
91
|
+
* Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable.
|
|
92
|
+
*/
|
|
93
|
+
var listboxTesting = async ({ page, listbox, options, isOptionActive }) => {
|
|
94
|
+
const expectOptionToBeActive = async (locator, message) => {
|
|
95
|
+
expect(await isOptionActive(locator), message).toBeTruthy();
|
|
96
|
+
const optionId = await locator.getAttribute("id");
|
|
97
|
+
expect(optionId).toBeDefined();
|
|
98
|
+
await expect(listbox, "listbox should have set aria-activedescendant to the ID of the currently visually active option").toHaveAttribute("aria-activedescendant", optionId);
|
|
99
|
+
};
|
|
100
|
+
await expect(listbox).toBeVisible();
|
|
101
|
+
await expect(listbox, "listbox must have a \"aria-label\" attribute with an existing id").toHaveAttribute("aria-label");
|
|
102
|
+
await listbox.getAttribute("aria-label").then((label) => expect(page.locator(`#${label}`)).toBeDefined());
|
|
103
|
+
await expect(listbox, "listbox must have role attribute with value listbox").toHaveAttribute("role", "listbox");
|
|
104
|
+
for (const option of await options.all()) {
|
|
105
|
+
await expect(option, "option must have arial-label attribute").toHaveAttribute("aria-label");
|
|
106
|
+
await expect(option, "option must have role attribute with value option").toHaveAttribute("role", "option");
|
|
107
|
+
}
|
|
108
|
+
await page.keyboard.press("Tab");
|
|
109
|
+
await expect(listbox, "Listbox should be focused when pressing tab key").toBeFocused();
|
|
110
|
+
await listbox.press("ArrowDown");
|
|
111
|
+
await expectOptionToBeActive(options.first(), "Pressing arrow down key when no option is active should activate the first option");
|
|
112
|
+
await expect(listbox, "When option is visually active, DOM focus should still be on the listbox").toBeFocused();
|
|
113
|
+
await listbox.press("ArrowDown");
|
|
114
|
+
await expectOptionToBeActive(options.nth(1), "Pressing arrow down key should activate the next option");
|
|
115
|
+
await listbox.press(" ");
|
|
116
|
+
await expect(options.nth(1), "Pressing space key should select the currently active option").toHaveAttribute("aria-selected", "true");
|
|
117
|
+
await listbox.press("ArrowUp");
|
|
118
|
+
await expectOptionToBeActive(options.first(), "Pressing arrow up key should activate the previous option");
|
|
119
|
+
await listbox.press("End");
|
|
120
|
+
await expectOptionToBeActive(options.last(), "Pressing End key should activate the last option");
|
|
121
|
+
const secondOptionText = await options.nth(1).textContent();
|
|
122
|
+
expect(secondOptionText).toBeDefined();
|
|
123
|
+
const firstCharacter = secondOptionText.charAt(0);
|
|
124
|
+
await listbox.press(firstCharacter);
|
|
125
|
+
await expectOptionToBeActive(listbox.getByLabel(firstCharacter).first(), "Pressing any other printable character should activate the fist option starting with the pressed key");
|
|
126
|
+
await listbox.press("Home");
|
|
127
|
+
await expectOptionToBeActive(options.first(), "Pressing Home key should activate the first option");
|
|
128
|
+
const firstOptionHeight = await options.first().evaluate((element) => element.clientHeight);
|
|
129
|
+
await listbox.evaluate((element, height) => {
|
|
130
|
+
element.style.height = `${height}px`;
|
|
131
|
+
element.style.overflow = "hidden";
|
|
132
|
+
}, firstOptionHeight);
|
|
133
|
+
await expect(options.nth(1)).not.toBeInViewport();
|
|
134
|
+
await listbox.press("ArrowDown");
|
|
135
|
+
await expect(options.nth(1), "activating an option should scroll it into viewport if not visible").toBeInViewport();
|
|
136
|
+
await listbox.evaluate((element) => {
|
|
137
|
+
element.style.height = "";
|
|
138
|
+
element.style.overflow = "";
|
|
139
|
+
});
|
|
207
140
|
};
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
await expect(
|
|
243
|
-
secondItem,
|
|
244
|
-
"Second item should be focused when pressing arrow down key"
|
|
245
|
-
).toBeFocused();
|
|
246
|
-
await menu.press("ArrowUp");
|
|
247
|
-
await expect(firstItem, "First item should be focused when pressing arrow up key").toBeFocused();
|
|
248
|
-
await page.keyboard.press("Tab");
|
|
249
|
-
await expect(button, "Button should be focused when pressing tab key").not.toBeFocused();
|
|
250
|
-
await page.keyboard.press("Tab");
|
|
251
|
-
await menu.press("Home");
|
|
252
|
-
await expect(firstItem, "First item should be focused when pressing home key").toBeFocused();
|
|
253
|
-
await page.keyboard.press("Tab");
|
|
254
|
-
await expect(button, "Button should be focused when pressing tab key").not.toBeFocused();
|
|
255
|
-
await page.keyboard.press("Tab");
|
|
256
|
-
await menu.press("End");
|
|
257
|
-
await expect(lastItem, "Last item should be focused when pressing end key").toBeFocused();
|
|
141
|
+
//#endregion
|
|
142
|
+
//#region src/composables/menuButton/createMenuButton.testing.ts
|
|
143
|
+
/**
|
|
144
|
+
* Playwright utility for executing accessibility testing for a navigation menu.
|
|
145
|
+
* Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links.
|
|
146
|
+
*/
|
|
147
|
+
var menuButtonTesting = async ({ page, button, menu, menuItems }) => {
|
|
148
|
+
await expect(button, "navigation menu should have an \"aria-haspopup\" attribute set to true").toHaveAttribute("aria-haspopup", "true");
|
|
149
|
+
await expect(button).toBeVisible();
|
|
150
|
+
await expect(button, "button must have arial-controls attribute").toHaveAttribute("aria-controls");
|
|
151
|
+
await expect(button, "button must have aria-expanded attribute").toHaveAttribute("aria-expanded", "false");
|
|
152
|
+
await page.keyboard.press("Tab");
|
|
153
|
+
await expect(button, "Button should be focused when pressing tab key").toBeFocused();
|
|
154
|
+
const firstItem = menuItems.first();
|
|
155
|
+
const secondItem = menuItems.nth(1);
|
|
156
|
+
const lastItem = menuItems.last();
|
|
157
|
+
await page.keyboard.press("Enter");
|
|
158
|
+
await expect(button, "button must have aria-expanded attribute").toHaveAttribute("aria-expanded", "true");
|
|
159
|
+
await button.press("ArrowDown");
|
|
160
|
+
await expect(firstItem, "First item should be focused when pressing arrow down key").toBeFocused();
|
|
161
|
+
await menu.press("ArrowDown");
|
|
162
|
+
await expect(secondItem, "Second item should be focused when pressing arrow down key").toBeFocused();
|
|
163
|
+
await menu.press("ArrowUp");
|
|
164
|
+
await expect(firstItem, "First item should be focused when pressing arrow up key").toBeFocused();
|
|
165
|
+
await page.keyboard.press("Tab");
|
|
166
|
+
await expect(button, "Button should be focused when pressing tab key").not.toBeFocused();
|
|
167
|
+
await page.keyboard.press("Tab");
|
|
168
|
+
await menu.press("Home");
|
|
169
|
+
await expect(firstItem, "First item should be focused when pressing home key").toBeFocused();
|
|
170
|
+
await page.keyboard.press("Tab");
|
|
171
|
+
await expect(button, "Button should be focused when pressing tab key").not.toBeFocused();
|
|
172
|
+
await page.keyboard.press("Tab");
|
|
173
|
+
await menu.press("End");
|
|
174
|
+
await expect(lastItem, "Last item should be focused when pressing end key").toBeFocused();
|
|
258
175
|
};
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
176
|
+
//#endregion
|
|
177
|
+
//#region src/composables/navigationMenu/createMenu.testing.ts
|
|
178
|
+
/**
|
|
179
|
+
* Playwright utility for executing accessibility testing for a navigation menu.
|
|
180
|
+
* Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
|
|
181
|
+
*/
|
|
182
|
+
var navigationTesting = async ({ nav, buttons }) => {
|
|
183
|
+
/**
|
|
184
|
+
* Navigation landmark should have label
|
|
185
|
+
*/
|
|
186
|
+
await expect(nav).toHaveRole("navigation");
|
|
187
|
+
await expect(nav).toHaveAttribute("aria-label");
|
|
188
|
+
/**
|
|
189
|
+
* Focus first button
|
|
190
|
+
*/
|
|
191
|
+
await buttons.first().focus();
|
|
192
|
+
await expect(buttons.nth(0)).toBeFocused();
|
|
193
|
+
/**
|
|
194
|
+
* Move keyboard focus among top-level buttons using arrow keys
|
|
195
|
+
*/
|
|
196
|
+
await nav.press("ArrowRight");
|
|
197
|
+
await expect(buttons.nth(1)).toBeFocused();
|
|
198
|
+
await nav.press("ArrowLeft");
|
|
199
|
+
await expect(buttons.nth(0)).toBeFocused();
|
|
268
200
|
};
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
201
|
+
//#endregion
|
|
202
|
+
//#region src/composables/slider/createSlider.testing.ts
|
|
203
|
+
var getRailPosition = async (rail, percentage) => {
|
|
204
|
+
const box = await rail.boundingBox();
|
|
205
|
+
return {
|
|
206
|
+
x: box.x + box.width * percentage,
|
|
207
|
+
y: box.y + box.height * .5
|
|
208
|
+
};
|
|
274
209
|
};
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
210
|
+
/**
|
|
211
|
+
* Comprehensive testing for single-thumb slider implementation.
|
|
212
|
+
* Tests basic accessibility, keyboard navigation, and interaction patterns.
|
|
213
|
+
*
|
|
214
|
+
* Slider must have min=0, max=100, step=1 and initial value of 50.
|
|
215
|
+
*/
|
|
216
|
+
var singleSliderTesting = async ({ page, slider, rail }) => {
|
|
217
|
+
await test.step("Basic accessibility and initial state", async () => {
|
|
218
|
+
await expect(slider).toHaveAttribute("role", "slider");
|
|
219
|
+
await expect(slider).toHaveAttribute("aria-valuenow", "50");
|
|
220
|
+
await expect(slider).toHaveAttribute("aria-valuemin", "0");
|
|
221
|
+
await expect(slider).toHaveAttribute("aria-valuemax", "100");
|
|
222
|
+
await expect(slider).toHaveAttribute("aria-orientation", "horizontal");
|
|
223
|
+
await expect(slider).toHaveAttribute("type", "range");
|
|
224
|
+
await expect(slider).toHaveAttribute("step", "1");
|
|
225
|
+
await slider.focus();
|
|
226
|
+
await expect(slider).toBeFocused();
|
|
227
|
+
});
|
|
228
|
+
await test.step("Keyboard navigation - Arrow keys", async () => {
|
|
229
|
+
await slider.press("ArrowRight");
|
|
230
|
+
await expect(slider).toHaveValue("51");
|
|
231
|
+
await slider.press("ArrowLeft");
|
|
232
|
+
await expect(slider).toHaveValue("50");
|
|
233
|
+
await slider.press("ArrowUp");
|
|
234
|
+
await expect(slider).toHaveValue("51");
|
|
235
|
+
await slider.press("ArrowDown");
|
|
236
|
+
await expect(slider).toHaveValue("50");
|
|
237
|
+
});
|
|
238
|
+
await test.step("Keyboard navigation - Home and End keys", async () => {
|
|
239
|
+
await slider.press("End");
|
|
240
|
+
await expect(slider).toHaveValue("100");
|
|
241
|
+
await slider.press("Home");
|
|
242
|
+
await expect(slider).toHaveValue("0");
|
|
243
|
+
});
|
|
244
|
+
await test.step("Keyboard navigation - Page Up/Down keys", async () => {
|
|
245
|
+
await slider.press("PageUp");
|
|
246
|
+
await expect(slider).toHaveValue("1");
|
|
247
|
+
await slider.press("PageDown");
|
|
248
|
+
await expect(slider).toHaveValue("0");
|
|
249
|
+
});
|
|
250
|
+
await test.step("Shift key modifies step size", async () => {
|
|
251
|
+
await slider.press("Shift+ArrowRight");
|
|
252
|
+
await expect(slider).toHaveValue("10");
|
|
253
|
+
});
|
|
254
|
+
await test.step("Mouse interaction - Click to set value", async () => {
|
|
255
|
+
await expect(rail).toBeVisible();
|
|
256
|
+
const { x, y } = await getRailPosition(rail, .75);
|
|
257
|
+
await page.mouse.click(x, y);
|
|
258
|
+
await expect(slider).toHaveValue("75");
|
|
259
|
+
});
|
|
260
|
+
await test.step("Mouse drag interaction", async () => {
|
|
261
|
+
const startPosition = await getRailPosition(rail, .25);
|
|
262
|
+
const endPosition = await getRailPosition(rail, .75);
|
|
263
|
+
await page.mouse.move(startPosition.x, startPosition.y);
|
|
264
|
+
await page.mouse.down();
|
|
265
|
+
await expect(slider).toHaveValue("25");
|
|
266
|
+
await page.mouse.move(endPosition.x, endPosition.y);
|
|
267
|
+
await page.mouse.up();
|
|
268
|
+
await expect(slider).toHaveValue("75");
|
|
269
|
+
});
|
|
270
|
+
await test.step("Boundary value constraints", async () => {
|
|
271
|
+
await slider.press("Home");
|
|
272
|
+
await expect(slider).toHaveValue("0");
|
|
273
|
+
await slider.press("ArrowLeft");
|
|
274
|
+
await expect(slider).toHaveValue("0");
|
|
275
|
+
await slider.press("End");
|
|
276
|
+
await expect(slider).toHaveValue("100");
|
|
277
|
+
await slider.press("ArrowRight");
|
|
278
|
+
await expect(slider).toHaveValue("100");
|
|
279
|
+
});
|
|
339
280
|
};
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
281
|
+
/**
|
|
282
|
+
* Comprehensive testing for range slider implementation.
|
|
283
|
+
* Tests range-specific behaviors, thumb independence, and collision handling.
|
|
284
|
+
*
|
|
285
|
+
* Slider must have min=0, max=100, step=1 and initial value of [25,75].
|
|
286
|
+
*/
|
|
287
|
+
var rangeSliderTesting = async ({ page, slider, rail }) => {
|
|
288
|
+
const firstThumb = slider.first();
|
|
289
|
+
const lastThumb = slider.last();
|
|
290
|
+
await test.step("Basic accessibility for range slider", async () => {
|
|
291
|
+
await expect(slider).toHaveCount(2);
|
|
292
|
+
for (let i = 0; i < 2; i++) {
|
|
293
|
+
const thumb = slider.nth(i);
|
|
294
|
+
await expect(thumb).toHaveAttribute("role", "slider");
|
|
295
|
+
await expect(thumb).toHaveAttribute("aria-valuenow", i === 0 ? "25" : "75");
|
|
296
|
+
await expect(thumb).toHaveAttribute("aria-valuemin", "0");
|
|
297
|
+
await expect(thumb).toHaveAttribute("aria-valuemax", "100");
|
|
298
|
+
await expect(thumb).toHaveAttribute("step", "1");
|
|
299
|
+
}
|
|
300
|
+
});
|
|
301
|
+
await test.step("Independent thumb navigation", async () => {
|
|
302
|
+
await firstThumb.focus();
|
|
303
|
+
await expect(firstThumb).toBeFocused();
|
|
304
|
+
await firstThumb.press("ArrowRight");
|
|
305
|
+
await expect(firstThumb).toHaveValue("26");
|
|
306
|
+
await firstThumb.press("ArrowLeft");
|
|
307
|
+
await expect(firstThumb).toHaveValue("25");
|
|
308
|
+
await lastThumb.focus();
|
|
309
|
+
await expect(lastThumb).toBeFocused();
|
|
310
|
+
await lastThumb.press("ArrowRight");
|
|
311
|
+
await expect(lastThumb).toHaveValue("76");
|
|
312
|
+
await lastThumb.press("ArrowLeft");
|
|
313
|
+
await expect(lastThumb).toHaveValue("75");
|
|
314
|
+
});
|
|
315
|
+
await test.step("Tab navigation between thumbs", async () => {
|
|
316
|
+
await firstThumb.focus();
|
|
317
|
+
await expect(firstThumb).toBeFocused();
|
|
318
|
+
await page.keyboard.press("Tab");
|
|
319
|
+
await expect(lastThumb).toBeFocused();
|
|
320
|
+
await page.keyboard.press("Shift+Tab");
|
|
321
|
+
await expect(firstThumb).toBeFocused();
|
|
322
|
+
});
|
|
323
|
+
await test.step("Click and drag interactions", async () => {
|
|
324
|
+
let position = await getRailPosition(rail, .1);
|
|
325
|
+
await page.mouse.click(position.x, position.y);
|
|
326
|
+
await expect(firstThumb).toHaveValue("10");
|
|
327
|
+
await expect(lastThumb).toHaveValue("75");
|
|
328
|
+
position = await getRailPosition(rail, .8);
|
|
329
|
+
await page.mouse.click(position.x, position.y);
|
|
330
|
+
await expect(firstThumb).toHaveValue("10");
|
|
331
|
+
await expect(lastThumb).toHaveValue("80");
|
|
332
|
+
position = await getRailPosition(rail, .1);
|
|
333
|
+
await page.mouse.move(position.x, position.y);
|
|
334
|
+
await page.mouse.down();
|
|
335
|
+
position = await getRailPosition(rail, .5);
|
|
336
|
+
await page.mouse.move(position.x, position.y);
|
|
337
|
+
await expect(firstThumb, "should change value by dragging thumb").toHaveValue("50");
|
|
338
|
+
await expect(lastThumb).toHaveValue("80");
|
|
339
|
+
position = await getRailPosition(rail, .9);
|
|
340
|
+
await page.mouse.move(position.x, position.y);
|
|
341
|
+
await expect(firstThumb, "should not exceed last thumb when dragging").toHaveValue("80");
|
|
342
|
+
await expect(lastThumb).toHaveValue("80");
|
|
343
|
+
await page.mouse.up();
|
|
344
|
+
});
|
|
345
|
+
await test.step("Home and End navigation", async () => {
|
|
346
|
+
await firstThumb.press("Home");
|
|
347
|
+
await expect(firstThumb).toHaveValue("0");
|
|
348
|
+
await lastThumb.press("End");
|
|
349
|
+
await expect(lastThumb).toHaveValue("100");
|
|
350
|
+
});
|
|
404
351
|
};
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
await firstTab.evaluate((element) => element.ariaDisabled = "true");
|
|
461
|
-
await options.page.keyboard.press("Home");
|
|
462
|
-
await expect(
|
|
463
|
-
secondTab,
|
|
464
|
-
"should focus second tab when pressing Home if first tab is disabled"
|
|
465
|
-
).toBeFocused();
|
|
466
|
-
await firstTab.evaluate((element) => element.ariaDisabled = null);
|
|
467
|
-
await lastTab.evaluate((element) => element.ariaDisabled = "true");
|
|
468
|
-
await firstTab.focus();
|
|
469
|
-
await options.page.keyboard.press("End");
|
|
470
|
-
await expect(
|
|
471
|
-
options.tablist.getByRole("tab").nth(-2),
|
|
472
|
-
"should focus second last tab when pressing End if last tab is disabled"
|
|
473
|
-
).toBeFocused();
|
|
352
|
+
//#endregion
|
|
353
|
+
//#region src/composables/tabs/createTabs.testing.ts
|
|
354
|
+
/**
|
|
355
|
+
* Playwright utility for executing accessibility testing for tabs.
|
|
356
|
+
* Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
|
|
357
|
+
*/
|
|
358
|
+
var tabsTesting = async (options) => {
|
|
359
|
+
await expect(options.tablist, "tablist element must have role \"tablist\"").toHaveRole("tablist");
|
|
360
|
+
await expect(options.tablist, "tablist must have an accessible label").toHaveAttribute("aria-label");
|
|
361
|
+
const firstTab = options.tablist.getByRole("tab").first();
|
|
362
|
+
const secondTab = options.tablist.getByRole("tab").nth(1);
|
|
363
|
+
const lastTab = options.tablist.getByRole("tab").last();
|
|
364
|
+
const { tabId, panelId } = await expectTabAttributes(firstTab, true);
|
|
365
|
+
await expectPanelAttributes(options.page.locator(`#${panelId}`), tabId);
|
|
366
|
+
await secondTab.click();
|
|
367
|
+
const { tabId: tabId2, panelId: panelId2 } = await expectTabAttributes(secondTab, true);
|
|
368
|
+
await expectPanelAttributes(options.page.locator(`#${panelId2}`), tabId2);
|
|
369
|
+
await expect(secondTab, "second tab should be focused").toBeFocused();
|
|
370
|
+
await expect(options.page.getByRole("tabpanel"), "should hide previous panel").toHaveCount(1);
|
|
371
|
+
await options.page.keyboard.press("ArrowLeft");
|
|
372
|
+
await expect(firstTab, "should focus previous tab when pressing arrow left").toBeFocused();
|
|
373
|
+
await options.page.keyboard.press("End");
|
|
374
|
+
await expect(lastTab, "should focus last tab when pressing End").toBeFocused();
|
|
375
|
+
await options.page.keyboard.press("ArrowRight");
|
|
376
|
+
await expect(firstTab, "should focus first tab when last tab is focused and pressing arrow right").toBeFocused();
|
|
377
|
+
await options.page.keyboard.press("ArrowRight");
|
|
378
|
+
await expect(secondTab, "should focus next tab when pressing arrow right").toBeFocused();
|
|
379
|
+
await options.page.keyboard.press("Home");
|
|
380
|
+
await expect(firstTab, "should focus first tab when pressing Home").toBeFocused();
|
|
381
|
+
await options.page.keyboard.press("ArrowLeft");
|
|
382
|
+
await expect(lastTab, "should focus last tab when first tab is focused and pressing arrow left").toBeFocused();
|
|
383
|
+
await options.page.keyboard.press("Enter");
|
|
384
|
+
const { tabId: tabIdLast, panelId: panelIdLast } = await expectTabAttributes(lastTab, true);
|
|
385
|
+
await expectPanelAttributes(options.page.locator(`#${panelIdLast}`), tabIdLast);
|
|
386
|
+
await firstTab.focus();
|
|
387
|
+
await options.page.keyboard.press("Space");
|
|
388
|
+
const { tabId: tabIdFirst, panelId: panelIdFirst } = await expectTabAttributes(firstTab, true);
|
|
389
|
+
await expectPanelAttributes(options.page.locator(`#${panelIdFirst}`), tabIdFirst);
|
|
390
|
+
await firstTab.click();
|
|
391
|
+
await secondTab.evaluate((element) => element.ariaDisabled = "true");
|
|
392
|
+
await expect(secondTab, "should disable second tab when setting aria-disabled").toBeDisabled();
|
|
393
|
+
await options.page.keyboard.press("ArrowRight");
|
|
394
|
+
await expect(secondTab, "should not focus second tab if its aria-disabled").not.toBeFocused();
|
|
395
|
+
await expect(options.tablist.getByRole("tab").nth(2), "should focus next tab after disabled one when pressing arrow right").toBeFocused();
|
|
396
|
+
await options.page.keyboard.press("ArrowLeft");
|
|
397
|
+
await expect(firstTab, "should focus tab before disabled one when pressing arrow left").toBeFocused();
|
|
398
|
+
await secondTab.evaluate((element) => element.ariaDisabled = null);
|
|
399
|
+
await firstTab.evaluate((element) => element.ariaDisabled = "true");
|
|
400
|
+
await options.page.keyboard.press("Home");
|
|
401
|
+
await expect(secondTab, "should focus second tab when pressing Home if first tab is disabled").toBeFocused();
|
|
402
|
+
await firstTab.evaluate((element) => element.ariaDisabled = null);
|
|
403
|
+
await lastTab.evaluate((element) => element.ariaDisabled = "true");
|
|
404
|
+
await firstTab.focus();
|
|
405
|
+
await options.page.keyboard.press("End");
|
|
406
|
+
await expect(options.tablist.getByRole("tab").nth(-2), "should focus second last tab when pressing End if last tab is disabled").toBeFocused();
|
|
474
407
|
};
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
408
|
+
/**
|
|
409
|
+
* Executes accessibility tests for a single tab.
|
|
410
|
+
*
|
|
411
|
+
* @param tab Locator of the tab.
|
|
412
|
+
* @param selected Whether the tab is expected to be selected
|
|
413
|
+
*/
|
|
414
|
+
var expectTabAttributes = async (tab, selected) => {
|
|
415
|
+
await expect(tab, "tab must have role \"tab\"").toHaveRole("tab");
|
|
416
|
+
await expect(tab, "tab must have an ID").toHaveAttribute("id");
|
|
417
|
+
await expect(tab, "tab must have \"aria-selected\" set").toHaveAttribute("aria-selected", String(selected));
|
|
418
|
+
await expect(tab, "tab must have \"aria-controls\" set").toHaveAttribute("aria-controls");
|
|
419
|
+
if (selected) await expect(tab, "selected tab should be focusable").toHaveAttribute("tabindex", "0");
|
|
420
|
+
else await expect(tab, "unselected tab should NOT be focusable").toHaveAttribute("tabindex", "-1");
|
|
421
|
+
return {
|
|
422
|
+
tabId: await tab.getAttribute("id"),
|
|
423
|
+
panelId: await tab.getAttribute("aria-controls")
|
|
424
|
+
};
|
|
489
425
|
};
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
426
|
+
/**
|
|
427
|
+
* Executes accessibility tests for a single tab panel.
|
|
428
|
+
*
|
|
429
|
+
* @param panel Locator of the panel
|
|
430
|
+
* @param tabId Corresponding tab id
|
|
431
|
+
*/
|
|
432
|
+
var expectPanelAttributes = async (panel, tabId) => {
|
|
433
|
+
await expect(panel, "panel should be visible").toBeVisible();
|
|
434
|
+
await expect(panel, "panel must have role \"tabpanel\"").toHaveRole("tabpanel");
|
|
435
|
+
await expect(panel, "panel must have an ID").toHaveAttribute("id");
|
|
436
|
+
await expect(panel, "panel must have \"aria-labelledby\" set").toHaveAttribute("aria-labelledby", tabId);
|
|
498
437
|
};
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
await expect(
|
|
516
|
-
button,
|
|
517
|
-
"button must not switch it's label after a state change"
|
|
518
|
-
).toHaveAccessibleName(labelText);
|
|
519
|
-
await button.press("Space");
|
|
520
|
-
await expect(button, `button must toggle 'aria-pressed' attribute after click.`).toHaveAttribute(
|
|
521
|
-
"aria-pressed",
|
|
522
|
-
String(initiallyPressed)
|
|
523
|
-
);
|
|
524
|
-
await expect(
|
|
525
|
-
button,
|
|
526
|
-
"button must not switch it's label after a state change"
|
|
527
|
-
).toHaveAccessibleName(labelText);
|
|
528
|
-
};
|
|
529
|
-
export {
|
|
530
|
-
comboboxSelectOnlyTesting,
|
|
531
|
-
comboboxTesting,
|
|
532
|
-
listboxTesting,
|
|
533
|
-
menuButtonTesting,
|
|
534
|
-
navigationTesting,
|
|
535
|
-
rangeSliderTesting,
|
|
536
|
-
singleSliderTesting,
|
|
537
|
-
tabsTesting,
|
|
538
|
-
toggleButtonTesting
|
|
438
|
+
//#endregion
|
|
439
|
+
//#region src/composables/toggleButton/createToggleButton.testing.ts
|
|
440
|
+
/**
|
|
441
|
+
* Playwright utility for executing accessibility testing for a navigation menu.
|
|
442
|
+
* Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links.
|
|
443
|
+
*/
|
|
444
|
+
var toggleButtonTesting = async ({ button, labelText, initiallyPressed }) => {
|
|
445
|
+
await expect(button, `button must have 'aria-pressed' attribute to be recognized as toggle button.`).toHaveAttribute("aria-pressed", String(initiallyPressed));
|
|
446
|
+
await expect(button).toBeVisible();
|
|
447
|
+
await expect(button).toHaveAccessibleName(labelText);
|
|
448
|
+
await button.click();
|
|
449
|
+
await expect(button, `button must toggle 'aria-pressed' attribute after click.`).toHaveAttribute("aria-pressed", String(!initiallyPressed));
|
|
450
|
+
await expect(button, "button must not switch it's label after a state change").toHaveAccessibleName(labelText);
|
|
451
|
+
await button.press("Space");
|
|
452
|
+
await expect(button, `button must toggle 'aria-pressed' attribute after click.`).toHaveAttribute("aria-pressed", String(initiallyPressed));
|
|
453
|
+
await expect(button, "button must not switch it's label after a state change").toHaveAccessibleName(labelText);
|
|
539
454
|
};
|
|
455
|
+
//#endregion
|
|
456
|
+
export { comboboxSelectOnlyTesting, comboboxTesting, listboxTesting, menuButtonTesting, navigationTesting, rangeSliderTesting, singleSliderTesting, tabsTesting, toggleButtonTesting };
|