aria-ease 6.2.2 → 6.3.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/README.md +91 -12
- package/bin/{chunk-7RMRFSJL.js → chunk-XLG3MIPQ.js} +5 -1
- package/bin/cli.cjs +52 -11
- package/bin/cli.js +1 -1
- package/bin/{contractTestRunnerPlaywright-ACAWN34W.js → contractTestRunnerPlaywright-JXQUUKFO.js} +48 -11
- package/bin/{test-A3ESFXOR.js → test-XSDP2NX3.js} +2 -2
- package/dist/{chunk-PDZQOXUN.js → chunk-RDEAG4KE.js} +5 -1
- package/dist/{contractTestRunnerPlaywright-O7FF7GV4.js → contractTestRunnerPlaywright-EUXD6ZZK.js} +48 -11
- package/dist/index.cjs +316 -69
- package/dist/index.d.cts +34 -4
- package/dist/index.d.ts +34 -4
- package/dist/index.js +265 -60
- package/dist/src/{Types.d-CRjhbrcw.d.cts → Types.d-DYfYR3Vc.d.cts} +18 -1
- package/dist/src/{Types.d-CRjhbrcw.d.ts → Types.d-DYfYR3Vc.d.ts} +18 -1
- package/dist/src/accordion/index.d.cts +2 -2
- package/dist/src/accordion/index.d.ts +2 -2
- package/dist/src/block/index.d.cts +1 -1
- package/dist/src/block/index.d.ts +1 -1
- package/dist/src/checkbox/index.cjs +0 -22
- package/dist/src/checkbox/index.d.cts +2 -2
- package/dist/src/checkbox/index.d.ts +2 -2
- package/dist/src/checkbox/index.js +0 -22
- package/dist/src/combobox/index.d.cts +1 -1
- package/dist/src/combobox/index.d.ts +1 -1
- package/dist/src/menu/index.d.cts +1 -1
- package/dist/src/menu/index.d.ts +1 -1
- package/dist/src/radio/index.cjs +0 -8
- package/dist/src/radio/index.d.cts +2 -2
- package/dist/src/radio/index.d.ts +2 -2
- package/dist/src/radio/index.js +0 -8
- package/dist/src/tabs/index.cjs +265 -0
- package/dist/src/tabs/index.d.cts +16 -0
- package/dist/src/tabs/index.d.ts +16 -0
- package/dist/src/tabs/index.js +263 -0
- package/dist/src/toggle/index.cjs +0 -28
- package/dist/src/toggle/index.d.cts +1 -1
- package/dist/src/toggle/index.d.ts +1 -1
- package/dist/src/toggle/index.js +0 -28
- package/dist/src/utils/test/{chunk-7RMRFSJL.js → chunk-XLG3MIPQ.js} +5 -1
- package/dist/src/utils/test/{contractTestRunnerPlaywright-7BPRTIN4.js → contractTestRunnerPlaywright-N77NEY25.js} +48 -11
- package/dist/src/utils/test/contracts/AccordionContract.json +18 -17
- package/dist/src/utils/test/contracts/ComboboxContract.json +32 -48
- package/dist/src/utils/test/contracts/MenuContract.json +19 -25
- package/dist/src/utils/test/contracts/TabsContract.json +348 -0
- package/dist/src/utils/test/index.cjs +52 -11
- package/dist/src/utils/test/index.js +2 -2
- package/package.json +8 -3
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import {
|
|
|
2
2
|
ContractReporter,
|
|
3
3
|
closeSharedBrowser,
|
|
4
4
|
contract_default
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-RDEAG4KE.js";
|
|
6
6
|
|
|
7
7
|
// src/accordion/src/makeAccordionAccessible/makeAccordionAccessible.ts
|
|
8
8
|
function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allowMultipleOpen = false, callback }) {
|
|
@@ -423,28 +423,6 @@ function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }) {
|
|
|
423
423
|
event.preventDefault();
|
|
424
424
|
toggleCheckbox(index);
|
|
425
425
|
break;
|
|
426
|
-
case "ArrowDown":
|
|
427
|
-
event.preventDefault();
|
|
428
|
-
{
|
|
429
|
-
const nextIndex = (index + 1) % checkboxes.length;
|
|
430
|
-
checkboxes[nextIndex].focus();
|
|
431
|
-
}
|
|
432
|
-
break;
|
|
433
|
-
case "ArrowUp":
|
|
434
|
-
event.preventDefault();
|
|
435
|
-
{
|
|
436
|
-
const prevIndex = (index - 1 + checkboxes.length) % checkboxes.length;
|
|
437
|
-
checkboxes[prevIndex].focus();
|
|
438
|
-
}
|
|
439
|
-
break;
|
|
440
|
-
case "Home":
|
|
441
|
-
event.preventDefault();
|
|
442
|
-
checkboxes[0].focus();
|
|
443
|
-
break;
|
|
444
|
-
case "End":
|
|
445
|
-
event.preventDefault();
|
|
446
|
-
checkboxes[checkboxes.length - 1].focus();
|
|
447
|
-
break;
|
|
448
426
|
}
|
|
449
427
|
};
|
|
450
428
|
}
|
|
@@ -791,14 +769,6 @@ function makeRadioAccessible({ radioGroupId, radiosClass, defaultSelectedIndex =
|
|
|
791
769
|
event.preventDefault();
|
|
792
770
|
selectRadio(index);
|
|
793
771
|
break;
|
|
794
|
-
case "Home":
|
|
795
|
-
event.preventDefault();
|
|
796
|
-
selectRadio(0);
|
|
797
|
-
break;
|
|
798
|
-
case "End":
|
|
799
|
-
event.preventDefault();
|
|
800
|
-
selectRadio(radios.length - 1);
|
|
801
|
-
break;
|
|
802
772
|
}
|
|
803
773
|
};
|
|
804
774
|
}
|
|
@@ -910,34 +880,6 @@ function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle = true })
|
|
|
910
880
|
event.preventDefault();
|
|
911
881
|
toggleButton(index);
|
|
912
882
|
break;
|
|
913
|
-
case "ArrowDown":
|
|
914
|
-
case "ArrowRight":
|
|
915
|
-
if (!isSingleToggle && toggles.length > 1) {
|
|
916
|
-
event.preventDefault();
|
|
917
|
-
const nextIndex = (index + 1) % toggles.length;
|
|
918
|
-
toggles[nextIndex].focus();
|
|
919
|
-
}
|
|
920
|
-
break;
|
|
921
|
-
case "ArrowUp":
|
|
922
|
-
case "ArrowLeft":
|
|
923
|
-
if (!isSingleToggle && toggles.length > 1) {
|
|
924
|
-
event.preventDefault();
|
|
925
|
-
const prevIndex = (index - 1 + toggles.length) % toggles.length;
|
|
926
|
-
toggles[prevIndex].focus();
|
|
927
|
-
}
|
|
928
|
-
break;
|
|
929
|
-
case "Home":
|
|
930
|
-
if (!isSingleToggle && toggles.length > 1) {
|
|
931
|
-
event.preventDefault();
|
|
932
|
-
toggles[0].focus();
|
|
933
|
-
}
|
|
934
|
-
break;
|
|
935
|
-
case "End":
|
|
936
|
-
if (!isSingleToggle && toggles.length > 1) {
|
|
937
|
-
event.preventDefault();
|
|
938
|
-
toggles[toggles.length - 1].focus();
|
|
939
|
-
}
|
|
940
|
-
break;
|
|
941
883
|
}
|
|
942
884
|
};
|
|
943
885
|
}
|
|
@@ -1229,6 +1171,268 @@ function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId,
|
|
|
1229
1171
|
return { cleanup, refresh, openListbox, closeListbox };
|
|
1230
1172
|
}
|
|
1231
1173
|
|
|
1174
|
+
// src/tabs/src/makeTabsAccessible/makeTabsAccessible.ts
|
|
1175
|
+
function makeTabsAccessible({ tabListId, tabsClass, tabPanelsClass, orientation = "horizontal", activateOnFocus = true, callback }) {
|
|
1176
|
+
const tabList = document.querySelector(`#${tabListId}`);
|
|
1177
|
+
if (!tabList) {
|
|
1178
|
+
console.error(`[aria-ease] Element with id="${tabListId}" not found. Make sure the tab list container exists before calling makeTabsAccessible.`);
|
|
1179
|
+
return { cleanup: () => {
|
|
1180
|
+
} };
|
|
1181
|
+
}
|
|
1182
|
+
const tabs = Array.from(tabList.querySelectorAll(`.${tabsClass}`));
|
|
1183
|
+
if (tabs.length === 0) {
|
|
1184
|
+
console.error(`[aria-ease] No elements with class="${tabsClass}" found. Make sure tab buttons exist before calling makeTabsAccessible.`);
|
|
1185
|
+
return { cleanup: () => {
|
|
1186
|
+
} };
|
|
1187
|
+
}
|
|
1188
|
+
const tabPanels = Array.from(document.querySelectorAll(`.${tabPanelsClass}`));
|
|
1189
|
+
if (tabPanels.length === 0) {
|
|
1190
|
+
console.error(`[aria-ease] No elements with class="${tabPanelsClass}" found. Make sure tab panels exist before calling makeTabsAccessible.`);
|
|
1191
|
+
return { cleanup: () => {
|
|
1192
|
+
} };
|
|
1193
|
+
}
|
|
1194
|
+
if (tabs.length !== tabPanels.length) {
|
|
1195
|
+
console.error(`[aria-ease] Tab/panel mismatch: found ${tabs.length} tabs but ${tabPanels.length} panels.`);
|
|
1196
|
+
return { cleanup: () => {
|
|
1197
|
+
} };
|
|
1198
|
+
}
|
|
1199
|
+
const handlerMap = /* @__PURE__ */ new WeakMap();
|
|
1200
|
+
const clickHandlerMap = /* @__PURE__ */ new WeakMap();
|
|
1201
|
+
const contextMenuHandlerMap = /* @__PURE__ */ new WeakMap();
|
|
1202
|
+
let activeTabIndex = 0;
|
|
1203
|
+
function initialize() {
|
|
1204
|
+
tabList.setAttribute("role", "tablist");
|
|
1205
|
+
tabList.setAttribute("aria-orientation", orientation);
|
|
1206
|
+
tabs.forEach((tab, index) => {
|
|
1207
|
+
const panel = tabPanels[index];
|
|
1208
|
+
if (!tab.id) {
|
|
1209
|
+
tab.id = `${tabListId}-tab-${index}`;
|
|
1210
|
+
}
|
|
1211
|
+
if (!panel.id) {
|
|
1212
|
+
panel.id = `${tabListId}-panel-${index}`;
|
|
1213
|
+
}
|
|
1214
|
+
tab.setAttribute("role", "tab");
|
|
1215
|
+
tab.setAttribute("aria-controls", panel.id);
|
|
1216
|
+
tab.setAttribute("aria-selected", "false");
|
|
1217
|
+
tab.setAttribute("tabindex", "-1");
|
|
1218
|
+
panel.setAttribute("role", "tabpanel");
|
|
1219
|
+
panel.setAttribute("aria-labelledby", tab.id);
|
|
1220
|
+
panel.hidden = true;
|
|
1221
|
+
const hasFocusableContent = panel.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
1222
|
+
if (!hasFocusableContent) {
|
|
1223
|
+
panel.setAttribute("tabindex", "0");
|
|
1224
|
+
}
|
|
1225
|
+
});
|
|
1226
|
+
activateTab(0, false);
|
|
1227
|
+
}
|
|
1228
|
+
function activateTab(index, shouldFocus = true) {
|
|
1229
|
+
if (index < 0 || index >= tabs.length) {
|
|
1230
|
+
console.error(`[aria-ease] Invalid tab index: ${index}`);
|
|
1231
|
+
return;
|
|
1232
|
+
}
|
|
1233
|
+
const previousIndex = activeTabIndex;
|
|
1234
|
+
tabs.forEach((tab, i) => {
|
|
1235
|
+
const panel = tabPanels[i];
|
|
1236
|
+
tab.setAttribute("aria-selected", "false");
|
|
1237
|
+
tab.setAttribute("tabindex", "-1");
|
|
1238
|
+
panel.hidden = true;
|
|
1239
|
+
});
|
|
1240
|
+
const activeTab = tabs[index];
|
|
1241
|
+
const activePanel = tabPanels[index];
|
|
1242
|
+
activeTab.setAttribute("aria-selected", "true");
|
|
1243
|
+
activeTab.setAttribute("tabindex", "0");
|
|
1244
|
+
activePanel.hidden = false;
|
|
1245
|
+
if (shouldFocus) {
|
|
1246
|
+
activeTab.focus();
|
|
1247
|
+
}
|
|
1248
|
+
activeTabIndex = index;
|
|
1249
|
+
if (callback?.onTabChange && previousIndex !== index) {
|
|
1250
|
+
try {
|
|
1251
|
+
callback.onTabChange(index, previousIndex);
|
|
1252
|
+
} catch (error) {
|
|
1253
|
+
console.error("[aria-ease] Error in tabs onTabChange callback:", error);
|
|
1254
|
+
}
|
|
1255
|
+
}
|
|
1256
|
+
}
|
|
1257
|
+
function moveFocus2(direction) {
|
|
1258
|
+
const currentFocusedIndex = tabs.findIndex((tab) => tab === document.activeElement);
|
|
1259
|
+
const currentIndex = currentFocusedIndex !== -1 ? currentFocusedIndex : activeTabIndex;
|
|
1260
|
+
let newIndex = currentIndex;
|
|
1261
|
+
switch (direction) {
|
|
1262
|
+
case "first":
|
|
1263
|
+
newIndex = 0;
|
|
1264
|
+
break;
|
|
1265
|
+
case "last":
|
|
1266
|
+
newIndex = tabs.length - 1;
|
|
1267
|
+
break;
|
|
1268
|
+
case "next":
|
|
1269
|
+
newIndex = (currentIndex + 1) % tabs.length;
|
|
1270
|
+
break;
|
|
1271
|
+
case "prev":
|
|
1272
|
+
newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
|
|
1273
|
+
break;
|
|
1274
|
+
}
|
|
1275
|
+
tabs[newIndex].focus();
|
|
1276
|
+
tabs[newIndex].setAttribute("tabindex", "0");
|
|
1277
|
+
tabs[activeTabIndex].setAttribute("tabindex", "-1");
|
|
1278
|
+
if (activateOnFocus) {
|
|
1279
|
+
activateTab(newIndex, false);
|
|
1280
|
+
} else {
|
|
1281
|
+
const currentActive = activeTabIndex;
|
|
1282
|
+
tabs.forEach((tab, i) => {
|
|
1283
|
+
if (i === newIndex) {
|
|
1284
|
+
tab.setAttribute("tabindex", "0");
|
|
1285
|
+
} else if (i !== currentActive) {
|
|
1286
|
+
tab.setAttribute("tabindex", "-1");
|
|
1287
|
+
}
|
|
1288
|
+
});
|
|
1289
|
+
}
|
|
1290
|
+
}
|
|
1291
|
+
function handleTabClick(index) {
|
|
1292
|
+
return () => {
|
|
1293
|
+
activateTab(index);
|
|
1294
|
+
};
|
|
1295
|
+
}
|
|
1296
|
+
function handleTabKeydown(index) {
|
|
1297
|
+
return (event) => {
|
|
1298
|
+
const { key } = event;
|
|
1299
|
+
let handled = false;
|
|
1300
|
+
if (orientation === "horizontal") {
|
|
1301
|
+
switch (key) {
|
|
1302
|
+
case "ArrowLeft":
|
|
1303
|
+
event.preventDefault();
|
|
1304
|
+
moveFocus2("prev");
|
|
1305
|
+
handled = true;
|
|
1306
|
+
break;
|
|
1307
|
+
case "ArrowRight":
|
|
1308
|
+
event.preventDefault();
|
|
1309
|
+
moveFocus2("next");
|
|
1310
|
+
handled = true;
|
|
1311
|
+
break;
|
|
1312
|
+
}
|
|
1313
|
+
} else {
|
|
1314
|
+
switch (key) {
|
|
1315
|
+
case "ArrowUp":
|
|
1316
|
+
event.preventDefault();
|
|
1317
|
+
moveFocus2("prev");
|
|
1318
|
+
handled = true;
|
|
1319
|
+
break;
|
|
1320
|
+
case "ArrowDown":
|
|
1321
|
+
event.preventDefault();
|
|
1322
|
+
moveFocus2("next");
|
|
1323
|
+
handled = true;
|
|
1324
|
+
break;
|
|
1325
|
+
}
|
|
1326
|
+
}
|
|
1327
|
+
if (!handled) {
|
|
1328
|
+
switch (key) {
|
|
1329
|
+
case "Home":
|
|
1330
|
+
event.preventDefault();
|
|
1331
|
+
moveFocus2("first");
|
|
1332
|
+
break;
|
|
1333
|
+
case "End":
|
|
1334
|
+
event.preventDefault();
|
|
1335
|
+
moveFocus2("last");
|
|
1336
|
+
break;
|
|
1337
|
+
case " ":
|
|
1338
|
+
case "Enter":
|
|
1339
|
+
if (!activateOnFocus) {
|
|
1340
|
+
event.preventDefault();
|
|
1341
|
+
activateTab(index);
|
|
1342
|
+
}
|
|
1343
|
+
break;
|
|
1344
|
+
case "F10":
|
|
1345
|
+
if (event.shiftKey && callback?.onContextMenu) {
|
|
1346
|
+
event.preventDefault();
|
|
1347
|
+
try {
|
|
1348
|
+
callback.onContextMenu(index, tabs[index]);
|
|
1349
|
+
} catch (error) {
|
|
1350
|
+
console.error("[aria-ease] Error in tabs onContextMenu callback:", error);
|
|
1351
|
+
}
|
|
1352
|
+
}
|
|
1353
|
+
break;
|
|
1354
|
+
}
|
|
1355
|
+
}
|
|
1356
|
+
};
|
|
1357
|
+
}
|
|
1358
|
+
function handleTabContextMenu(index) {
|
|
1359
|
+
return (event) => {
|
|
1360
|
+
if (callback?.onContextMenu) {
|
|
1361
|
+
event.preventDefault();
|
|
1362
|
+
try {
|
|
1363
|
+
callback.onContextMenu(index, tabs[index]);
|
|
1364
|
+
} catch (error) {
|
|
1365
|
+
console.error("[aria-ease] Error in tabs onContextMenu callback:", error);
|
|
1366
|
+
}
|
|
1367
|
+
}
|
|
1368
|
+
};
|
|
1369
|
+
}
|
|
1370
|
+
function addListeners() {
|
|
1371
|
+
tabs.forEach((tab, index) => {
|
|
1372
|
+
const clickHandler = handleTabClick(index);
|
|
1373
|
+
const keydownHandler = handleTabKeydown(index);
|
|
1374
|
+
const contextMenuHandler = handleTabContextMenu(index);
|
|
1375
|
+
tab.addEventListener("click", clickHandler);
|
|
1376
|
+
tab.addEventListener("keydown", keydownHandler);
|
|
1377
|
+
if (callback?.onContextMenu) {
|
|
1378
|
+
tab.addEventListener("contextmenu", contextMenuHandler);
|
|
1379
|
+
contextMenuHandlerMap.set(tab, contextMenuHandler);
|
|
1380
|
+
}
|
|
1381
|
+
handlerMap.set(tab, keydownHandler);
|
|
1382
|
+
clickHandlerMap.set(tab, clickHandler);
|
|
1383
|
+
});
|
|
1384
|
+
}
|
|
1385
|
+
function removeListeners() {
|
|
1386
|
+
tabs.forEach((tab) => {
|
|
1387
|
+
const keydownHandler = handlerMap.get(tab);
|
|
1388
|
+
const clickHandler = clickHandlerMap.get(tab);
|
|
1389
|
+
const contextMenuHandler = contextMenuHandlerMap.get(tab);
|
|
1390
|
+
if (keydownHandler) {
|
|
1391
|
+
tab.removeEventListener("keydown", keydownHandler);
|
|
1392
|
+
handlerMap.delete(tab);
|
|
1393
|
+
}
|
|
1394
|
+
if (clickHandler) {
|
|
1395
|
+
tab.removeEventListener("click", clickHandler);
|
|
1396
|
+
clickHandlerMap.delete(tab);
|
|
1397
|
+
}
|
|
1398
|
+
if (contextMenuHandler) {
|
|
1399
|
+
tab.removeEventListener("contextmenu", contextMenuHandler);
|
|
1400
|
+
contextMenuHandlerMap.delete(tab);
|
|
1401
|
+
}
|
|
1402
|
+
});
|
|
1403
|
+
}
|
|
1404
|
+
function cleanup() {
|
|
1405
|
+
removeListeners();
|
|
1406
|
+
tabs.forEach((tab, index) => {
|
|
1407
|
+
const panel = tabPanels[index];
|
|
1408
|
+
tab.removeAttribute("role");
|
|
1409
|
+
tab.removeAttribute("aria-selected");
|
|
1410
|
+
tab.removeAttribute("aria-controls");
|
|
1411
|
+
tab.removeAttribute("tabindex");
|
|
1412
|
+
panel.removeAttribute("role");
|
|
1413
|
+
panel.removeAttribute("aria-labelledby");
|
|
1414
|
+
panel.removeAttribute("tabindex");
|
|
1415
|
+
panel.hidden = false;
|
|
1416
|
+
});
|
|
1417
|
+
tabList.removeAttribute("role");
|
|
1418
|
+
tabList.removeAttribute("aria-orientation");
|
|
1419
|
+
}
|
|
1420
|
+
function refresh() {
|
|
1421
|
+
removeListeners();
|
|
1422
|
+
const newTabs = Array.from(tabList.querySelectorAll(`.${tabsClass}`));
|
|
1423
|
+
const newPanels = Array.from(document.querySelectorAll(`.${tabPanelsClass}`));
|
|
1424
|
+
tabs.length = 0;
|
|
1425
|
+
tabs.push(...newTabs);
|
|
1426
|
+
tabPanels.length = 0;
|
|
1427
|
+
tabPanels.push(...newPanels);
|
|
1428
|
+
initialize();
|
|
1429
|
+
addListeners();
|
|
1430
|
+
}
|
|
1431
|
+
initialize();
|
|
1432
|
+
addListeners();
|
|
1433
|
+
return { activateTab, cleanup, refresh };
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1232
1436
|
// src/utils/test/src/test.ts
|
|
1233
1437
|
import { axe } from "jest-axe";
|
|
1234
1438
|
|
|
@@ -1338,7 +1542,7 @@ Error: ${error instanceof Error ? error.message : String(error)}`
|
|
|
1338
1542
|
const devServerUrl = await checkDevServer(url);
|
|
1339
1543
|
if (devServerUrl) {
|
|
1340
1544
|
console.log(`\u{1F3AD} Running Playwright tests on ${devServerUrl}`);
|
|
1341
|
-
const { runContractTestsPlaywright } = await import("./contractTestRunnerPlaywright-
|
|
1545
|
+
const { runContractTestsPlaywright } = await import("./contractTestRunnerPlaywright-EUXD6ZZK.js");
|
|
1342
1546
|
contract = await runContractTestsPlaywright(componentName, devServerUrl);
|
|
1343
1547
|
} else {
|
|
1344
1548
|
throw new Error(
|
|
@@ -1427,6 +1631,7 @@ export {
|
|
|
1427
1631
|
makeComboboxAccessible,
|
|
1428
1632
|
makeMenuAccessible,
|
|
1429
1633
|
makeRadioAccessible,
|
|
1634
|
+
makeTabsAccessible,
|
|
1430
1635
|
makeToggleAccessible,
|
|
1431
1636
|
testUiComponent
|
|
1432
1637
|
};
|
|
@@ -11,6 +11,9 @@ interface AccessibilityInstance {
|
|
|
11
11
|
collapseItem?: (index: number) => void;
|
|
12
12
|
toggleItem?: (index: number) => void;
|
|
13
13
|
|
|
14
|
+
// Tabs methods
|
|
15
|
+
activateTab?: (index: number, shouldFocus?: boolean) => void;
|
|
16
|
+
|
|
14
17
|
// Radio methods
|
|
15
18
|
selectRadio?: (index: number) => void;
|
|
16
19
|
getSelectedIndex?: () => number;
|
|
@@ -45,6 +48,20 @@ interface AccordionCallback {
|
|
|
45
48
|
onCollapse?: (index: number) => void;
|
|
46
49
|
}
|
|
47
50
|
|
|
51
|
+
interface TabsConfig {
|
|
52
|
+
tabListId: string;
|
|
53
|
+
tabsClass: string;
|
|
54
|
+
tabPanelsClass: string;
|
|
55
|
+
orientation?: "horizontal" | "vertical";
|
|
56
|
+
activateOnFocus?: boolean;
|
|
57
|
+
callback?: TabsCallback;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
interface TabsCallback {
|
|
61
|
+
onTabChange?: (activeIndex: number, previousIndex: number) => void;
|
|
62
|
+
onContextMenu?: (tabIndex: number, tabElement: HTMLElement) => void;
|
|
63
|
+
}
|
|
64
|
+
|
|
48
65
|
interface ComboboxConfig {
|
|
49
66
|
comboboxInputId: string;
|
|
50
67
|
comboboxButtonId?: string;
|
|
@@ -71,4 +88,4 @@ interface MenuCallback {
|
|
|
71
88
|
onOpenChange?: (isOpen: boolean) => void;
|
|
72
89
|
}
|
|
73
90
|
|
|
74
|
-
export type { AccordionConfig as A, ComboboxConfig as C, MenuConfig as M, AccessibilityInstance as a };
|
|
91
|
+
export type { AccordionConfig as A, ComboboxConfig as C, MenuConfig as M, TabsConfig as T, AccessibilityInstance as a };
|
|
@@ -11,6 +11,9 @@ interface AccessibilityInstance {
|
|
|
11
11
|
collapseItem?: (index: number) => void;
|
|
12
12
|
toggleItem?: (index: number) => void;
|
|
13
13
|
|
|
14
|
+
// Tabs methods
|
|
15
|
+
activateTab?: (index: number, shouldFocus?: boolean) => void;
|
|
16
|
+
|
|
14
17
|
// Radio methods
|
|
15
18
|
selectRadio?: (index: number) => void;
|
|
16
19
|
getSelectedIndex?: () => number;
|
|
@@ -45,6 +48,20 @@ interface AccordionCallback {
|
|
|
45
48
|
onCollapse?: (index: number) => void;
|
|
46
49
|
}
|
|
47
50
|
|
|
51
|
+
interface TabsConfig {
|
|
52
|
+
tabListId: string;
|
|
53
|
+
tabsClass: string;
|
|
54
|
+
tabPanelsClass: string;
|
|
55
|
+
orientation?: "horizontal" | "vertical";
|
|
56
|
+
activateOnFocus?: boolean;
|
|
57
|
+
callback?: TabsCallback;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
interface TabsCallback {
|
|
61
|
+
onTabChange?: (activeIndex: number, previousIndex: number) => void;
|
|
62
|
+
onContextMenu?: (tabIndex: number, tabElement: HTMLElement) => void;
|
|
63
|
+
}
|
|
64
|
+
|
|
48
65
|
interface ComboboxConfig {
|
|
49
66
|
comboboxInputId: string;
|
|
50
67
|
comboboxButtonId?: string;
|
|
@@ -71,4 +88,4 @@ interface MenuCallback {
|
|
|
71
88
|
onOpenChange?: (isOpen: boolean) => void;
|
|
72
89
|
}
|
|
73
90
|
|
|
74
|
-
export type { AccordionConfig as A, ComboboxConfig as C, MenuConfig as M, AccessibilityInstance as a };
|
|
91
|
+
export type { AccordionConfig as A, ComboboxConfig as C, MenuConfig as M, TabsConfig as T, AccessibilityInstance as a };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { A as AccordionConfig, a as AccessibilityInstance } from '../Types.d-
|
|
1
|
+
import { A as AccordionConfig, a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.cjs';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Makes an accordion accessible by managing ARIA attributes, keyboard
|
|
4
|
+
* Makes an accordion accessible by managing ARIA attributes, keyboard interaction, and state.
|
|
5
5
|
* Handles multiple accordion items with proper focus management and keyboard interactions.
|
|
6
6
|
* @param {string} accordionId - The id of the accordion container.
|
|
7
7
|
* @param {string} triggersClass - The shared class of all accordion trigger buttons.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { A as AccordionConfig, a as AccessibilityInstance } from '../Types.d-
|
|
1
|
+
import { A as AccordionConfig, a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Makes an accordion accessible by managing ARIA attributes, keyboard
|
|
4
|
+
* Makes an accordion accessible by managing ARIA attributes, keyboard interaction, and state.
|
|
5
5
|
* Handles multiple accordion items with proper focus management and keyboard interactions.
|
|
6
6
|
* @param {string} accordionId - The id of the accordion container.
|
|
7
7
|
* @param {string} triggersClass - The shared class of all accordion trigger buttons.
|
|
@@ -59,28 +59,6 @@ function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }) {
|
|
|
59
59
|
event.preventDefault();
|
|
60
60
|
toggleCheckbox(index);
|
|
61
61
|
break;
|
|
62
|
-
case "ArrowDown":
|
|
63
|
-
event.preventDefault();
|
|
64
|
-
{
|
|
65
|
-
const nextIndex = (index + 1) % checkboxes.length;
|
|
66
|
-
checkboxes[nextIndex].focus();
|
|
67
|
-
}
|
|
68
|
-
break;
|
|
69
|
-
case "ArrowUp":
|
|
70
|
-
event.preventDefault();
|
|
71
|
-
{
|
|
72
|
-
const prevIndex = (index - 1 + checkboxes.length) % checkboxes.length;
|
|
73
|
-
checkboxes[prevIndex].focus();
|
|
74
|
-
}
|
|
75
|
-
break;
|
|
76
|
-
case "Home":
|
|
77
|
-
event.preventDefault();
|
|
78
|
-
checkboxes[0].focus();
|
|
79
|
-
break;
|
|
80
|
-
case "End":
|
|
81
|
-
event.preventDefault();
|
|
82
|
-
checkboxes[checkboxes.length - 1].focus();
|
|
83
|
-
break;
|
|
84
62
|
}
|
|
85
63
|
};
|
|
86
64
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { a as AccessibilityInstance } from '../Types.d-
|
|
1
|
+
import { a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.cjs';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Makes a checkbox group accessible by managing ARIA attributes and keyboard
|
|
4
|
+
* Makes a checkbox group accessible by managing ARIA attributes and keyboard interaction.
|
|
5
5
|
* Handles multiple independent checkboxes with proper focus management and keyboard interactions.
|
|
6
6
|
* @param {string} checkboxGroupId - The id of the checkbox group container.
|
|
7
7
|
* @param {string} checkboxesClass - The shared class of all checkboxes.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { a as AccessibilityInstance } from '../Types.d-
|
|
1
|
+
import { a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Makes a checkbox group accessible by managing ARIA attributes and keyboard
|
|
4
|
+
* Makes a checkbox group accessible by managing ARIA attributes and keyboard interaction.
|
|
5
5
|
* Handles multiple independent checkboxes with proper focus management and keyboard interactions.
|
|
6
6
|
* @param {string} checkboxGroupId - The id of the checkbox group container.
|
|
7
7
|
* @param {string} checkboxesClass - The shared class of all checkboxes.
|
|
@@ -57,28 +57,6 @@ function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }) {
|
|
|
57
57
|
event.preventDefault();
|
|
58
58
|
toggleCheckbox(index);
|
|
59
59
|
break;
|
|
60
|
-
case "ArrowDown":
|
|
61
|
-
event.preventDefault();
|
|
62
|
-
{
|
|
63
|
-
const nextIndex = (index + 1) % checkboxes.length;
|
|
64
|
-
checkboxes[nextIndex].focus();
|
|
65
|
-
}
|
|
66
|
-
break;
|
|
67
|
-
case "ArrowUp":
|
|
68
|
-
event.preventDefault();
|
|
69
|
-
{
|
|
70
|
-
const prevIndex = (index - 1 + checkboxes.length) % checkboxes.length;
|
|
71
|
-
checkboxes[prevIndex].focus();
|
|
72
|
-
}
|
|
73
|
-
break;
|
|
74
|
-
case "Home":
|
|
75
|
-
event.preventDefault();
|
|
76
|
-
checkboxes[0].focus();
|
|
77
|
-
break;
|
|
78
|
-
case "End":
|
|
79
|
-
event.preventDefault();
|
|
80
|
-
checkboxes[checkboxes.length - 1].focus();
|
|
81
|
-
break;
|
|
82
60
|
}
|
|
83
61
|
};
|
|
84
62
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { C as ComboboxConfig, a as AccessibilityInstance } from '../Types.d-
|
|
1
|
+
import { C as ComboboxConfig, a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.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, a as AccessibilityInstance } from '../Types.d-
|
|
1
|
+
import { C as ComboboxConfig, a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.js';
|
|
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 { M as MenuConfig, a as AccessibilityInstance } from '../Types.d-
|
|
1
|
+
import { M as MenuConfig, a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.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.
|
package/dist/src/menu/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { M as MenuConfig, a as AccessibilityInstance } from '../Types.d-
|
|
1
|
+
import { M as MenuConfig, a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.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.
|
package/dist/src/radio/index.cjs
CHANGED
|
@@ -72,14 +72,6 @@ function makeRadioAccessible({ radioGroupId, radiosClass, defaultSelectedIndex =
|
|
|
72
72
|
event.preventDefault();
|
|
73
73
|
selectRadio(index);
|
|
74
74
|
break;
|
|
75
|
-
case "Home":
|
|
76
|
-
event.preventDefault();
|
|
77
|
-
selectRadio(0);
|
|
78
|
-
break;
|
|
79
|
-
case "End":
|
|
80
|
-
event.preventDefault();
|
|
81
|
-
selectRadio(radios.length - 1);
|
|
82
|
-
break;
|
|
83
75
|
}
|
|
84
76
|
};
|
|
85
77
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { a as AccessibilityInstance } from '../Types.d-
|
|
1
|
+
import { a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.cjs';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Makes a radio group accessible by managing ARIA attributes, keyboard
|
|
4
|
+
* Makes a radio group accessible by managing ARIA attributes, keyboard interaction, and state.
|
|
5
5
|
* Handles radio button selection with proper focus management and keyboard interactions.
|
|
6
6
|
* @param {string} radioGroupId - The id of the radio group container.
|
|
7
7
|
* @param {string} radiosClass - The shared class of all radio buttons.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { a as AccessibilityInstance } from '../Types.d-
|
|
1
|
+
import { a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Makes a radio group accessible by managing ARIA attributes, keyboard
|
|
4
|
+
* Makes a radio group accessible by managing ARIA attributes, keyboard interaction, and state.
|
|
5
5
|
* Handles radio button selection with proper focus management and keyboard interactions.
|
|
6
6
|
* @param {string} radioGroupId - The id of the radio group container.
|
|
7
7
|
* @param {string} radiosClass - The shared class of all radio buttons.
|
package/dist/src/radio/index.js
CHANGED
|
@@ -70,14 +70,6 @@ function makeRadioAccessible({ radioGroupId, radiosClass, defaultSelectedIndex =
|
|
|
70
70
|
event.preventDefault();
|
|
71
71
|
selectRadio(index);
|
|
72
72
|
break;
|
|
73
|
-
case "Home":
|
|
74
|
-
event.preventDefault();
|
|
75
|
-
selectRadio(0);
|
|
76
|
-
break;
|
|
77
|
-
case "End":
|
|
78
|
-
event.preventDefault();
|
|
79
|
-
selectRadio(radios.length - 1);
|
|
80
|
-
break;
|
|
81
73
|
}
|
|
82
74
|
};
|
|
83
75
|
}
|