aria-ease 6.1.0 → 6.2.1
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/bin/{audit-5JJ3XK46.js → audit-RM6TCZ5C.js} +17 -5
- package/bin/cli.cjs +33 -18
- package/bin/cli.js +17 -14
- package/dist/index.cjs +65 -14
- package/dist/index.d.cts +12 -5
- package/dist/index.d.ts +12 -5
- package/dist/index.js +65 -14
- package/dist/src/{Types.d-B-NDbH_q.d.cts → Types.d-CxWrr421.d.cts} +12 -1
- package/dist/src/{Types.d-B-NDbH_q.d.ts → Types.d-CxWrr421.d.ts} +12 -1
- package/dist/src/accordion/index.cjs +23 -3
- package/dist/src/accordion/index.d.cts +1 -1
- package/dist/src/accordion/index.d.ts +1 -1
- package/dist/src/accordion/index.js +23 -3
- package/dist/src/block/index.cjs +1 -1
- package/dist/src/block/index.d.cts +1 -1
- package/dist/src/block/index.d.ts +1 -1
- package/dist/src/block/index.js +1 -1
- package/dist/src/checkbox/index.d.cts +1 -1
- package/dist/src/checkbox/index.d.ts +1 -1
- package/dist/src/{chunk-TBJ6MIC7.js → chunk-ZJXZZDUR.js} +7 -1
- package/dist/src/combobox/index.cjs +5 -5
- package/dist/src/combobox/index.d.cts +1 -1
- package/dist/src/combobox/index.d.ts +1 -1
- package/dist/src/combobox/index.js +5 -5
- package/dist/src/menu/index.cjs +37 -6
- package/dist/src/menu/index.d.cts +2 -6
- package/dist/src/menu/index.d.ts +2 -6
- package/dist/src/menu/index.js +31 -6
- package/dist/src/radio/index.d.cts +1 -1
- package/dist/src/radio/index.d.ts +1 -1
- package/dist/src/toggle/index.d.cts +1 -1
- package/dist/src/toggle/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -3,17 +3,26 @@ import "./chunk-I2KLQ2HA.js";
|
|
|
3
3
|
// src/utils/audit/src/audit/audit.ts
|
|
4
4
|
import AxeBuilder from "@axe-core/playwright";
|
|
5
5
|
import { chromium } from "playwright";
|
|
6
|
+
async function createAuditBrowser() {
|
|
7
|
+
return await chromium.launch({ headless: true });
|
|
8
|
+
}
|
|
6
9
|
async function runAudit(url, options) {
|
|
7
|
-
let browser;
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
+
let browser = options.browser;
|
|
11
|
+
let browserCreated = false;
|
|
12
|
+
const timeout = 6e4;
|
|
13
|
+
const waitUntil = "domcontentloaded";
|
|
10
14
|
try {
|
|
11
|
-
browser
|
|
15
|
+
if (!browser) {
|
|
16
|
+
browser = await chromium.launch({ headless: true });
|
|
17
|
+
browserCreated = true;
|
|
18
|
+
}
|
|
12
19
|
const context = await browser.newContext();
|
|
13
20
|
const page = await context.newPage();
|
|
14
21
|
await page.goto(url, { waitUntil, timeout });
|
|
15
22
|
const axe = new AxeBuilder({ page });
|
|
16
23
|
const axeResults = await axe.analyze();
|
|
24
|
+
await page.close();
|
|
25
|
+
await context.close();
|
|
17
26
|
return axeResults;
|
|
18
27
|
} catch (error) {
|
|
19
28
|
if (error instanceof Error) {
|
|
@@ -38,9 +47,12 @@ async function runAudit(url, options) {
|
|
|
38
47
|
}
|
|
39
48
|
throw error;
|
|
40
49
|
} finally {
|
|
41
|
-
if (browser
|
|
50
|
+
if (browser && browserCreated) {
|
|
51
|
+
await browser.close();
|
|
52
|
+
}
|
|
42
53
|
}
|
|
43
54
|
}
|
|
44
55
|
export {
|
|
56
|
+
createAuditBrowser,
|
|
45
57
|
runAudit
|
|
46
58
|
};
|
package/bin/cli.cjs
CHANGED
|
@@ -34,19 +34,29 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
34
34
|
// src/utils/audit/src/audit/audit.ts
|
|
35
35
|
var audit_exports = {};
|
|
36
36
|
__export(audit_exports, {
|
|
37
|
+
createAuditBrowser: () => createAuditBrowser,
|
|
37
38
|
runAudit: () => runAudit
|
|
38
39
|
});
|
|
40
|
+
async function createAuditBrowser() {
|
|
41
|
+
return await import_playwright2.chromium.launch({ headless: true });
|
|
42
|
+
}
|
|
39
43
|
async function runAudit(url, options) {
|
|
40
|
-
let browser;
|
|
41
|
-
|
|
42
|
-
const
|
|
44
|
+
let browser = options.browser;
|
|
45
|
+
let browserCreated = false;
|
|
46
|
+
const timeout = 6e4;
|
|
47
|
+
const waitUntil = "domcontentloaded";
|
|
43
48
|
try {
|
|
44
|
-
browser
|
|
49
|
+
if (!browser) {
|
|
50
|
+
browser = await import_playwright2.chromium.launch({ headless: true });
|
|
51
|
+
browserCreated = true;
|
|
52
|
+
}
|
|
45
53
|
const context = await browser.newContext();
|
|
46
54
|
const page = await context.newPage();
|
|
47
55
|
await page.goto(url, { waitUntil, timeout });
|
|
48
56
|
const axe2 = new import_playwright.default({ page });
|
|
49
57
|
const axeResults = await axe2.analyze();
|
|
58
|
+
await page.close();
|
|
59
|
+
await context.close();
|
|
50
60
|
return axeResults;
|
|
51
61
|
} catch (error) {
|
|
52
62
|
if (error instanceof Error) {
|
|
@@ -71,7 +81,9 @@ async function runAudit(url, options) {
|
|
|
71
81
|
}
|
|
72
82
|
throw error;
|
|
73
83
|
} finally {
|
|
74
|
-
if (browser
|
|
84
|
+
if (browser && browserCreated) {
|
|
85
|
+
await browser.close();
|
|
86
|
+
}
|
|
75
87
|
}
|
|
76
88
|
}
|
|
77
89
|
var import_playwright, import_playwright2;
|
|
@@ -1430,22 +1442,25 @@ program.command("audit").description("Run axe-core powered accessibility audit o
|
|
|
1430
1442
|
process.exit(1);
|
|
1431
1443
|
}
|
|
1432
1444
|
const allResults = [];
|
|
1433
|
-
const
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1445
|
+
const { createAuditBrowser: createAuditBrowser2 } = await Promise.resolve().then(() => (init_audit(), audit_exports));
|
|
1446
|
+
const browser = await createAuditBrowser2();
|
|
1447
|
+
try {
|
|
1448
|
+
const auditOptions = { browser };
|
|
1449
|
+
for (const url of urls) {
|
|
1450
|
+
console.log(import_chalk.default.yellow(`\u{1F50E} Auditing: ${url}`));
|
|
1451
|
+
try {
|
|
1452
|
+
const result = await runAudit2(url, auditOptions);
|
|
1453
|
+
allResults.push({ url, result });
|
|
1454
|
+
console.log(import_chalk.default.green(`\u2705 Completed audit for ${url}
|
|
1443
1455
|
`));
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1456
|
+
} catch (error) {
|
|
1457
|
+
if (error instanceof Error && error.message) {
|
|
1458
|
+
console.log(import_chalk.default.red(`\u274C Failed auditing ${url}: ${error.message}`));
|
|
1459
|
+
}
|
|
1447
1460
|
}
|
|
1448
1461
|
}
|
|
1462
|
+
} finally {
|
|
1463
|
+
await browser.close();
|
|
1449
1464
|
}
|
|
1450
1465
|
const hasResults = allResults.some((r) => r.result && r.result.violations && r.result.violations.length > 0);
|
|
1451
1466
|
if (!hasResults) {
|
package/bin/cli.js
CHANGED
|
@@ -128,7 +128,7 @@ var program = new Command();
|
|
|
128
128
|
program.name("aria-ease").description("Run accessibility tests and audits").version("2.2.3");
|
|
129
129
|
program.command("audit").description("Run axe-core powered accessibility audit on webpages").option("-u, --url <url>", "Single URL to audit").option("-f, --format <format>", "Output format for the audit report: json | csv | html | all", "all").option("-o, --out <path>", "Directory to save the audit report", "./accessibility-reports/audit").action(async (opts) => {
|
|
130
130
|
console.log(chalk.cyanBright("\u{1F680} Starting accessibility audit...\n"));
|
|
131
|
-
const { runAudit } = await import("./audit-
|
|
131
|
+
const { runAudit } = await import("./audit-RM6TCZ5C.js");
|
|
132
132
|
const { formatResults } = await import("./formatters-32KQIIYS.js");
|
|
133
133
|
const { config, configPath, errors } = await loadConfig(process.cwd());
|
|
134
134
|
if (configPath) {
|
|
@@ -155,22 +155,25 @@ program.command("audit").description("Run axe-core powered accessibility audit o
|
|
|
155
155
|
process.exit(1);
|
|
156
156
|
}
|
|
157
157
|
const allResults = [];
|
|
158
|
-
const
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
158
|
+
const { createAuditBrowser } = await import("./audit-RM6TCZ5C.js");
|
|
159
|
+
const browser = await createAuditBrowser();
|
|
160
|
+
try {
|
|
161
|
+
const auditOptions = { browser };
|
|
162
|
+
for (const url of urls) {
|
|
163
|
+
console.log(chalk.yellow(`\u{1F50E} Auditing: ${url}`));
|
|
164
|
+
try {
|
|
165
|
+
const result = await runAudit(url, auditOptions);
|
|
166
|
+
allResults.push({ url, result });
|
|
167
|
+
console.log(chalk.green(`\u2705 Completed audit for ${url}
|
|
168
168
|
`));
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
169
|
+
} catch (error) {
|
|
170
|
+
if (error instanceof Error && error.message) {
|
|
171
|
+
console.log(chalk.red(`\u274C Failed auditing ${url}: ${error.message}`));
|
|
172
|
+
}
|
|
172
173
|
}
|
|
173
174
|
}
|
|
175
|
+
} finally {
|
|
176
|
+
await browser.close();
|
|
174
177
|
}
|
|
175
178
|
const hasResults = allResults.some((r) => r.result && r.result.violations && r.result.violations.length > 0);
|
|
176
179
|
if (!hasResults) {
|
package/dist/index.cjs
CHANGED
|
@@ -884,7 +884,11 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
|
|
|
884
884
|
trigger.setAttribute("aria-expanded", "true");
|
|
885
885
|
panel.style.display = "block";
|
|
886
886
|
if (callback?.onExpand) {
|
|
887
|
-
|
|
887
|
+
try {
|
|
888
|
+
callback.onExpand(index);
|
|
889
|
+
} catch (error) {
|
|
890
|
+
console.error("[aria-ease] Error in accordion onExpand callback:", error);
|
|
891
|
+
}
|
|
888
892
|
}
|
|
889
893
|
}
|
|
890
894
|
function collapseItem(index) {
|
|
@@ -897,7 +901,11 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
|
|
|
897
901
|
trigger.setAttribute("aria-expanded", "false");
|
|
898
902
|
panel.style.display = "none";
|
|
899
903
|
if (callback?.onCollapse) {
|
|
900
|
-
|
|
904
|
+
try {
|
|
905
|
+
callback.onCollapse(index);
|
|
906
|
+
} catch (error) {
|
|
907
|
+
console.error("[aria-ease] Error in accordion onCollapse callback:", error);
|
|
908
|
+
}
|
|
901
909
|
}
|
|
902
910
|
}
|
|
903
911
|
function toggleItem(index) {
|
|
@@ -985,13 +993,25 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
|
|
|
985
993
|
collapseItem(index);
|
|
986
994
|
});
|
|
987
995
|
}
|
|
996
|
+
function refresh() {
|
|
997
|
+
removeListeners();
|
|
998
|
+
const newTriggers = Array.from(accordionContainer.querySelectorAll(`.${triggersClass}`));
|
|
999
|
+
const newPanels = Array.from(accordionContainer.querySelectorAll(`.${panelsClass}`));
|
|
1000
|
+
triggers.length = 0;
|
|
1001
|
+
triggers.push(...newTriggers);
|
|
1002
|
+
panels.length = 0;
|
|
1003
|
+
panels.push(...newPanels);
|
|
1004
|
+
initialize();
|
|
1005
|
+
addListeners();
|
|
1006
|
+
}
|
|
988
1007
|
initialize();
|
|
989
1008
|
addListeners();
|
|
990
1009
|
return {
|
|
991
1010
|
expandItem,
|
|
992
1011
|
collapseItem,
|
|
993
1012
|
toggleItem,
|
|
994
|
-
cleanup
|
|
1013
|
+
cleanup,
|
|
1014
|
+
refresh
|
|
995
1015
|
};
|
|
996
1016
|
}
|
|
997
1017
|
|
|
@@ -1033,7 +1053,7 @@ function hasSubmenu(menuItem) {
|
|
|
1033
1053
|
function getSubmenuId(menuItem) {
|
|
1034
1054
|
return menuItem.getAttribute("aria-controls");
|
|
1035
1055
|
}
|
|
1036
|
-
function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu) {
|
|
1056
|
+
function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu, onOpenChange) {
|
|
1037
1057
|
const currentEl = elementItems.item(elementItemIndex);
|
|
1038
1058
|
switch (event.key) {
|
|
1039
1059
|
case "ArrowUp":
|
|
@@ -1090,6 +1110,9 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
|
|
|
1090
1110
|
if (menuElementDiv && triggerButton) {
|
|
1091
1111
|
if (getComputedStyle(menuElementDiv).display === "block") {
|
|
1092
1112
|
handleMenuClose(menuElementDiv, triggerButton);
|
|
1113
|
+
if (onOpenChange) {
|
|
1114
|
+
onOpenChange(false);
|
|
1115
|
+
}
|
|
1093
1116
|
}
|
|
1094
1117
|
triggerButton.focus();
|
|
1095
1118
|
}
|
|
@@ -1109,6 +1132,9 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
|
|
|
1109
1132
|
case "Tab": {
|
|
1110
1133
|
if (menuElementDiv && triggerButton && (!event.shiftKey || event.shiftKey)) {
|
|
1111
1134
|
handleMenuClose(menuElementDiv, triggerButton);
|
|
1135
|
+
if (onOpenChange) {
|
|
1136
|
+
onOpenChange(false);
|
|
1137
|
+
}
|
|
1112
1138
|
}
|
|
1113
1139
|
break;
|
|
1114
1140
|
}
|
|
@@ -1294,7 +1320,7 @@ function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }) {
|
|
|
1294
1320
|
}
|
|
1295
1321
|
|
|
1296
1322
|
// src/menu/src/makeMenuAccessible/makeMenuAccessible.ts
|
|
1297
|
-
function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
1323
|
+
function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }) {
|
|
1298
1324
|
const menuDiv = document.querySelector(`#${menuId}`);
|
|
1299
1325
|
if (!menuDiv) {
|
|
1300
1326
|
console.error(`[aria-ease] Element with id="${menuId}" not found. Make sure the menu element exists before calling makeMenuAccessible.`);
|
|
@@ -1354,8 +1380,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
1354
1380
|
const nodeListLike = {
|
|
1355
1381
|
length: items.length,
|
|
1356
1382
|
item: (index) => items[index],
|
|
1357
|
-
forEach: (
|
|
1358
|
-
items.forEach(
|
|
1383
|
+
forEach: (callback2) => {
|
|
1384
|
+
items.forEach(callback2);
|
|
1359
1385
|
},
|
|
1360
1386
|
[Symbol.iterator]: function* () {
|
|
1361
1387
|
for (const item of items) {
|
|
@@ -1399,7 +1425,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
1399
1425
|
submenuInstance = makeMenuAccessible({
|
|
1400
1426
|
menuId: submenuId,
|
|
1401
1427
|
menuItemsClass,
|
|
1402
|
-
triggerId: submenuTrigger.id
|
|
1428
|
+
triggerId: submenuTrigger.id,
|
|
1429
|
+
callback
|
|
1403
1430
|
});
|
|
1404
1431
|
submenuInstances.set(submenuId, submenuInstance);
|
|
1405
1432
|
}
|
|
@@ -1408,6 +1435,15 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
1408
1435
|
function closeSubmenu() {
|
|
1409
1436
|
closeMenu();
|
|
1410
1437
|
}
|
|
1438
|
+
function onOpenChange(isOpen) {
|
|
1439
|
+
if (callback?.onOpenChange) {
|
|
1440
|
+
try {
|
|
1441
|
+
callback.onOpenChange(isOpen);
|
|
1442
|
+
} catch (error) {
|
|
1443
|
+
console.error("[aria-ease] Error in menu onOpenChange callback:", error);
|
|
1444
|
+
}
|
|
1445
|
+
}
|
|
1446
|
+
}
|
|
1411
1447
|
function addListeners() {
|
|
1412
1448
|
const items = getFilteredItems();
|
|
1413
1449
|
const nodeListLike = toNodeListLike(items);
|
|
@@ -1420,7 +1456,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
1420
1456
|
menuDiv,
|
|
1421
1457
|
triggerButton,
|
|
1422
1458
|
openSubmenu,
|
|
1423
|
-
closeSubmenu
|
|
1459
|
+
closeSubmenu,
|
|
1460
|
+
onOpenChange
|
|
1424
1461
|
);
|
|
1425
1462
|
menuItem.addEventListener("keydown", handler);
|
|
1426
1463
|
handlerMap.set(menuItem, handler);
|
|
@@ -1445,12 +1482,26 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
1445
1482
|
if (items && items.length > 0) {
|
|
1446
1483
|
items[0].focus();
|
|
1447
1484
|
}
|
|
1485
|
+
if (callback?.onOpenChange) {
|
|
1486
|
+
try {
|
|
1487
|
+
callback.onOpenChange(true);
|
|
1488
|
+
} catch (error) {
|
|
1489
|
+
console.error("[aria-ease] Error in menu onOpenChange callback:", error);
|
|
1490
|
+
}
|
|
1491
|
+
}
|
|
1448
1492
|
}
|
|
1449
1493
|
function closeMenu() {
|
|
1450
1494
|
setAria(false);
|
|
1451
1495
|
menuDiv.style.display = "none";
|
|
1452
1496
|
removeListeners();
|
|
1453
1497
|
triggerButton.focus();
|
|
1498
|
+
if (callback?.onOpenChange) {
|
|
1499
|
+
try {
|
|
1500
|
+
callback.onOpenChange(false);
|
|
1501
|
+
} catch (error) {
|
|
1502
|
+
console.error("[aria-ease] Error in menu onOpenChange callback:", error);
|
|
1503
|
+
}
|
|
1504
|
+
}
|
|
1454
1505
|
}
|
|
1455
1506
|
function intializeMenuItems() {
|
|
1456
1507
|
const items = getItems();
|
|
@@ -1812,7 +1863,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
1812
1863
|
try {
|
|
1813
1864
|
callback.onActiveDescendantChange(itemId, activeItem);
|
|
1814
1865
|
} catch (error) {
|
|
1815
|
-
console.error("[aria-ease] Error in onActiveDescendantChange callback:", error);
|
|
1866
|
+
console.error("[aria-ease] Error in combobox onActiveDescendantChange callback:", error);
|
|
1816
1867
|
}
|
|
1817
1868
|
}
|
|
1818
1869
|
} else {
|
|
@@ -1827,7 +1878,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
1827
1878
|
try {
|
|
1828
1879
|
callback.onOpenChange(true);
|
|
1829
1880
|
} catch (error) {
|
|
1830
|
-
console.error("[aria-ease] Error in onOpenChange callback:", error);
|
|
1881
|
+
console.error("[aria-ease] Error in combobox onOpenChange callback:", error);
|
|
1831
1882
|
}
|
|
1832
1883
|
}
|
|
1833
1884
|
}
|
|
@@ -1842,7 +1893,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
1842
1893
|
try {
|
|
1843
1894
|
callback.onOpenChange(false);
|
|
1844
1895
|
} catch (error) {
|
|
1845
|
-
console.error("[aria-ease] Error in onOpenChange callback:", error);
|
|
1896
|
+
console.error("[aria-ease] Error in combobox onOpenChange callback:", error);
|
|
1846
1897
|
}
|
|
1847
1898
|
}
|
|
1848
1899
|
}
|
|
@@ -1854,7 +1905,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
1854
1905
|
try {
|
|
1855
1906
|
callback.onSelect(item);
|
|
1856
1907
|
} catch (error) {
|
|
1857
|
-
console.error("[aria-ease] Error in onSelect callback:", error);
|
|
1908
|
+
console.error("[aria-ease] Error in combobox onSelect callback:", error);
|
|
1858
1909
|
}
|
|
1859
1910
|
}
|
|
1860
1911
|
}
|
|
@@ -1899,7 +1950,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
1899
1950
|
try {
|
|
1900
1951
|
callback.onClear();
|
|
1901
1952
|
} catch (error) {
|
|
1902
|
-
console.error("[aria-ease] Error in onClear callback:", error);
|
|
1953
|
+
console.error("[aria-ease] Error in combobox onClear callback:", error);
|
|
1903
1954
|
}
|
|
1904
1955
|
}
|
|
1905
1956
|
}
|
package/dist/index.d.cts
CHANGED
|
@@ -56,6 +56,17 @@ interface ComboboxCallback {
|
|
|
56
56
|
onClear?: () => void;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
+
interface MenuConfig {
|
|
60
|
+
menuId: string;
|
|
61
|
+
menuItemsClass: string;
|
|
62
|
+
triggerId: string;
|
|
63
|
+
callback: MenuCallback;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
interface MenuCallback {
|
|
67
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
68
|
+
}
|
|
69
|
+
|
|
59
70
|
/**
|
|
60
71
|
* Makes an accordion accessible by managing ARIA attributes, keyboard navigation, and state.
|
|
61
72
|
* Handles multiple accordion items with proper focus management and keyboard interactions.
|
|
@@ -100,11 +111,7 @@ declare function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }: Ch
|
|
|
100
111
|
* @param {string} triggerId - The id of the button that triggers the menu.
|
|
101
112
|
*/
|
|
102
113
|
|
|
103
|
-
declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId }:
|
|
104
|
-
menuId: string;
|
|
105
|
-
menuItemsClass: string;
|
|
106
|
-
triggerId: string;
|
|
107
|
-
}): AccessibilityInstance;
|
|
114
|
+
declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }: MenuConfig): AccessibilityInstance;
|
|
108
115
|
|
|
109
116
|
/**
|
|
110
117
|
* Makes a radio group accessible by managing ARIA attributes, keyboard navigation, and state.
|
package/dist/index.d.ts
CHANGED
|
@@ -56,6 +56,17 @@ interface ComboboxCallback {
|
|
|
56
56
|
onClear?: () => void;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
+
interface MenuConfig {
|
|
60
|
+
menuId: string;
|
|
61
|
+
menuItemsClass: string;
|
|
62
|
+
triggerId: string;
|
|
63
|
+
callback: MenuCallback;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
interface MenuCallback {
|
|
67
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
68
|
+
}
|
|
69
|
+
|
|
59
70
|
/**
|
|
60
71
|
* Makes an accordion accessible by managing ARIA attributes, keyboard navigation, and state.
|
|
61
72
|
* Handles multiple accordion items with proper focus management and keyboard interactions.
|
|
@@ -100,11 +111,7 @@ declare function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }: Ch
|
|
|
100
111
|
* @param {string} triggerId - The id of the button that triggers the menu.
|
|
101
112
|
*/
|
|
102
113
|
|
|
103
|
-
declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId }:
|
|
104
|
-
menuId: string;
|
|
105
|
-
menuItemsClass: string;
|
|
106
|
-
triggerId: string;
|
|
107
|
-
}): AccessibilityInstance;
|
|
114
|
+
declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }: MenuConfig): AccessibilityInstance;
|
|
108
115
|
|
|
109
116
|
/**
|
|
110
117
|
* Makes a radio group accessible by managing ARIA attributes, keyboard navigation, and state.
|
package/dist/index.js
CHANGED
|
@@ -57,7 +57,11 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
|
|
|
57
57
|
trigger.setAttribute("aria-expanded", "true");
|
|
58
58
|
panel.style.display = "block";
|
|
59
59
|
if (callback?.onExpand) {
|
|
60
|
-
|
|
60
|
+
try {
|
|
61
|
+
callback.onExpand(index);
|
|
62
|
+
} catch (error) {
|
|
63
|
+
console.error("[aria-ease] Error in accordion onExpand callback:", error);
|
|
64
|
+
}
|
|
61
65
|
}
|
|
62
66
|
}
|
|
63
67
|
function collapseItem(index) {
|
|
@@ -70,7 +74,11 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
|
|
|
70
74
|
trigger.setAttribute("aria-expanded", "false");
|
|
71
75
|
panel.style.display = "none";
|
|
72
76
|
if (callback?.onCollapse) {
|
|
73
|
-
|
|
77
|
+
try {
|
|
78
|
+
callback.onCollapse(index);
|
|
79
|
+
} catch (error) {
|
|
80
|
+
console.error("[aria-ease] Error in accordion onCollapse callback:", error);
|
|
81
|
+
}
|
|
74
82
|
}
|
|
75
83
|
}
|
|
76
84
|
function toggleItem(index) {
|
|
@@ -158,13 +166,25 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
|
|
|
158
166
|
collapseItem(index);
|
|
159
167
|
});
|
|
160
168
|
}
|
|
169
|
+
function refresh() {
|
|
170
|
+
removeListeners();
|
|
171
|
+
const newTriggers = Array.from(accordionContainer.querySelectorAll(`.${triggersClass}`));
|
|
172
|
+
const newPanels = Array.from(accordionContainer.querySelectorAll(`.${panelsClass}`));
|
|
173
|
+
triggers.length = 0;
|
|
174
|
+
triggers.push(...newTriggers);
|
|
175
|
+
panels.length = 0;
|
|
176
|
+
panels.push(...newPanels);
|
|
177
|
+
initialize();
|
|
178
|
+
addListeners();
|
|
179
|
+
}
|
|
161
180
|
initialize();
|
|
162
181
|
addListeners();
|
|
163
182
|
return {
|
|
164
183
|
expandItem,
|
|
165
184
|
collapseItem,
|
|
166
185
|
toggleItem,
|
|
167
|
-
cleanup
|
|
186
|
+
cleanup,
|
|
187
|
+
refresh
|
|
168
188
|
};
|
|
169
189
|
}
|
|
170
190
|
|
|
@@ -206,7 +226,7 @@ function hasSubmenu(menuItem) {
|
|
|
206
226
|
function getSubmenuId(menuItem) {
|
|
207
227
|
return menuItem.getAttribute("aria-controls");
|
|
208
228
|
}
|
|
209
|
-
function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu) {
|
|
229
|
+
function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu, onOpenChange) {
|
|
210
230
|
const currentEl = elementItems.item(elementItemIndex);
|
|
211
231
|
switch (event.key) {
|
|
212
232
|
case "ArrowUp":
|
|
@@ -263,6 +283,9 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
|
|
|
263
283
|
if (menuElementDiv && triggerButton) {
|
|
264
284
|
if (getComputedStyle(menuElementDiv).display === "block") {
|
|
265
285
|
handleMenuClose(menuElementDiv, triggerButton);
|
|
286
|
+
if (onOpenChange) {
|
|
287
|
+
onOpenChange(false);
|
|
288
|
+
}
|
|
266
289
|
}
|
|
267
290
|
triggerButton.focus();
|
|
268
291
|
}
|
|
@@ -282,6 +305,9 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
|
|
|
282
305
|
case "Tab": {
|
|
283
306
|
if (menuElementDiv && triggerButton && (!event.shiftKey || event.shiftKey)) {
|
|
284
307
|
handleMenuClose(menuElementDiv, triggerButton);
|
|
308
|
+
if (onOpenChange) {
|
|
309
|
+
onOpenChange(false);
|
|
310
|
+
}
|
|
285
311
|
}
|
|
286
312
|
break;
|
|
287
313
|
}
|
|
@@ -467,7 +493,7 @@ function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }) {
|
|
|
467
493
|
}
|
|
468
494
|
|
|
469
495
|
// src/menu/src/makeMenuAccessible/makeMenuAccessible.ts
|
|
470
|
-
function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
496
|
+
function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }) {
|
|
471
497
|
const menuDiv = document.querySelector(`#${menuId}`);
|
|
472
498
|
if (!menuDiv) {
|
|
473
499
|
console.error(`[aria-ease] Element with id="${menuId}" not found. Make sure the menu element exists before calling makeMenuAccessible.`);
|
|
@@ -527,8 +553,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
527
553
|
const nodeListLike = {
|
|
528
554
|
length: items.length,
|
|
529
555
|
item: (index) => items[index],
|
|
530
|
-
forEach: (
|
|
531
|
-
items.forEach(
|
|
556
|
+
forEach: (callback2) => {
|
|
557
|
+
items.forEach(callback2);
|
|
532
558
|
},
|
|
533
559
|
[Symbol.iterator]: function* () {
|
|
534
560
|
for (const item of items) {
|
|
@@ -572,7 +598,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
572
598
|
submenuInstance = makeMenuAccessible({
|
|
573
599
|
menuId: submenuId,
|
|
574
600
|
menuItemsClass,
|
|
575
|
-
triggerId: submenuTrigger.id
|
|
601
|
+
triggerId: submenuTrigger.id,
|
|
602
|
+
callback
|
|
576
603
|
});
|
|
577
604
|
submenuInstances.set(submenuId, submenuInstance);
|
|
578
605
|
}
|
|
@@ -581,6 +608,15 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
581
608
|
function closeSubmenu() {
|
|
582
609
|
closeMenu();
|
|
583
610
|
}
|
|
611
|
+
function onOpenChange(isOpen) {
|
|
612
|
+
if (callback?.onOpenChange) {
|
|
613
|
+
try {
|
|
614
|
+
callback.onOpenChange(isOpen);
|
|
615
|
+
} catch (error) {
|
|
616
|
+
console.error("[aria-ease] Error in menu onOpenChange callback:", error);
|
|
617
|
+
}
|
|
618
|
+
}
|
|
619
|
+
}
|
|
584
620
|
function addListeners() {
|
|
585
621
|
const items = getFilteredItems();
|
|
586
622
|
const nodeListLike = toNodeListLike(items);
|
|
@@ -593,7 +629,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
593
629
|
menuDiv,
|
|
594
630
|
triggerButton,
|
|
595
631
|
openSubmenu,
|
|
596
|
-
closeSubmenu
|
|
632
|
+
closeSubmenu,
|
|
633
|
+
onOpenChange
|
|
597
634
|
);
|
|
598
635
|
menuItem.addEventListener("keydown", handler);
|
|
599
636
|
handlerMap.set(menuItem, handler);
|
|
@@ -618,12 +655,26 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
618
655
|
if (items && items.length > 0) {
|
|
619
656
|
items[0].focus();
|
|
620
657
|
}
|
|
658
|
+
if (callback?.onOpenChange) {
|
|
659
|
+
try {
|
|
660
|
+
callback.onOpenChange(true);
|
|
661
|
+
} catch (error) {
|
|
662
|
+
console.error("[aria-ease] Error in menu onOpenChange callback:", error);
|
|
663
|
+
}
|
|
664
|
+
}
|
|
621
665
|
}
|
|
622
666
|
function closeMenu() {
|
|
623
667
|
setAria(false);
|
|
624
668
|
menuDiv.style.display = "none";
|
|
625
669
|
removeListeners();
|
|
626
670
|
triggerButton.focus();
|
|
671
|
+
if (callback?.onOpenChange) {
|
|
672
|
+
try {
|
|
673
|
+
callback.onOpenChange(false);
|
|
674
|
+
} catch (error) {
|
|
675
|
+
console.error("[aria-ease] Error in menu onOpenChange callback:", error);
|
|
676
|
+
}
|
|
677
|
+
}
|
|
627
678
|
}
|
|
628
679
|
function intializeMenuItems() {
|
|
629
680
|
const items = getItems();
|
|
@@ -985,7 +1036,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
985
1036
|
try {
|
|
986
1037
|
callback.onActiveDescendantChange(itemId, activeItem);
|
|
987
1038
|
} catch (error) {
|
|
988
|
-
console.error("[aria-ease] Error in onActiveDescendantChange callback:", error);
|
|
1039
|
+
console.error("[aria-ease] Error in combobox onActiveDescendantChange callback:", error);
|
|
989
1040
|
}
|
|
990
1041
|
}
|
|
991
1042
|
} else {
|
|
@@ -1000,7 +1051,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
1000
1051
|
try {
|
|
1001
1052
|
callback.onOpenChange(true);
|
|
1002
1053
|
} catch (error) {
|
|
1003
|
-
console.error("[aria-ease] Error in onOpenChange callback:", error);
|
|
1054
|
+
console.error("[aria-ease] Error in combobox onOpenChange callback:", error);
|
|
1004
1055
|
}
|
|
1005
1056
|
}
|
|
1006
1057
|
}
|
|
@@ -1015,7 +1066,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
1015
1066
|
try {
|
|
1016
1067
|
callback.onOpenChange(false);
|
|
1017
1068
|
} catch (error) {
|
|
1018
|
-
console.error("[aria-ease] Error in onOpenChange callback:", error);
|
|
1069
|
+
console.error("[aria-ease] Error in combobox onOpenChange callback:", error);
|
|
1019
1070
|
}
|
|
1020
1071
|
}
|
|
1021
1072
|
}
|
|
@@ -1027,7 +1078,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
1027
1078
|
try {
|
|
1028
1079
|
callback.onSelect(item);
|
|
1029
1080
|
} catch (error) {
|
|
1030
|
-
console.error("[aria-ease] Error in onSelect callback:", error);
|
|
1081
|
+
console.error("[aria-ease] Error in combobox onSelect callback:", error);
|
|
1031
1082
|
}
|
|
1032
1083
|
}
|
|
1033
1084
|
}
|
|
@@ -1072,7 +1123,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
1072
1123
|
try {
|
|
1073
1124
|
callback.onClear();
|
|
1074
1125
|
} catch (error) {
|
|
1075
|
-
console.error("[aria-ease] Error in onClear callback:", error);
|
|
1126
|
+
console.error("[aria-ease] Error in combobox onClear callback:", error);
|
|
1076
1127
|
}
|
|
1077
1128
|
}
|
|
1078
1129
|
}
|
|
@@ -50,4 +50,15 @@ interface ComboboxCallback {
|
|
|
50
50
|
onClear?: () => void;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
interface MenuConfig {
|
|
54
|
+
menuId: string;
|
|
55
|
+
menuItemsClass: string;
|
|
56
|
+
triggerId: string;
|
|
57
|
+
callback: MenuCallback;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
interface MenuCallback {
|
|
61
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
export type { AccordionConfig as A, ComboboxConfig as C, MenuConfig as M, AccessibilityInstance as a };
|
|
@@ -50,4 +50,15 @@ interface ComboboxCallback {
|
|
|
50
50
|
onClear?: () => void;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
interface MenuConfig {
|
|
54
|
+
menuId: string;
|
|
55
|
+
menuItemsClass: string;
|
|
56
|
+
triggerId: string;
|
|
57
|
+
callback: MenuCallback;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
interface MenuCallback {
|
|
61
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
export type { AccordionConfig as A, ComboboxConfig as C, MenuConfig as M, AccessibilityInstance as a };
|
|
@@ -53,7 +53,11 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
|
|
|
53
53
|
trigger.setAttribute("aria-expanded", "true");
|
|
54
54
|
panel.style.display = "block";
|
|
55
55
|
if (callback?.onExpand) {
|
|
56
|
-
|
|
56
|
+
try {
|
|
57
|
+
callback.onExpand(index);
|
|
58
|
+
} catch (error) {
|
|
59
|
+
console.error("[aria-ease] Error in accordion onExpand callback:", error);
|
|
60
|
+
}
|
|
57
61
|
}
|
|
58
62
|
}
|
|
59
63
|
function collapseItem(index) {
|
|
@@ -66,7 +70,11 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
|
|
|
66
70
|
trigger.setAttribute("aria-expanded", "false");
|
|
67
71
|
panel.style.display = "none";
|
|
68
72
|
if (callback?.onCollapse) {
|
|
69
|
-
|
|
73
|
+
try {
|
|
74
|
+
callback.onCollapse(index);
|
|
75
|
+
} catch (error) {
|
|
76
|
+
console.error("[aria-ease] Error in accordion onCollapse callback:", error);
|
|
77
|
+
}
|
|
70
78
|
}
|
|
71
79
|
}
|
|
72
80
|
function toggleItem(index) {
|
|
@@ -154,13 +162,25 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
|
|
|
154
162
|
collapseItem(index);
|
|
155
163
|
});
|
|
156
164
|
}
|
|
165
|
+
function refresh() {
|
|
166
|
+
removeListeners();
|
|
167
|
+
const newTriggers = Array.from(accordionContainer.querySelectorAll(`.${triggersClass}`));
|
|
168
|
+
const newPanels = Array.from(accordionContainer.querySelectorAll(`.${panelsClass}`));
|
|
169
|
+
triggers.length = 0;
|
|
170
|
+
triggers.push(...newTriggers);
|
|
171
|
+
panels.length = 0;
|
|
172
|
+
panels.push(...newPanels);
|
|
173
|
+
initialize();
|
|
174
|
+
addListeners();
|
|
175
|
+
}
|
|
157
176
|
initialize();
|
|
158
177
|
addListeners();
|
|
159
178
|
return {
|
|
160
179
|
expandItem,
|
|
161
180
|
collapseItem,
|
|
162
181
|
toggleItem,
|
|
163
|
-
cleanup
|
|
182
|
+
cleanup,
|
|
183
|
+
refresh
|
|
164
184
|
};
|
|
165
185
|
}
|
|
166
186
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { A as AccordionConfig, a as AccessibilityInstance } from '../Types.d-CxWrr421.cjs';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Makes an accordion accessible by managing ARIA attributes, keyboard navigation, and state.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { A as AccordionConfig, a as AccessibilityInstance } from '../Types.d-CxWrr421.js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Makes an accordion accessible by managing ARIA attributes, keyboard navigation, and state.
|
|
@@ -51,7 +51,11 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
|
|
|
51
51
|
trigger.setAttribute("aria-expanded", "true");
|
|
52
52
|
panel.style.display = "block";
|
|
53
53
|
if (callback?.onExpand) {
|
|
54
|
-
|
|
54
|
+
try {
|
|
55
|
+
callback.onExpand(index);
|
|
56
|
+
} catch (error) {
|
|
57
|
+
console.error("[aria-ease] Error in accordion onExpand callback:", error);
|
|
58
|
+
}
|
|
55
59
|
}
|
|
56
60
|
}
|
|
57
61
|
function collapseItem(index) {
|
|
@@ -64,7 +68,11 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
|
|
|
64
68
|
trigger.setAttribute("aria-expanded", "false");
|
|
65
69
|
panel.style.display = "none";
|
|
66
70
|
if (callback?.onCollapse) {
|
|
67
|
-
|
|
71
|
+
try {
|
|
72
|
+
callback.onCollapse(index);
|
|
73
|
+
} catch (error) {
|
|
74
|
+
console.error("[aria-ease] Error in accordion onCollapse callback:", error);
|
|
75
|
+
}
|
|
68
76
|
}
|
|
69
77
|
}
|
|
70
78
|
function toggleItem(index) {
|
|
@@ -152,13 +160,25 @@ function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allo
|
|
|
152
160
|
collapseItem(index);
|
|
153
161
|
});
|
|
154
162
|
}
|
|
163
|
+
function refresh() {
|
|
164
|
+
removeListeners();
|
|
165
|
+
const newTriggers = Array.from(accordionContainer.querySelectorAll(`.${triggersClass}`));
|
|
166
|
+
const newPanels = Array.from(accordionContainer.querySelectorAll(`.${panelsClass}`));
|
|
167
|
+
triggers.length = 0;
|
|
168
|
+
triggers.push(...newTriggers);
|
|
169
|
+
panels.length = 0;
|
|
170
|
+
panels.push(...newPanels);
|
|
171
|
+
initialize();
|
|
172
|
+
addListeners();
|
|
173
|
+
}
|
|
155
174
|
initialize();
|
|
156
175
|
addListeners();
|
|
157
176
|
return {
|
|
158
177
|
expandItem,
|
|
159
178
|
collapseItem,
|
|
160
179
|
toggleItem,
|
|
161
|
-
cleanup
|
|
180
|
+
cleanup,
|
|
181
|
+
refresh
|
|
162
182
|
};
|
|
163
183
|
}
|
|
164
184
|
|
package/dist/src/block/index.cjs
CHANGED
|
@@ -26,7 +26,7 @@ function isClickableButNotSemantic(el) {
|
|
|
26
26
|
function hasSubmenu(menuItem) {
|
|
27
27
|
return menuItem.getAttribute("aria-haspopup") === "true" || menuItem.getAttribute("aria-haspopup") === "menu";
|
|
28
28
|
}
|
|
29
|
-
function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu) {
|
|
29
|
+
function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu, onOpenChange) {
|
|
30
30
|
const currentEl = elementItems.item(elementItemIndex);
|
|
31
31
|
switch (event.key) {
|
|
32
32
|
case "ArrowUp":
|
package/dist/src/block/index.js
CHANGED
|
@@ -36,7 +36,7 @@ function hasSubmenu(menuItem) {
|
|
|
36
36
|
function getSubmenuId(menuItem) {
|
|
37
37
|
return menuItem.getAttribute("aria-controls");
|
|
38
38
|
}
|
|
39
|
-
function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu) {
|
|
39
|
+
function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu, onOpenChange) {
|
|
40
40
|
const currentEl = elementItems.item(elementItemIndex);
|
|
41
41
|
switch (event.key) {
|
|
42
42
|
case "ArrowUp":
|
|
@@ -93,6 +93,9 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
|
|
|
93
93
|
if (menuElementDiv && triggerButton) {
|
|
94
94
|
if (getComputedStyle(menuElementDiv).display === "block") {
|
|
95
95
|
handleMenuClose(menuElementDiv, triggerButton);
|
|
96
|
+
if (onOpenChange) {
|
|
97
|
+
onOpenChange(false);
|
|
98
|
+
}
|
|
96
99
|
}
|
|
97
100
|
triggerButton.focus();
|
|
98
101
|
}
|
|
@@ -112,6 +115,9 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
|
|
|
112
115
|
case "Tab": {
|
|
113
116
|
if (menuElementDiv && triggerButton && (!event.shiftKey || event.shiftKey)) {
|
|
114
117
|
handleMenuClose(menuElementDiv, triggerButton);
|
|
118
|
+
if (onOpenChange) {
|
|
119
|
+
onOpenChange(false);
|
|
120
|
+
}
|
|
115
121
|
}
|
|
116
122
|
break;
|
|
117
123
|
}
|
|
@@ -52,7 +52,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
52
52
|
try {
|
|
53
53
|
callback.onActiveDescendantChange(itemId, activeItem);
|
|
54
54
|
} catch (error) {
|
|
55
|
-
console.error("[aria-ease] Error in onActiveDescendantChange callback:", error);
|
|
55
|
+
console.error("[aria-ease] Error in combobox onActiveDescendantChange callback:", error);
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
} else {
|
|
@@ -67,7 +67,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
67
67
|
try {
|
|
68
68
|
callback.onOpenChange(true);
|
|
69
69
|
} catch (error) {
|
|
70
|
-
console.error("[aria-ease] Error in onOpenChange callback:", error);
|
|
70
|
+
console.error("[aria-ease] Error in combobox onOpenChange callback:", error);
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
}
|
|
@@ -82,7 +82,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
82
82
|
try {
|
|
83
83
|
callback.onOpenChange(false);
|
|
84
84
|
} catch (error) {
|
|
85
|
-
console.error("[aria-ease] Error in onOpenChange callback:", error);
|
|
85
|
+
console.error("[aria-ease] Error in combobox onOpenChange callback:", error);
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
}
|
|
@@ -94,7 +94,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
94
94
|
try {
|
|
95
95
|
callback.onSelect(item);
|
|
96
96
|
} catch (error) {
|
|
97
|
-
console.error("[aria-ease] Error in onSelect callback:", error);
|
|
97
|
+
console.error("[aria-ease] Error in combobox onSelect callback:", error);
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
}
|
|
@@ -139,7 +139,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
139
139
|
try {
|
|
140
140
|
callback.onClear();
|
|
141
141
|
} catch (error) {
|
|
142
|
-
console.error("[aria-ease] Error in onClear callback:", error);
|
|
142
|
+
console.error("[aria-ease] Error in combobox onClear callback:", error);
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
145
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { C as ComboboxConfig,
|
|
1
|
+
import { C as ComboboxConfig, a as AccessibilityInstance } from '../Types.d-CxWrr421.cjs';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Makes a Combobox accessible by adding appropriate ARIA attributes, keyboard interactions and focus management.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { C as ComboboxConfig,
|
|
1
|
+
import { C as ComboboxConfig, a as AccessibilityInstance } from '../Types.d-CxWrr421.js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Makes a Combobox accessible by adding appropriate ARIA attributes, keyboard interactions and focus management.
|
|
@@ -50,7 +50,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
50
50
|
try {
|
|
51
51
|
callback.onActiveDescendantChange(itemId, activeItem);
|
|
52
52
|
} catch (error) {
|
|
53
|
-
console.error("[aria-ease] Error in onActiveDescendantChange callback:", error);
|
|
53
|
+
console.error("[aria-ease] Error in combobox onActiveDescendantChange callback:", error);
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
} else {
|
|
@@ -65,7 +65,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
65
65
|
try {
|
|
66
66
|
callback.onOpenChange(true);
|
|
67
67
|
} catch (error) {
|
|
68
|
-
console.error("[aria-ease] Error in onOpenChange callback:", error);
|
|
68
|
+
console.error("[aria-ease] Error in combobox onOpenChange callback:", error);
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
}
|
|
@@ -80,7 +80,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
80
80
|
try {
|
|
81
81
|
callback.onOpenChange(false);
|
|
82
82
|
} catch (error) {
|
|
83
|
-
console.error("[aria-ease] Error in onOpenChange callback:", error);
|
|
83
|
+
console.error("[aria-ease] Error in combobox onOpenChange callback:", error);
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
}
|
|
@@ -92,7 +92,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
92
92
|
try {
|
|
93
93
|
callback.onSelect(item);
|
|
94
94
|
} catch (error) {
|
|
95
|
-
console.error("[aria-ease] Error in onSelect callback:", error);
|
|
95
|
+
console.error("[aria-ease] Error in combobox onSelect callback:", error);
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
}
|
|
@@ -137,7 +137,7 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
137
137
|
try {
|
|
138
138
|
callback.onClear();
|
|
139
139
|
} catch (error) {
|
|
140
|
-
console.error("[aria-ease] Error in onClear callback:", error);
|
|
140
|
+
console.error("[aria-ease] Error in combobox onClear callback:", error);
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
143
|
}
|
package/dist/src/menu/index.cjs
CHANGED
|
@@ -38,7 +38,7 @@ function hasSubmenu(menuItem) {
|
|
|
38
38
|
function getSubmenuId(menuItem) {
|
|
39
39
|
return menuItem.getAttribute("aria-controls");
|
|
40
40
|
}
|
|
41
|
-
function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu) {
|
|
41
|
+
function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu, onOpenChange) {
|
|
42
42
|
const currentEl = elementItems.item(elementItemIndex);
|
|
43
43
|
switch (event.key) {
|
|
44
44
|
case "ArrowUp":
|
|
@@ -95,6 +95,9 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
|
|
|
95
95
|
if (menuElementDiv && triggerButton) {
|
|
96
96
|
if (getComputedStyle(menuElementDiv).display === "block") {
|
|
97
97
|
handleMenuClose(menuElementDiv, triggerButton);
|
|
98
|
+
if (onOpenChange) {
|
|
99
|
+
onOpenChange(false);
|
|
100
|
+
}
|
|
98
101
|
}
|
|
99
102
|
triggerButton.focus();
|
|
100
103
|
}
|
|
@@ -114,6 +117,9 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
|
|
|
114
117
|
case "Tab": {
|
|
115
118
|
if (menuElementDiv && triggerButton && (!event.shiftKey || event.shiftKey)) {
|
|
116
119
|
handleMenuClose(menuElementDiv, triggerButton);
|
|
120
|
+
if (onOpenChange) {
|
|
121
|
+
onOpenChange(false);
|
|
122
|
+
}
|
|
117
123
|
}
|
|
118
124
|
break;
|
|
119
125
|
}
|
|
@@ -121,7 +127,7 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
|
|
|
121
127
|
}
|
|
122
128
|
|
|
123
129
|
// src/menu/src/makeMenuAccessible/makeMenuAccessible.ts
|
|
124
|
-
function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
130
|
+
function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }) {
|
|
125
131
|
const menuDiv = document.querySelector(`#${menuId}`);
|
|
126
132
|
if (!menuDiv) {
|
|
127
133
|
console.error(`[aria-ease] Element with id="${menuId}" not found. Make sure the menu element exists before calling makeMenuAccessible.`);
|
|
@@ -181,8 +187,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
181
187
|
const nodeListLike = {
|
|
182
188
|
length: items.length,
|
|
183
189
|
item: (index) => items[index],
|
|
184
|
-
forEach: (
|
|
185
|
-
items.forEach(
|
|
190
|
+
forEach: (callback2) => {
|
|
191
|
+
items.forEach(callback2);
|
|
186
192
|
},
|
|
187
193
|
[Symbol.iterator]: function* () {
|
|
188
194
|
for (const item of items) {
|
|
@@ -226,7 +232,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
226
232
|
submenuInstance = makeMenuAccessible({
|
|
227
233
|
menuId: submenuId,
|
|
228
234
|
menuItemsClass,
|
|
229
|
-
triggerId: submenuTrigger.id
|
|
235
|
+
triggerId: submenuTrigger.id,
|
|
236
|
+
callback
|
|
230
237
|
});
|
|
231
238
|
submenuInstances.set(submenuId, submenuInstance);
|
|
232
239
|
}
|
|
@@ -235,6 +242,15 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
235
242
|
function closeSubmenu() {
|
|
236
243
|
closeMenu();
|
|
237
244
|
}
|
|
245
|
+
function onOpenChange(isOpen) {
|
|
246
|
+
if (callback?.onOpenChange) {
|
|
247
|
+
try {
|
|
248
|
+
callback.onOpenChange(isOpen);
|
|
249
|
+
} catch (error) {
|
|
250
|
+
console.error("[aria-ease] Error in menu onOpenChange callback:", error);
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
}
|
|
238
254
|
function addListeners() {
|
|
239
255
|
const items = getFilteredItems();
|
|
240
256
|
const nodeListLike = toNodeListLike(items);
|
|
@@ -247,7 +263,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
247
263
|
menuDiv,
|
|
248
264
|
triggerButton,
|
|
249
265
|
openSubmenu,
|
|
250
|
-
closeSubmenu
|
|
266
|
+
closeSubmenu,
|
|
267
|
+
onOpenChange
|
|
251
268
|
);
|
|
252
269
|
menuItem.addEventListener("keydown", handler);
|
|
253
270
|
handlerMap.set(menuItem, handler);
|
|
@@ -272,12 +289,26 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
272
289
|
if (items && items.length > 0) {
|
|
273
290
|
items[0].focus();
|
|
274
291
|
}
|
|
292
|
+
if (callback?.onOpenChange) {
|
|
293
|
+
try {
|
|
294
|
+
callback.onOpenChange(true);
|
|
295
|
+
} catch (error) {
|
|
296
|
+
console.error("[aria-ease] Error in menu onOpenChange callback:", error);
|
|
297
|
+
}
|
|
298
|
+
}
|
|
275
299
|
}
|
|
276
300
|
function closeMenu() {
|
|
277
301
|
setAria(false);
|
|
278
302
|
menuDiv.style.display = "none";
|
|
279
303
|
removeListeners();
|
|
280
304
|
triggerButton.focus();
|
|
305
|
+
if (callback?.onOpenChange) {
|
|
306
|
+
try {
|
|
307
|
+
callback.onOpenChange(false);
|
|
308
|
+
} catch (error) {
|
|
309
|
+
console.error("[aria-ease] Error in menu onOpenChange callback:", error);
|
|
310
|
+
}
|
|
311
|
+
}
|
|
281
312
|
}
|
|
282
313
|
function intializeMenuItems() {
|
|
283
314
|
const items = getItems();
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { M as MenuConfig, a as AccessibilityInstance } from '../Types.d-CxWrr421.cjs';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Adds keyboard interaction to toggle menu. The menu traps focus and can be interacted with using the keyboard. The first interactive item of the menu has focus when menu open.
|
|
@@ -7,10 +7,6 @@ import { A as AccessibilityInstance } from '../Types.d-B-NDbH_q.cjs';
|
|
|
7
7
|
* @param {string} triggerId - The id of the button that triggers the menu.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId }:
|
|
11
|
-
menuId: string;
|
|
12
|
-
menuItemsClass: string;
|
|
13
|
-
triggerId: string;
|
|
14
|
-
}): AccessibilityInstance;
|
|
10
|
+
declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }: MenuConfig): AccessibilityInstance;
|
|
15
11
|
|
|
16
12
|
export { makeMenuAccessible };
|
package/dist/src/menu/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { M as MenuConfig, a as AccessibilityInstance } from '../Types.d-CxWrr421.js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Adds keyboard interaction to toggle menu. The menu traps focus and can be interacted with using the keyboard. The first interactive item of the menu has focus when menu open.
|
|
@@ -7,10 +7,6 @@ import { A as AccessibilityInstance } from '../Types.d-B-NDbH_q.js';
|
|
|
7
7
|
* @param {string} triggerId - The id of the button that triggers the menu.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId }:
|
|
11
|
-
menuId: string;
|
|
12
|
-
menuItemsClass: string;
|
|
13
|
-
triggerId: string;
|
|
14
|
-
}): AccessibilityInstance;
|
|
10
|
+
declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }: MenuConfig): AccessibilityInstance;
|
|
15
11
|
|
|
16
12
|
export { makeMenuAccessible };
|
package/dist/src/menu/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { handleKeyPress } from '../chunk-
|
|
1
|
+
import { handleKeyPress } from '../chunk-ZJXZZDUR.js';
|
|
2
2
|
|
|
3
3
|
// src/menu/src/makeMenuAccessible/makeMenuAccessible.ts
|
|
4
|
-
function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
4
|
+
function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }) {
|
|
5
5
|
const menuDiv = document.querySelector(`#${menuId}`);
|
|
6
6
|
if (!menuDiv) {
|
|
7
7
|
console.error(`[aria-ease] Element with id="${menuId}" not found. Make sure the menu element exists before calling makeMenuAccessible.`);
|
|
@@ -61,8 +61,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
61
61
|
const nodeListLike = {
|
|
62
62
|
length: items.length,
|
|
63
63
|
item: (index) => items[index],
|
|
64
|
-
forEach: (
|
|
65
|
-
items.forEach(
|
|
64
|
+
forEach: (callback2) => {
|
|
65
|
+
items.forEach(callback2);
|
|
66
66
|
},
|
|
67
67
|
[Symbol.iterator]: function* () {
|
|
68
68
|
for (const item of items) {
|
|
@@ -106,7 +106,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
106
106
|
submenuInstance = makeMenuAccessible({
|
|
107
107
|
menuId: submenuId,
|
|
108
108
|
menuItemsClass,
|
|
109
|
-
triggerId: submenuTrigger.id
|
|
109
|
+
triggerId: submenuTrigger.id,
|
|
110
|
+
callback
|
|
110
111
|
});
|
|
111
112
|
submenuInstances.set(submenuId, submenuInstance);
|
|
112
113
|
}
|
|
@@ -115,6 +116,15 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
115
116
|
function closeSubmenu() {
|
|
116
117
|
closeMenu();
|
|
117
118
|
}
|
|
119
|
+
function onOpenChange(isOpen) {
|
|
120
|
+
if (callback?.onOpenChange) {
|
|
121
|
+
try {
|
|
122
|
+
callback.onOpenChange(isOpen);
|
|
123
|
+
} catch (error) {
|
|
124
|
+
console.error("[aria-ease] Error in menu onOpenChange callback:", error);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
118
128
|
function addListeners() {
|
|
119
129
|
const items = getFilteredItems();
|
|
120
130
|
const nodeListLike = toNodeListLike(items);
|
|
@@ -127,7 +137,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
127
137
|
menuDiv,
|
|
128
138
|
triggerButton,
|
|
129
139
|
openSubmenu,
|
|
130
|
-
closeSubmenu
|
|
140
|
+
closeSubmenu,
|
|
141
|
+
onOpenChange
|
|
131
142
|
);
|
|
132
143
|
menuItem.addEventListener("keydown", handler);
|
|
133
144
|
handlerMap.set(menuItem, handler);
|
|
@@ -152,12 +163,26 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
152
163
|
if (items && items.length > 0) {
|
|
153
164
|
items[0].focus();
|
|
154
165
|
}
|
|
166
|
+
if (callback?.onOpenChange) {
|
|
167
|
+
try {
|
|
168
|
+
callback.onOpenChange(true);
|
|
169
|
+
} catch (error) {
|
|
170
|
+
console.error("[aria-ease] Error in menu onOpenChange callback:", error);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
155
173
|
}
|
|
156
174
|
function closeMenu() {
|
|
157
175
|
setAria(false);
|
|
158
176
|
menuDiv.style.display = "none";
|
|
159
177
|
removeListeners();
|
|
160
178
|
triggerButton.focus();
|
|
179
|
+
if (callback?.onOpenChange) {
|
|
180
|
+
try {
|
|
181
|
+
callback.onOpenChange(false);
|
|
182
|
+
} catch (error) {
|
|
183
|
+
console.error("[aria-ease] Error in menu onOpenChange callback:", error);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
161
186
|
}
|
|
162
187
|
function intializeMenuItems() {
|
|
163
188
|
const items = getItems();
|