aria-ease 6.12.2 → 7.0.0
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/AccordionComponentStrategy-2SWMNUR6.js +1 -0
- package/dist/ComboboxComponentStrategy-YSYLR2U5.js +5 -0
- package/dist/MenuComponentStrategy-C22BZEBH.js +5 -0
- package/dist/RelativeTargetResolver-T4P25J2M.js +1 -0
- package/dist/TabsComponentStrategy-ADEEFJXM.js +1 -0
- package/dist/audit-APAPHXRO.js +9 -0
- package/dist/badgeHelper-IB5RTMAG.js +11 -0
- package/dist/badgeHelper-JSROP5ML.js +1 -0
- package/dist/buildContracts-T4XQZBDU.js +13 -0
- package/dist/chunk-52I3INNG.js +11 -0
- package/dist/chunk-APUMBDOT.js +1 -0
- package/dist/chunk-BHNO4ZI3.js +1 -0
- package/dist/chunk-CNU4N4AY.js +1 -0
- package/dist/chunk-SM6ZKEDR.js +1 -0
- package/dist/chunk-ZNQ5BXVJ.js +1 -0
- package/dist/cli.cjs +132 -3494
- package/dist/cli.js +19 -161
- package/dist/configLoader-ZEJVXLX7.js +1 -0
- package/dist/configLoader-ZXTSCIP6.js +1 -0
- package/dist/contractTestRunnerPlaywright-FOCQTM4L.js +46 -0
- package/dist/contractTestRunnerPlaywright-QPU6HZXG.js +46 -0
- package/dist/formatters-H3CPDLG5.js +87 -0
- package/dist/index.cjs +64 -4657
- package/dist/index.d.cts +23 -2
- package/dist/index.d.ts +23 -2
- package/dist/index.js +17 -2351
- package/dist/src/accordion/index.cjs +1 -183
- package/dist/src/accordion/index.js +1 -181
- package/dist/src/block/index.cjs +1 -124
- package/dist/src/block/index.js +1 -122
- package/dist/src/checkbox/index.cjs +1 -109
- package/dist/src/checkbox/index.js +1 -107
- package/dist/src/combobox/index.cjs +1 -265
- package/dist/src/combobox/index.js +1 -263
- package/dist/src/menu/index.cjs +1 -339
- package/dist/src/menu/index.js +1 -337
- package/dist/src/radio/index.cjs +1 -117
- package/dist/src/radio/index.js +1 -115
- package/dist/src/tabs/index.cjs +1 -265
- package/dist/src/tabs/index.js +1 -263
- package/dist/src/toggle/index.cjs +1 -119
- package/dist/src/toggle/index.js +1 -117
- package/dist/src/utils/test/AccordionComponentStrategy-X2GSQ5KT.js +1 -0
- package/dist/src/utils/test/ComboboxComponentStrategy-SICWLI27.js +5 -0
- package/dist/src/utils/test/MenuComponentStrategy-R4VPAHDE.js +5 -0
- package/dist/src/utils/test/RelativeTargetResolver-UQQMZHI6.js +1 -0
- package/dist/src/utils/test/TabsComponentStrategy-L2PYNEW6.js +1 -0
- package/dist/src/utils/test/badgeHelper-ER5ZOHWF.js +11 -0
- package/dist/src/utils/test/chunk-APUMBDOT.js +1 -0
- package/dist/src/utils/test/chunk-BHNO4ZI3.js +1 -0
- package/dist/src/utils/test/configLoader-NCYRL2O6.js +1 -0
- package/dist/src/utils/test/contractTestRunnerPlaywright-YZCMF64Q.js +46 -0
- package/dist/src/utils/test/dsl/index.cjs +1 -486
- package/dist/src/utils/test/dsl/index.d.cts +21 -0
- package/dist/src/utils/test/dsl/index.d.ts +21 -0
- package/dist/src/utils/test/dsl/index.js +1 -484
- package/dist/src/utils/test/index.cjs +64 -2578
- package/dist/src/utils/test/index.d.cts +2 -2
- package/dist/src/utils/test/index.d.ts +2 -2
- package/dist/src/utils/test/index.js +16 -340
- package/dist/test-VXSCSKV5.js +19 -0
- package/package.json +7 -9
- package/dist/AccordionComponentStrategy-4ZEIQ2V6.js +0 -42
- package/dist/ComboboxComponentStrategy-DU342VMB.js +0 -64
- package/dist/MenuComponentStrategy-JAMTCSNF.js +0 -81
- package/dist/RelativeTargetResolver-DJAITO6D.js +0 -7
- package/dist/TabsComponentStrategy-3SQURPMX.js +0 -29
- package/dist/audit-JYEPKLHR.js +0 -63
- package/dist/badgeHelper-JOWO6RQG.js +0 -15
- package/dist/badgeHelper-RDOMCC6E.js +0 -108
- package/dist/buildContracts-FT6KWUJN.js +0 -465
- package/dist/chunk-4DU5Z5BR.js +0 -340
- package/dist/chunk-GJGUY643.js +0 -182
- package/dist/chunk-GLT43UVH.js +0 -43
- package/dist/chunk-I2KLQ2HA.js +0 -22
- package/dist/chunk-JJEPLK7L.js +0 -107
- package/dist/chunk-PK5L2SAF.js +0 -17
- package/dist/configLoader-Q7N5XV4P.js +0 -183
- package/dist/configLoader-REHK3S3Q.js +0 -7
- package/dist/contractTestRunnerPlaywright-47DCBO4A.js +0 -1300
- package/dist/contractTestRunnerPlaywright-UJKXRXBS.js +0 -1300
- package/dist/formatters-32KQIIYS.js +0 -183
- package/dist/src/utils/test/AccordionComponentStrategy-WRHZOEN6.js +0 -38
- package/dist/src/utils/test/ComboboxComponentStrategy-XKQ72RFD.js +0 -60
- package/dist/src/utils/test/MenuComponentStrategy-VKZQYLBE.js +0 -77
- package/dist/src/utils/test/RelativeTargetResolver-G2XDN2VV.js +0 -1
- package/dist/src/utils/test/TabsComponentStrategy-BKG53SEV.js +0 -26
- package/dist/src/utils/test/badgeHelper-HZKGOPB4.js +0 -102
- package/dist/src/utils/test/chunk-4DU5Z5BR.js +0 -332
- package/dist/src/utils/test/chunk-GLT43UVH.js +0 -41
- package/dist/src/utils/test/configLoader-NA7IBCS3.js +0 -181
- package/dist/src/utils/test/contractTestRunnerPlaywright-AZ4QKLYT.js +0 -1278
- package/dist/test-6Y4CIQOM.js +0 -358
|
@@ -1,109 +1 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
// src/checkbox/src/makeCheckboxAccessible/makeCheckboxAccessible.ts
|
|
4
|
-
function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }) {
|
|
5
|
-
const checkboxGroup = document.querySelector(`#${checkboxGroupId}`);
|
|
6
|
-
if (!checkboxGroup) {
|
|
7
|
-
console.error(`[aria-ease] Element with id="${checkboxGroupId}" not found. Make sure the checkbox group container exists before calling makeCheckboxAccessible.`);
|
|
8
|
-
return { cleanup: () => {
|
|
9
|
-
} };
|
|
10
|
-
}
|
|
11
|
-
const checkboxes = Array.from(checkboxGroup.querySelectorAll(`.${checkboxesClass}`));
|
|
12
|
-
if (checkboxes.length === 0) {
|
|
13
|
-
console.error(`[aria-ease] No elements with class="${checkboxesClass}" found. Make sure checkboxes exist before calling makeCheckboxAccessible.`);
|
|
14
|
-
return { cleanup: () => {
|
|
15
|
-
} };
|
|
16
|
-
}
|
|
17
|
-
const handlerMap = /* @__PURE__ */ new WeakMap();
|
|
18
|
-
const clickHandlerMap = /* @__PURE__ */ new WeakMap();
|
|
19
|
-
function initialize() {
|
|
20
|
-
if (!checkboxGroup.getAttribute("role")) {
|
|
21
|
-
checkboxGroup.setAttribute("role", "group");
|
|
22
|
-
}
|
|
23
|
-
checkboxes.forEach((checkbox) => {
|
|
24
|
-
checkbox.setAttribute("role", "checkbox");
|
|
25
|
-
if (!checkbox.hasAttribute("aria-checked")) {
|
|
26
|
-
checkbox.setAttribute("aria-checked", "false");
|
|
27
|
-
}
|
|
28
|
-
if (!checkbox.hasAttribute("tabindex")) {
|
|
29
|
-
checkbox.setAttribute("tabindex", "0");
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
function toggleCheckbox(index) {
|
|
34
|
-
if (index < 0 || index >= checkboxes.length) {
|
|
35
|
-
console.error(`[aria-ease] Invalid checkbox index: ${index}`);
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
const checkbox = checkboxes[index];
|
|
39
|
-
const isChecked = checkbox.getAttribute("aria-checked") === "true";
|
|
40
|
-
checkbox.setAttribute("aria-checked", isChecked ? "false" : "true");
|
|
41
|
-
}
|
|
42
|
-
function setCheckboxState(index, checked) {
|
|
43
|
-
if (index < 0 || index >= checkboxes.length) {
|
|
44
|
-
console.error(`[aria-ease] Invalid checkbox index: ${index}`);
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
checkboxes[index].setAttribute("aria-checked", checked ? "true" : "false");
|
|
48
|
-
}
|
|
49
|
-
function handleCheckboxClick(index) {
|
|
50
|
-
return () => {
|
|
51
|
-
toggleCheckbox(index);
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
function handleCheckboxKeydown(index) {
|
|
55
|
-
return (event) => {
|
|
56
|
-
const { key } = event;
|
|
57
|
-
switch (key) {
|
|
58
|
-
case " ":
|
|
59
|
-
event.preventDefault();
|
|
60
|
-
toggleCheckbox(index);
|
|
61
|
-
break;
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
}
|
|
65
|
-
function addListeners() {
|
|
66
|
-
checkboxes.forEach((checkbox, index) => {
|
|
67
|
-
const clickHandler = handleCheckboxClick(index);
|
|
68
|
-
const keydownHandler = handleCheckboxKeydown(index);
|
|
69
|
-
checkbox.addEventListener("click", clickHandler);
|
|
70
|
-
checkbox.addEventListener("keydown", keydownHandler);
|
|
71
|
-
handlerMap.set(checkbox, keydownHandler);
|
|
72
|
-
clickHandlerMap.set(checkbox, clickHandler);
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
function removeListeners() {
|
|
76
|
-
checkboxes.forEach((checkbox) => {
|
|
77
|
-
const keydownHandler = handlerMap.get(checkbox);
|
|
78
|
-
const clickHandler = clickHandlerMap.get(checkbox);
|
|
79
|
-
if (keydownHandler) {
|
|
80
|
-
checkbox.removeEventListener("keydown", keydownHandler);
|
|
81
|
-
handlerMap.delete(checkbox);
|
|
82
|
-
}
|
|
83
|
-
if (clickHandler) {
|
|
84
|
-
checkbox.removeEventListener("click", clickHandler);
|
|
85
|
-
clickHandlerMap.delete(checkbox);
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
function cleanup() {
|
|
90
|
-
removeListeners();
|
|
91
|
-
}
|
|
92
|
-
function getCheckedStates() {
|
|
93
|
-
return checkboxes.map((checkbox) => checkbox.getAttribute("aria-checked") === "true");
|
|
94
|
-
}
|
|
95
|
-
function getCheckedIndices() {
|
|
96
|
-
return checkboxes.map((checkbox, index) => checkbox.getAttribute("aria-checked") === "true" ? index : -1).filter((index) => index !== -1);
|
|
97
|
-
}
|
|
98
|
-
initialize();
|
|
99
|
-
addListeners();
|
|
100
|
-
return {
|
|
101
|
-
toggleCheckbox,
|
|
102
|
-
setCheckboxState,
|
|
103
|
-
getCheckedStates,
|
|
104
|
-
getCheckedIndices,
|
|
105
|
-
cleanup
|
|
106
|
-
};
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
exports.makeCheckboxAccessible = makeCheckboxAccessible;
|
|
1
|
+
'use strict';function E({checkboxGroupId:s,checkboxesClass:l}){let i=document.querySelector(`#${s}`);if(!i)return console.error(`[aria-ease] Element with id="${s}" not found. Make sure the checkbox group container exists before calling makeCheckboxAccessible.`),{cleanup:()=>{}};let n=Array.from(i.querySelectorAll(`.${l}`));if(n.length===0)return console.error(`[aria-ease] No elements with class="${l}" found. Make sure checkboxes exist before calling makeCheckboxAccessible.`),{cleanup:()=>{}};let a=new WeakMap,c=new WeakMap;function d(){i.getAttribute("role")||i.setAttribute("role","group"),n.forEach(e=>{e.setAttribute("role","checkbox"),e.hasAttribute("aria-checked")||e.setAttribute("aria-checked","false"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0");});}function o(e){if(e<0||e>=n.length){console.error(`[aria-ease] Invalid checkbox index: ${e}`);return}let t=n[e],r=t.getAttribute("aria-checked")==="true";t.setAttribute("aria-checked",r?"false":"true");}function f(e,t){if(e<0||e>=n.length){console.error(`[aria-ease] Invalid checkbox index: ${e}`);return}n[e].setAttribute("aria-checked",t?"true":"false");}function b(e){return ()=>{o(e);}}function k(e){return t=>{let{key:r}=t;switch(r){case " ":t.preventDefault(),o(e);break}}}function h(){n.forEach((e,t)=>{let r=b(t),u=k(t);e.addEventListener("click",r),e.addEventListener("keydown",u),a.set(e,u),c.set(e,r);});}function m(){n.forEach(e=>{let t=a.get(e),r=c.get(e);t&&(e.removeEventListener("keydown",t),a.delete(e)),r&&(e.removeEventListener("click",r),c.delete(e));});}function g(){m();}function A(){return n.map(e=>e.getAttribute("aria-checked")==="true")}function p(){return n.map((e,t)=>e.getAttribute("aria-checked")==="true"?t:-1).filter(e=>e!==-1)}return d(),h(),{toggleCheckbox:o,setCheckboxState:f,getCheckedStates:A,getCheckedIndices:p,cleanup:g}}exports.makeCheckboxAccessible=E;
|
|
@@ -1,107 +1 @@
|
|
|
1
|
-
|
|
2
|
-
function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }) {
|
|
3
|
-
const checkboxGroup = document.querySelector(`#${checkboxGroupId}`);
|
|
4
|
-
if (!checkboxGroup) {
|
|
5
|
-
console.error(`[aria-ease] Element with id="${checkboxGroupId}" not found. Make sure the checkbox group container exists before calling makeCheckboxAccessible.`);
|
|
6
|
-
return { cleanup: () => {
|
|
7
|
-
} };
|
|
8
|
-
}
|
|
9
|
-
const checkboxes = Array.from(checkboxGroup.querySelectorAll(`.${checkboxesClass}`));
|
|
10
|
-
if (checkboxes.length === 0) {
|
|
11
|
-
console.error(`[aria-ease] No elements with class="${checkboxesClass}" found. Make sure checkboxes exist before calling makeCheckboxAccessible.`);
|
|
12
|
-
return { cleanup: () => {
|
|
13
|
-
} };
|
|
14
|
-
}
|
|
15
|
-
const handlerMap = /* @__PURE__ */ new WeakMap();
|
|
16
|
-
const clickHandlerMap = /* @__PURE__ */ new WeakMap();
|
|
17
|
-
function initialize() {
|
|
18
|
-
if (!checkboxGroup.getAttribute("role")) {
|
|
19
|
-
checkboxGroup.setAttribute("role", "group");
|
|
20
|
-
}
|
|
21
|
-
checkboxes.forEach((checkbox) => {
|
|
22
|
-
checkbox.setAttribute("role", "checkbox");
|
|
23
|
-
if (!checkbox.hasAttribute("aria-checked")) {
|
|
24
|
-
checkbox.setAttribute("aria-checked", "false");
|
|
25
|
-
}
|
|
26
|
-
if (!checkbox.hasAttribute("tabindex")) {
|
|
27
|
-
checkbox.setAttribute("tabindex", "0");
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
function toggleCheckbox(index) {
|
|
32
|
-
if (index < 0 || index >= checkboxes.length) {
|
|
33
|
-
console.error(`[aria-ease] Invalid checkbox index: ${index}`);
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
const checkbox = checkboxes[index];
|
|
37
|
-
const isChecked = checkbox.getAttribute("aria-checked") === "true";
|
|
38
|
-
checkbox.setAttribute("aria-checked", isChecked ? "false" : "true");
|
|
39
|
-
}
|
|
40
|
-
function setCheckboxState(index, checked) {
|
|
41
|
-
if (index < 0 || index >= checkboxes.length) {
|
|
42
|
-
console.error(`[aria-ease] Invalid checkbox index: ${index}`);
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
checkboxes[index].setAttribute("aria-checked", checked ? "true" : "false");
|
|
46
|
-
}
|
|
47
|
-
function handleCheckboxClick(index) {
|
|
48
|
-
return () => {
|
|
49
|
-
toggleCheckbox(index);
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
function handleCheckboxKeydown(index) {
|
|
53
|
-
return (event) => {
|
|
54
|
-
const { key } = event;
|
|
55
|
-
switch (key) {
|
|
56
|
-
case " ":
|
|
57
|
-
event.preventDefault();
|
|
58
|
-
toggleCheckbox(index);
|
|
59
|
-
break;
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
}
|
|
63
|
-
function addListeners() {
|
|
64
|
-
checkboxes.forEach((checkbox, index) => {
|
|
65
|
-
const clickHandler = handleCheckboxClick(index);
|
|
66
|
-
const keydownHandler = handleCheckboxKeydown(index);
|
|
67
|
-
checkbox.addEventListener("click", clickHandler);
|
|
68
|
-
checkbox.addEventListener("keydown", keydownHandler);
|
|
69
|
-
handlerMap.set(checkbox, keydownHandler);
|
|
70
|
-
clickHandlerMap.set(checkbox, clickHandler);
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
function removeListeners() {
|
|
74
|
-
checkboxes.forEach((checkbox) => {
|
|
75
|
-
const keydownHandler = handlerMap.get(checkbox);
|
|
76
|
-
const clickHandler = clickHandlerMap.get(checkbox);
|
|
77
|
-
if (keydownHandler) {
|
|
78
|
-
checkbox.removeEventListener("keydown", keydownHandler);
|
|
79
|
-
handlerMap.delete(checkbox);
|
|
80
|
-
}
|
|
81
|
-
if (clickHandler) {
|
|
82
|
-
checkbox.removeEventListener("click", clickHandler);
|
|
83
|
-
clickHandlerMap.delete(checkbox);
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
function cleanup() {
|
|
88
|
-
removeListeners();
|
|
89
|
-
}
|
|
90
|
-
function getCheckedStates() {
|
|
91
|
-
return checkboxes.map((checkbox) => checkbox.getAttribute("aria-checked") === "true");
|
|
92
|
-
}
|
|
93
|
-
function getCheckedIndices() {
|
|
94
|
-
return checkboxes.map((checkbox, index) => checkbox.getAttribute("aria-checked") === "true" ? index : -1).filter((index) => index !== -1);
|
|
95
|
-
}
|
|
96
|
-
initialize();
|
|
97
|
-
addListeners();
|
|
98
|
-
return {
|
|
99
|
-
toggleCheckbox,
|
|
100
|
-
setCheckboxState,
|
|
101
|
-
getCheckedStates,
|
|
102
|
-
getCheckedIndices,
|
|
103
|
-
cleanup
|
|
104
|
-
};
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
export { makeCheckboxAccessible };
|
|
1
|
+
function E({checkboxGroupId:s,checkboxesClass:l}){let i=document.querySelector(`#${s}`);if(!i)return console.error(`[aria-ease] Element with id="${s}" not found. Make sure the checkbox group container exists before calling makeCheckboxAccessible.`),{cleanup:()=>{}};let n=Array.from(i.querySelectorAll(`.${l}`));if(n.length===0)return console.error(`[aria-ease] No elements with class="${l}" found. Make sure checkboxes exist before calling makeCheckboxAccessible.`),{cleanup:()=>{}};let a=new WeakMap,c=new WeakMap;function d(){i.getAttribute("role")||i.setAttribute("role","group"),n.forEach(e=>{e.setAttribute("role","checkbox"),e.hasAttribute("aria-checked")||e.setAttribute("aria-checked","false"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0");});}function o(e){if(e<0||e>=n.length){console.error(`[aria-ease] Invalid checkbox index: ${e}`);return}let t=n[e],r=t.getAttribute("aria-checked")==="true";t.setAttribute("aria-checked",r?"false":"true");}function f(e,t){if(e<0||e>=n.length){console.error(`[aria-ease] Invalid checkbox index: ${e}`);return}n[e].setAttribute("aria-checked",t?"true":"false");}function b(e){return ()=>{o(e);}}function k(e){return t=>{let{key:r}=t;switch(r){case " ":t.preventDefault(),o(e);break}}}function h(){n.forEach((e,t)=>{let r=b(t),u=k(t);e.addEventListener("click",r),e.addEventListener("keydown",u),a.set(e,u),c.set(e,r);});}function m(){n.forEach(e=>{let t=a.get(e),r=c.get(e);t&&(e.removeEventListener("keydown",t),a.delete(e)),r&&(e.removeEventListener("click",r),c.delete(e));});}function g(){m();}function A(){return n.map(e=>e.getAttribute("aria-checked")==="true")}function p(){return n.map((e,t)=>e.getAttribute("aria-checked")==="true"?t:-1).filter(e=>e!==-1)}return d(),h(),{toggleCheckbox:o,setCheckboxState:f,getCheckedStates:A,getCheckedIndices:p,cleanup:g}}export{E as makeCheckboxAccessible};
|
|
@@ -1,265 +1 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
// src/combobox/src/makeComboBoxAccessible/makeComboBoxAccessible.ts
|
|
4
|
-
function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId, listBoxItemsClass, callback }) {
|
|
5
|
-
const comboboxInput = document.getElementById(`${comboboxInputId}`);
|
|
6
|
-
if (!comboboxInput) {
|
|
7
|
-
console.error(`[aria-ease] Element with id="${comboboxInputId}" not found. Make sure the combobox input element exists before calling makeComboboxAccessible.`);
|
|
8
|
-
return { cleanup: () => {
|
|
9
|
-
} };
|
|
10
|
-
}
|
|
11
|
-
const listBox = document.getElementById(`${listBoxId}`);
|
|
12
|
-
if (!listBox) {
|
|
13
|
-
console.error(`[aria-ease] Element with id="${listBoxId}" not found. Make sure the combobox listbox element exists before calling makeComboboxAccessible.`);
|
|
14
|
-
return { cleanup: () => {
|
|
15
|
-
} };
|
|
16
|
-
}
|
|
17
|
-
const listButton = comboboxButtonId ? document.getElementById(`${comboboxButtonId}`) : null;
|
|
18
|
-
let activeIndex = -1;
|
|
19
|
-
comboboxInput.setAttribute("role", "combobox");
|
|
20
|
-
comboboxInput.setAttribute("aria-autocomplete", "list");
|
|
21
|
-
comboboxInput.setAttribute("aria-controls", listBoxId);
|
|
22
|
-
comboboxInput.setAttribute("aria-expanded", "false");
|
|
23
|
-
comboboxInput.setAttribute("aria-haspopup", "listbox");
|
|
24
|
-
listBox.setAttribute("role", "listbox");
|
|
25
|
-
let cachedItems = null;
|
|
26
|
-
function getVisibleItems() {
|
|
27
|
-
if (!cachedItems) {
|
|
28
|
-
cachedItems = listBox.querySelectorAll(`.${listBoxItemsClass}`);
|
|
29
|
-
}
|
|
30
|
-
return Array.from(cachedItems).filter((item) => !item.hidden && item.style.display !== "none");
|
|
31
|
-
}
|
|
32
|
-
function isListboxOpen() {
|
|
33
|
-
return comboboxInput.getAttribute("aria-expanded") === "true";
|
|
34
|
-
}
|
|
35
|
-
function setActiveDescendant(index) {
|
|
36
|
-
const visibleItems = getVisibleItems();
|
|
37
|
-
if (index >= 0 && index < visibleItems.length) {
|
|
38
|
-
const activeItem = visibleItems[index];
|
|
39
|
-
const itemId = activeItem.id || `${listBoxId}-option-${index}`;
|
|
40
|
-
if (!activeItem.id) {
|
|
41
|
-
activeItem.id = itemId;
|
|
42
|
-
}
|
|
43
|
-
comboboxInput.setAttribute("aria-activedescendant", itemId);
|
|
44
|
-
if (typeof activeItem.scrollIntoView === "function") {
|
|
45
|
-
activeItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
|
|
46
|
-
}
|
|
47
|
-
if (callback?.onActiveDescendantChange) {
|
|
48
|
-
try {
|
|
49
|
-
callback.onActiveDescendantChange(itemId, activeItem);
|
|
50
|
-
} catch (error) {
|
|
51
|
-
console.error("[aria-ease] Error in combobox onActiveDescendantChange callback:", error);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
} else {
|
|
55
|
-
comboboxInput.setAttribute("aria-activedescendant", "");
|
|
56
|
-
}
|
|
57
|
-
activeIndex = index;
|
|
58
|
-
}
|
|
59
|
-
function openListbox() {
|
|
60
|
-
comboboxInput.setAttribute("aria-expanded", "true");
|
|
61
|
-
listBox.style.display = "block";
|
|
62
|
-
if (callback?.onOpenChange) {
|
|
63
|
-
try {
|
|
64
|
-
callback.onOpenChange(true);
|
|
65
|
-
} catch (error) {
|
|
66
|
-
console.error("[aria-ease] Error in combobox onOpenChange callback:", error);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
function closeListbox() {
|
|
71
|
-
comboboxInput.setAttribute("aria-expanded", "false");
|
|
72
|
-
comboboxInput.setAttribute("aria-activedescendant", "");
|
|
73
|
-
listBox.style.display = "none";
|
|
74
|
-
activeIndex = -1;
|
|
75
|
-
if (callback?.onOpenChange) {
|
|
76
|
-
try {
|
|
77
|
-
callback.onOpenChange(false);
|
|
78
|
-
} catch (error) {
|
|
79
|
-
console.error("[aria-ease] Error in combobox onOpenChange callback:", error);
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
function selectOption(item) {
|
|
84
|
-
const value = item.textContent?.trim() || "";
|
|
85
|
-
comboboxInput.value = value;
|
|
86
|
-
item.setAttribute("aria-selected", "true");
|
|
87
|
-
closeListbox();
|
|
88
|
-
if (callback?.onSelect) {
|
|
89
|
-
try {
|
|
90
|
-
callback.onSelect(item);
|
|
91
|
-
} catch (error) {
|
|
92
|
-
console.error("[aria-ease] Error in combobox onSelect callback:", error);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
function handleInputKeyDown(event) {
|
|
97
|
-
const visibleItems = getVisibleItems();
|
|
98
|
-
const isOpen = isListboxOpen();
|
|
99
|
-
switch (event.key) {
|
|
100
|
-
case "ArrowDown":
|
|
101
|
-
event.preventDefault();
|
|
102
|
-
if (!isOpen) {
|
|
103
|
-
openListbox();
|
|
104
|
-
return;
|
|
105
|
-
}
|
|
106
|
-
if (visibleItems.length === 0) return;
|
|
107
|
-
{
|
|
108
|
-
const newIndex = activeIndex >= visibleItems.length - 1 ? 0 : activeIndex + 1;
|
|
109
|
-
setActiveDescendant(newIndex);
|
|
110
|
-
}
|
|
111
|
-
break;
|
|
112
|
-
case "ArrowUp":
|
|
113
|
-
event.preventDefault();
|
|
114
|
-
if (!isOpen) return;
|
|
115
|
-
if (visibleItems.length > 0) {
|
|
116
|
-
const newIndex = activeIndex <= 0 ? visibleItems.length - 1 : activeIndex - 1;
|
|
117
|
-
setActiveDescendant(newIndex);
|
|
118
|
-
}
|
|
119
|
-
break;
|
|
120
|
-
case "Enter":
|
|
121
|
-
if (isOpen && activeIndex >= 0 && activeIndex < visibleItems.length) {
|
|
122
|
-
event.preventDefault();
|
|
123
|
-
selectOption(visibleItems[activeIndex]);
|
|
124
|
-
}
|
|
125
|
-
break;
|
|
126
|
-
case "Escape":
|
|
127
|
-
if (isOpen) {
|
|
128
|
-
event.preventDefault();
|
|
129
|
-
closeListbox();
|
|
130
|
-
} else if (comboboxInput.value) {
|
|
131
|
-
event.preventDefault();
|
|
132
|
-
comboboxInput.value = "";
|
|
133
|
-
comboboxInput.setAttribute("aria-activedescendant", "");
|
|
134
|
-
const visibleItems2 = getVisibleItems();
|
|
135
|
-
visibleItems2.forEach((item) => {
|
|
136
|
-
if (item.getAttribute("aria-selected") === "true") item.setAttribute("aria-selected", "false");
|
|
137
|
-
});
|
|
138
|
-
if (callback?.onClear) {
|
|
139
|
-
try {
|
|
140
|
-
callback.onClear();
|
|
141
|
-
} catch (error) {
|
|
142
|
-
console.error("[aria-ease] Error in combobox onClear callback:", error);
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
break;
|
|
147
|
-
case "Home":
|
|
148
|
-
if (isOpen && visibleItems.length > 0) {
|
|
149
|
-
event.preventDefault();
|
|
150
|
-
setActiveDescendant(0);
|
|
151
|
-
}
|
|
152
|
-
break;
|
|
153
|
-
case "End":
|
|
154
|
-
if (isOpen && visibleItems.length > 0) {
|
|
155
|
-
event.preventDefault();
|
|
156
|
-
setActiveDescendant(visibleItems.length - 1);
|
|
157
|
-
}
|
|
158
|
-
break;
|
|
159
|
-
case "Tab":
|
|
160
|
-
if (isOpen && activeIndex >= 0 && activeIndex < visibleItems.length) {
|
|
161
|
-
selectOption(visibleItems[activeIndex]);
|
|
162
|
-
}
|
|
163
|
-
if (isOpen) {
|
|
164
|
-
closeListbox();
|
|
165
|
-
}
|
|
166
|
-
break;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
function handleMouseMove(event) {
|
|
170
|
-
const target = event.target;
|
|
171
|
-
if (target.classList.contains(listBoxItemsClass)) {
|
|
172
|
-
const visibleItems = getVisibleItems();
|
|
173
|
-
const index = visibleItems.indexOf(target);
|
|
174
|
-
if (index >= 0) {
|
|
175
|
-
setActiveDescendant(index);
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
function handleMouseDown(event) {
|
|
180
|
-
const target = event.target;
|
|
181
|
-
if (target.classList.contains(listBoxItemsClass)) {
|
|
182
|
-
event.preventDefault();
|
|
183
|
-
selectOption(target);
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
function handleClickOutside(event) {
|
|
187
|
-
const target = event.target;
|
|
188
|
-
if (!comboboxInput.contains(target) && !listBox.contains(target) && (!listButton || !listButton.contains(target))) {
|
|
189
|
-
closeListbox();
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
function handleListButtonClick() {
|
|
193
|
-
if (isListboxOpen()) {
|
|
194
|
-
closeListbox();
|
|
195
|
-
} else {
|
|
196
|
-
openListbox();
|
|
197
|
-
comboboxInput.focus();
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
function handleListButtonKeyDown(event) {
|
|
201
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
202
|
-
event.preventDefault();
|
|
203
|
-
handleListButtonClick();
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
comboboxInput.addEventListener("keydown", handleInputKeyDown);
|
|
207
|
-
listBox.addEventListener("mousemove", handleMouseMove);
|
|
208
|
-
listBox.addEventListener("mousedown", handleMouseDown);
|
|
209
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
210
|
-
if (listButton) {
|
|
211
|
-
listButton.setAttribute("tabindex", "-1");
|
|
212
|
-
listButton.setAttribute("aria-label", "Toggle options");
|
|
213
|
-
listButton.addEventListener("click", handleListButtonClick);
|
|
214
|
-
listButton.addEventListener("keydown", handleListButtonKeyDown);
|
|
215
|
-
}
|
|
216
|
-
function initializeOptions() {
|
|
217
|
-
const items = listBox.querySelectorAll(`.${listBoxItemsClass}`);
|
|
218
|
-
if (items.length === 0) return;
|
|
219
|
-
let selectedValue = null;
|
|
220
|
-
for (const item of items) {
|
|
221
|
-
if (item.getAttribute("aria-selected") === "true") {
|
|
222
|
-
selectedValue = item.textContent?.trim() || null;
|
|
223
|
-
break;
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
if (!selectedValue && comboboxInput.value) {
|
|
227
|
-
selectedValue = comboboxInput.value.trim();
|
|
228
|
-
}
|
|
229
|
-
items.forEach((item, index) => {
|
|
230
|
-
item.setAttribute("role", "option");
|
|
231
|
-
const itemValue = item.textContent?.trim() || "";
|
|
232
|
-
if (selectedValue && itemValue === selectedValue) {
|
|
233
|
-
item.setAttribute("aria-selected", "true");
|
|
234
|
-
} else {
|
|
235
|
-
item.setAttribute("aria-selected", "false");
|
|
236
|
-
}
|
|
237
|
-
const currentId = item.getAttribute("id");
|
|
238
|
-
if (!currentId || currentId === "") {
|
|
239
|
-
const itemId = `${listBoxId}-option-${index}`;
|
|
240
|
-
item.id = itemId;
|
|
241
|
-
item.setAttribute("id", itemId);
|
|
242
|
-
}
|
|
243
|
-
});
|
|
244
|
-
}
|
|
245
|
-
initializeOptions();
|
|
246
|
-
function cleanup() {
|
|
247
|
-
comboboxInput.removeEventListener("keydown", handleInputKeyDown);
|
|
248
|
-
listBox.removeEventListener("mousemove", handleMouseMove);
|
|
249
|
-
listBox.removeEventListener("mousedown", handleMouseDown);
|
|
250
|
-
document.removeEventListener("mousedown", handleClickOutside);
|
|
251
|
-
if (listButton) {
|
|
252
|
-
listButton.removeEventListener("click", handleListButtonClick);
|
|
253
|
-
listButton.removeEventListener("keydown", handleListButtonKeyDown);
|
|
254
|
-
}
|
|
255
|
-
}
|
|
256
|
-
function refresh() {
|
|
257
|
-
cachedItems = null;
|
|
258
|
-
initializeOptions();
|
|
259
|
-
activeIndex = -1;
|
|
260
|
-
setActiveDescendant(-1);
|
|
261
|
-
}
|
|
262
|
-
return { cleanup, refresh, openListbox, closeListbox };
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
exports.makeComboboxAccessible = makeComboboxAccessible;
|
|
1
|
+
'use strict';function H({comboboxInputId:g,comboboxButtonId:A,listBoxId:d,listBoxItemsClass:b,callback:a}){let o=document.getElementById(`${g}`);if(!o)return console.error(`[aria-ease] Element with id="${g}" not found. Make sure the combobox input element exists before calling makeComboboxAccessible.`),{cleanup:()=>{}};let s=document.getElementById(`${d}`);if(!s)return console.error(`[aria-ease] Element with id="${d}" not found. Make sure the combobox listbox element exists before calling makeComboboxAccessible.`),{cleanup:()=>{}};let c=A?document.getElementById(`${A}`):null,r=-1;o.setAttribute("role","combobox"),o.setAttribute("aria-autocomplete","list"),o.setAttribute("aria-controls",d),o.setAttribute("aria-expanded","false"),o.setAttribute("aria-haspopup","listbox"),s.setAttribute("role","listbox");let m=null;function v(){return m||(m=s.querySelectorAll(`.${b}`)),Array.from(m).filter(e=>!e.hidden&&e.style.display!=="none")}function L(){return o.getAttribute("aria-expanded")==="true"}function u(e){let t=v();if(e>=0&&e<t.length){let n=t[e],i=n.id||`${d}-option-${e}`;if(n.id||(n.id=i),o.setAttribute("aria-activedescendant",i),typeof n.scrollIntoView=="function"&&n.scrollIntoView({block:"nearest",behavior:"smooth"}),a?.onActiveDescendantChange)try{a.onActiveDescendantChange(i,n);}catch(l){console.error("[aria-ease] Error in combobox onActiveDescendantChange callback:",l);}}else o.setAttribute("aria-activedescendant","");r=e;}function p(){if(o.setAttribute("aria-expanded","true"),s.style.display="block",a?.onOpenChange)try{a.onOpenChange(!0);}catch(e){console.error("[aria-ease] Error in combobox onOpenChange callback:",e);}}function f(){if(o.setAttribute("aria-expanded","false"),o.setAttribute("aria-activedescendant",""),s.style.display="none",r=-1,a?.onOpenChange)try{a.onOpenChange(!1);}catch(e){console.error("[aria-ease] Error in combobox onOpenChange callback:",e);}}function h(e){let t=e.textContent?.trim()||"";if(o.value=t,e.setAttribute("aria-selected","true"),f(),a?.onSelect)try{a.onSelect(e);}catch(n){console.error("[aria-ease] Error in combobox onSelect callback:",n);}}function y(e){let t=v(),n=L();switch(e.key){case "ArrowDown":if(e.preventDefault(),!n){p();return}if(t.length===0)return;{let i=r>=t.length-1?0:r+1;u(i);}break;case "ArrowUp":if(e.preventDefault(),!n)return;if(t.length>0){let i=r<=0?t.length-1:r-1;u(i);}break;case "Enter":n&&r>=0&&r<t.length&&(e.preventDefault(),h(t[r]));break;case "Escape":if(n)e.preventDefault(),f();else if(o.value&&(e.preventDefault(),o.value="",o.setAttribute("aria-activedescendant",""),v().forEach(l=>{l.getAttribute("aria-selected")==="true"&&l.setAttribute("aria-selected","false");}),a?.onClear))try{a.onClear();}catch(l){console.error("[aria-ease] Error in combobox onClear callback:",l);}break;case "Home":n&&t.length>0&&(e.preventDefault(),u(0));break;case "End":n&&t.length>0&&(e.preventDefault(),u(t.length-1));break;case "Tab":n&&r>=0&&r<t.length&&h(t[r]),n&&f();break}}function x(e){let t=e.target;if(t.classList.contains(b)){let i=v().indexOf(t);i>=0&&u(i);}}function k(e){let t=e.target;t.classList.contains(b)&&(e.preventDefault(),h(t));}function w(e){let t=e.target;!o.contains(t)&&!s.contains(t)&&(!c||!c.contains(t))&&f();}function E(){L()?f():(p(),o.focus());}function C(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),E());}o.addEventListener("keydown",y),s.addEventListener("mousemove",x),s.addEventListener("mousedown",k),document.addEventListener("mousedown",w),c&&(c.setAttribute("tabindex","-1"),c.setAttribute("aria-label","Toggle options"),c.addEventListener("click",E),c.addEventListener("keydown",C));function M(){let e=s.querySelectorAll(`.${b}`);if(e.length===0)return;let t=null;for(let n of e)if(n.getAttribute("aria-selected")==="true"){t=n.textContent?.trim()||null;break}!t&&o.value&&(t=o.value.trim()),e.forEach((n,i)=>{n.setAttribute("role","option");let l=n.textContent?.trim()||"";t&&l===t?n.setAttribute("aria-selected","true"):n.setAttribute("aria-selected","false");let D=n.getAttribute("id");if(!D||D===""){let I=`${d}-option-${i}`;n.id=I,n.setAttribute("id",I);}});}M();function O(){o.removeEventListener("keydown",y),s.removeEventListener("mousemove",x),s.removeEventListener("mousedown",k),document.removeEventListener("mousedown",w),c&&(c.removeEventListener("click",E),c.removeEventListener("keydown",C));}function T(){m=null,M(),r=-1,u(-1);}return {cleanup:O,refresh:T,openListbox:p,closeListbox:f}}exports.makeComboboxAccessible=H;
|