aria-ease 4.0.1 → 5.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/README.md +22 -24
- package/dist/index.cjs +12 -144
- package/dist/index.d.cts +1 -57
- package/dist/index.d.ts +1 -57
- package/dist/index.js +11 -139
- package/dist/src/{Types.d-BrHSyS03.d.cts → Types.d-COr5IFp5.d.cts} +1 -17
- package/dist/src/{Types.d-BrHSyS03.d.ts → Types.d-COr5IFp5.d.ts} +1 -17
- package/dist/src/accordion/index.cjs +0 -27
- package/dist/src/accordion/index.d.cts +2 -12
- package/dist/src/accordion/index.d.ts +2 -12
- package/dist/src/accordion/index.js +1 -27
- 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 -32
- package/dist/src/checkbox/index.d.cts +2 -12
- package/dist/src/checkbox/index.d.ts +2 -12
- package/dist/src/checkbox/index.js +1 -32
- package/dist/src/combobox/index.cjs +1 -1
- package/dist/src/combobox/index.d.cts +1 -1
- package/dist/src/combobox/index.d.ts +1 -1
- package/dist/src/combobox/index.js +1 -1
- package/dist/src/menu/index.cjs +9 -18
- package/dist/src/menu/index.d.cts +1 -1
- package/dist/src/menu/index.d.ts +1 -1
- package/dist/src/menu/index.js +9 -18
- package/dist/src/radio/index.cjs +0 -31
- package/dist/src/radio/index.d.cts +2 -12
- package/dist/src/radio/index.d.ts +2 -12
- package/dist/src/radio/index.js +1 -31
- package/dist/src/toggle/index.cjs +0 -28
- package/dist/src/toggle/index.d.cts +2 -12
- package/dist/src/toggle/index.d.ts +2 -12
- package/dist/src/toggle/index.js +1 -28
- package/dist/src/utils/test/contracts/AccordionContract.json +55 -0
- package/dist/src/utils/test/contracts/MenuContract.json +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -203,19 +203,19 @@ accordion.toggleItem(2); // Toggle third panel
|
|
|
203
203
|
```
|
|
204
204
|
|
|
205
205
|
<details>
|
|
206
|
-
<summary>📌 Legacy API
|
|
206
|
+
<summary>📌 Legacy API deprecated</summary>
|
|
207
207
|
|
|
208
208
|
```javascript
|
|
209
|
-
import {
|
|
209
|
+
import { makeAccordionAccessible } from "aria-ease/accordion";
|
|
210
210
|
|
|
211
211
|
const accordionStates = [{ display: true }, { display: false }];
|
|
212
212
|
|
|
213
|
-
|
|
214
|
-
"
|
|
215
|
-
"
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
);
|
|
213
|
+
makeAccordionAccessible({
|
|
214
|
+
accordionId: "faq-div",
|
|
215
|
+
triggersClass: "dropdown-button",
|
|
216
|
+
panelsClass: "accordion-panel",
|
|
217
|
+
allowMultiple: false, // Only one panel open at a time
|
|
218
|
+
});
|
|
219
219
|
```
|
|
220
220
|
|
|
221
221
|
</details>
|
|
@@ -265,19 +265,15 @@ const indices = checkboxGroup.getCheckedIndices(); // [0, 2]
|
|
|
265
265
|
```
|
|
266
266
|
|
|
267
267
|
<details>
|
|
268
|
-
<summary>📌 Legacy API
|
|
268
|
+
<summary>📌 Legacy API deprecated</summary>
|
|
269
269
|
|
|
270
270
|
```javascript
|
|
271
|
-
import {
|
|
272
|
-
|
|
273
|
-
const checkboxStates = [{ checked: true }, { checked: false }];
|
|
271
|
+
import { makeCheckboxAccessible } from "aria-ease/checkbox";
|
|
274
272
|
|
|
275
|
-
|
|
276
|
-
"checkbox-
|
|
277
|
-
"
|
|
278
|
-
|
|
279
|
-
0,
|
|
280
|
-
);
|
|
273
|
+
makeCheckboxAccessible({
|
|
274
|
+
checkboxGroupId: "checkbox-div",
|
|
275
|
+
checkboxesClass: "course-checkbox",
|
|
276
|
+
});
|
|
281
277
|
```
|
|
282
278
|
|
|
283
279
|
</details>
|
|
@@ -326,14 +322,16 @@ const selected = radioGroup.getSelectedIndex(); // Get current selection
|
|
|
326
322
|
```
|
|
327
323
|
|
|
328
324
|
<details>
|
|
329
|
-
<summary>📌 Legacy API
|
|
325
|
+
<summary>📌 Legacy API deprecated</summary>
|
|
330
326
|
|
|
331
327
|
```javascript
|
|
332
|
-
import {
|
|
333
|
-
|
|
334
|
-
const radioStates = [{ checked: true }, { checked: false }];
|
|
328
|
+
import { makeRadioAccessible } from "aria-ease/radio";
|
|
335
329
|
|
|
336
|
-
|
|
330
|
+
makeRadioAccessible({
|
|
331
|
+
radioGroupId: "radio-div",
|
|
332
|
+
radiosClass: "radio",
|
|
333
|
+
defaultSelectedIndex: 0, // Optional: which radio is selected initially
|
|
334
|
+
});
|
|
337
335
|
```
|
|
338
336
|
|
|
339
337
|
</details>
|
|
@@ -393,7 +391,7 @@ toggle.cleanup();
|
|
|
393
391
|
```
|
|
394
392
|
|
|
395
393
|
<details>
|
|
396
|
-
<summary>📌 Legacy API
|
|
394
|
+
<summary>📌 Legacy API deprecated</summary>
|
|
397
395
|
|
|
398
396
|
```javascript
|
|
399
397
|
import { updateToggleAriaAttribute } from "aria-ease/toggle";
|
package/dist/index.cjs
CHANGED
|
@@ -9853,40 +9853,10 @@ __export(index_exports, {
|
|
|
9853
9853
|
makeMenuAccessible: () => makeMenuAccessible,
|
|
9854
9854
|
makeRadioAccessible: () => makeRadioAccessible,
|
|
9855
9855
|
makeToggleAccessible: () => makeToggleAccessible,
|
|
9856
|
-
testUiComponent: () => testUiComponent
|
|
9857
|
-
updateAccordionTriggerAriaAttributes: () => updateAccordionTriggerAriaAttributes,
|
|
9858
|
-
updateCheckboxAriaAttributes: () => updateCheckboxAriaAttributes,
|
|
9859
|
-
updateRadioAriaAttributes: () => updateRadioAriaAttributes,
|
|
9860
|
-
updateToggleAriaAttribute: () => updateToggleAriaAttribute
|
|
9856
|
+
testUiComponent: () => testUiComponent
|
|
9861
9857
|
});
|
|
9862
9858
|
module.exports = __toCommonJS(index_exports);
|
|
9863
9859
|
|
|
9864
|
-
// src/accordion/src/updateAccordionTriggerAriaAttributes/updateAccordionTriggerAriaAttributes.ts
|
|
9865
|
-
function updateAccordionTriggerAriaAttributes(accordionId, accordionTriggersClass, accordionStates, clickedTriggerIndex) {
|
|
9866
|
-
const accordionDiv = document.querySelector(`#${accordionId}`);
|
|
9867
|
-
if (!accordionDiv) {
|
|
9868
|
-
console.error(`[aria-ease] Element with id="${accordionId}" not found. Make sure the accordion element exists before calling updateAccordionTriggerAriaAttributes.`);
|
|
9869
|
-
return;
|
|
9870
|
-
}
|
|
9871
|
-
const accordionItems = Array.from(accordionDiv.querySelectorAll(`.${accordionTriggersClass}`));
|
|
9872
|
-
if (accordionItems.length === 0) {
|
|
9873
|
-
console.error(`[aria-ease] Element with class="${accordionTriggersClass}" not found. Make sure the accordion items exist before calling updateAccordionTriggerAriaAttributes.`);
|
|
9874
|
-
return;
|
|
9875
|
-
}
|
|
9876
|
-
if (accordionItems.length !== accordionStates.length) {
|
|
9877
|
-
console.error(`[aria-ease] Accordion state/DOM length mismatch: found ${accordionItems.length} triggers, but got ${accordionStates.length} state objects.'`);
|
|
9878
|
-
return;
|
|
9879
|
-
}
|
|
9880
|
-
accordionItems.forEach((accordionItem, index) => {
|
|
9881
|
-
const state = accordionStates[index];
|
|
9882
|
-
const expanded = accordionItem.getAttribute("aria-expanded");
|
|
9883
|
-
const shouldBeExpanded = index === clickedTriggerIndex ? state.display ? "true" : "false" : "false";
|
|
9884
|
-
if (expanded && expanded !== shouldBeExpanded) {
|
|
9885
|
-
accordionItem.setAttribute("aria-expanded", shouldBeExpanded);
|
|
9886
|
-
}
|
|
9887
|
-
});
|
|
9888
|
-
}
|
|
9889
|
-
|
|
9890
9860
|
// src/accordion/src/makeAccordionAccessible/makeAccordionAccessible.ts
|
|
9891
9861
|
function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allowMultiple = false }) {
|
|
9892
9862
|
const accordionContainer = document.querySelector(`#${accordionId}`);
|
|
@@ -10215,38 +10185,6 @@ function makeBlockAccessible({ blockId, blockItemsClass }) {
|
|
|
10215
10185
|
return { cleanup, refresh };
|
|
10216
10186
|
}
|
|
10217
10187
|
|
|
10218
|
-
// src/checkbox/src/updateCheckboxAriaAttributes/updateCheckboxAriaAttributes.ts
|
|
10219
|
-
function updateCheckboxAriaAttributes(checkboxId, checkboxesClass, checkboxStates, currentPressedCheckboxIndex) {
|
|
10220
|
-
const checkboxDiv = document.querySelector(`#${checkboxId}`);
|
|
10221
|
-
if (!checkboxDiv) {
|
|
10222
|
-
console.error(`[aria-ease] Invalid checkbox main div id provided. No checkbox div with id '${checkboxDiv} found.'`);
|
|
10223
|
-
return;
|
|
10224
|
-
}
|
|
10225
|
-
const checkboxItems = Array.from(document.querySelectorAll(`.${checkboxesClass}`));
|
|
10226
|
-
if (checkboxItems.length === 0) {
|
|
10227
|
-
console.error(`[aria-ease] Element with class="${checkboxesClass}" not found. Make sure the checkbox items exist before calling updateCheckboxAriaAttributes.`);
|
|
10228
|
-
return;
|
|
10229
|
-
}
|
|
10230
|
-
;
|
|
10231
|
-
if (checkboxStates.length === 0) {
|
|
10232
|
-
console.error(`[aria-ease] Checkbox states array is empty. Make sure the checkboxStates array is populated before calling updateCheckboxAriaAttributes.`);
|
|
10233
|
-
return;
|
|
10234
|
-
}
|
|
10235
|
-
if (currentPressedCheckboxIndex < 0 || currentPressedCheckboxIndex >= checkboxStates.length) {
|
|
10236
|
-
console.error(`[aria-ease] Checkbox index ${currentPressedCheckboxIndex} is out of bounds for states array of length ${checkboxStates.length}.`);
|
|
10237
|
-
return;
|
|
10238
|
-
}
|
|
10239
|
-
checkboxItems.forEach((checkbox, index) => {
|
|
10240
|
-
if (index === currentPressedCheckboxIndex) {
|
|
10241
|
-
const checked = checkbox.getAttribute("aria-checked");
|
|
10242
|
-
const shouldBeChecked = checkboxStates[index].checked ? "true" : "false";
|
|
10243
|
-
if (checked && checked !== shouldBeChecked) {
|
|
10244
|
-
checkbox.setAttribute("aria-checked", shouldBeChecked);
|
|
10245
|
-
}
|
|
10246
|
-
}
|
|
10247
|
-
});
|
|
10248
|
-
}
|
|
10249
|
-
|
|
10250
10188
|
// src/checkbox/src/makeCheckboxAccessible/makeCheckboxAccessible.ts
|
|
10251
10189
|
function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }) {
|
|
10252
10190
|
const checkboxGroup = document.querySelector(`#${checkboxGroupId}`);
|
|
@@ -10520,8 +10458,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
10520
10458
|
});
|
|
10521
10459
|
}
|
|
10522
10460
|
function openMenu() {
|
|
10523
|
-
menuDiv.style.display = "block";
|
|
10524
10461
|
setAria(true);
|
|
10462
|
+
menuDiv.style.display = "block";
|
|
10525
10463
|
const items = getFilteredItems();
|
|
10526
10464
|
addListeners();
|
|
10527
10465
|
if (items && items.length > 0) {
|
|
@@ -10529,9 +10467,9 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
10529
10467
|
}
|
|
10530
10468
|
}
|
|
10531
10469
|
function closeMenu() {
|
|
10532
|
-
removeListeners();
|
|
10533
|
-
menuDiv.style.display = "none";
|
|
10534
10470
|
setAria(false);
|
|
10471
|
+
menuDiv.style.display = "none";
|
|
10472
|
+
removeListeners();
|
|
10535
10473
|
triggerButton.focus();
|
|
10536
10474
|
}
|
|
10537
10475
|
function intializeMenuItems() {
|
|
@@ -10541,19 +10479,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
10541
10479
|
});
|
|
10542
10480
|
}
|
|
10543
10481
|
intializeMenuItems();
|
|
10544
|
-
function handleTriggerKeydown(event) {
|
|
10545
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
10546
|
-
event.preventDefault();
|
|
10547
|
-
const isOpen = menuDiv.style.display !== "none";
|
|
10548
|
-
if (isOpen) {
|
|
10549
|
-
closeMenu();
|
|
10550
|
-
} else {
|
|
10551
|
-
openMenu();
|
|
10552
|
-
}
|
|
10553
|
-
}
|
|
10554
|
-
}
|
|
10555
10482
|
function handleTriggerClick() {
|
|
10556
|
-
const isOpen =
|
|
10483
|
+
const isOpen = triggerButton.getAttribute("aria-expanded") === "true";
|
|
10557
10484
|
if (isOpen) {
|
|
10558
10485
|
closeMenu();
|
|
10559
10486
|
} else {
|
|
@@ -10561,17 +10488,19 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
10561
10488
|
}
|
|
10562
10489
|
}
|
|
10563
10490
|
function handleClickOutside(event) {
|
|
10564
|
-
|
|
10491
|
+
const isMenuOpen = triggerButton.getAttribute("aria-expanded") === "true";
|
|
10492
|
+
if (!isMenuOpen) return;
|
|
10493
|
+
const clickedTrigger = triggerButton.contains(event.target);
|
|
10494
|
+
const clickedMenu = menuDiv.contains(event.target);
|
|
10495
|
+
if (!clickedTrigger && !clickedMenu) {
|
|
10565
10496
|
closeMenu();
|
|
10566
10497
|
}
|
|
10567
10498
|
}
|
|
10568
|
-
triggerButton.addEventListener("keydown", handleTriggerKeydown);
|
|
10569
10499
|
triggerButton.addEventListener("click", handleTriggerClick);
|
|
10570
10500
|
document.addEventListener("click", handleClickOutside);
|
|
10571
10501
|
triggerButton.setAttribute("data-menu-initialized", "true");
|
|
10572
10502
|
function cleanup() {
|
|
10573
10503
|
removeListeners();
|
|
10574
|
-
triggerButton.removeEventListener("keydown", handleTriggerKeydown);
|
|
10575
10504
|
triggerButton.removeEventListener("click", handleTriggerClick);
|
|
10576
10505
|
document.removeEventListener("click", handleClickOutside);
|
|
10577
10506
|
menuDiv.style.display = "none";
|
|
@@ -10586,36 +10515,6 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
|
|
|
10586
10515
|
return { openMenu, closeMenu, cleanup, refresh };
|
|
10587
10516
|
}
|
|
10588
10517
|
|
|
10589
|
-
// src/radio/src/updateRadioAriaAttributes/updateRadioAriaAttributes.ts
|
|
10590
|
-
function updateRadioAriaAttributes(radioId, radiosClass, radioStates, currentPressedRadioIndex) {
|
|
10591
|
-
const radioDiv = document.querySelector(`#${radioId}`);
|
|
10592
|
-
if (!radioDiv) {
|
|
10593
|
-
console.error(`[aria-ease] Element with id="${radioId}" not found. Make sure the radio element exists before calling updateRadioAriaAttributes.`);
|
|
10594
|
-
return;
|
|
10595
|
-
}
|
|
10596
|
-
const radioItems = Array.from(radioDiv.querySelectorAll(`.${radiosClass}`));
|
|
10597
|
-
if (radioItems.length === 0) {
|
|
10598
|
-
console.error(`[aria-ease] Element with class="${radiosClass}" not found. Make sure the radio items exist before calling updateRadioAriaAttributes.`);
|
|
10599
|
-
return;
|
|
10600
|
-
}
|
|
10601
|
-
if (radioStates.length === 0) {
|
|
10602
|
-
console.error(`[aria-ease] Radio states array is empty. Make sure the radioStates array is populated before calling updateRadioAriaAttributes.`);
|
|
10603
|
-
return;
|
|
10604
|
-
}
|
|
10605
|
-
if (currentPressedRadioIndex < 0 || currentPressedRadioIndex >= radioStates.length) {
|
|
10606
|
-
console.error(`[aria-ease] Radio index ${currentPressedRadioIndex} is out of bounds for states array of length ${radioStates.length}.`);
|
|
10607
|
-
return;
|
|
10608
|
-
}
|
|
10609
|
-
radioItems.forEach((radioItem, index) => {
|
|
10610
|
-
const state = radioStates[index];
|
|
10611
|
-
const checked = radioItem.getAttribute("aria-checked");
|
|
10612
|
-
const shouldBeChecked = index === currentPressedRadioIndex ? state.checked ? "true" : "false" : "false";
|
|
10613
|
-
if (checked && checked !== shouldBeChecked) {
|
|
10614
|
-
radioItem.setAttribute("aria-checked", shouldBeChecked);
|
|
10615
|
-
}
|
|
10616
|
-
});
|
|
10617
|
-
}
|
|
10618
|
-
|
|
10619
10518
|
// src/radio/src/makeRadioAccessible/makeRadioAccessible.ts
|
|
10620
10519
|
function makeRadioAccessible({ radioGroupId, radiosClass, defaultSelectedIndex = 0 }) {
|
|
10621
10520
|
const radioGroup = document.querySelector(`#${radioGroupId}`);
|
|
@@ -10737,33 +10636,6 @@ function makeRadioAccessible({ radioGroupId, radiosClass, defaultSelectedIndex =
|
|
|
10737
10636
|
};
|
|
10738
10637
|
}
|
|
10739
10638
|
|
|
10740
|
-
// src/toggle/src/updateToggleAriaAttribute/updateToggleAriaAttribute.ts
|
|
10741
|
-
function updateToggleAriaAttribute(toggleId, togglesClass, toggleStates, currentPressedToggleIndex) {
|
|
10742
|
-
const toggleDiv = document.querySelector(`#${toggleId}`);
|
|
10743
|
-
if (!toggleDiv) {
|
|
10744
|
-
console.error(`[aria-ease] Element with id="${toggleId}" not found. Make sure the toggle element exists before calling updateToggleAriaAttribute.`);
|
|
10745
|
-
return;
|
|
10746
|
-
}
|
|
10747
|
-
const toggleItems = Array.from(toggleDiv.querySelectorAll(`.${togglesClass}`));
|
|
10748
|
-
if (toggleItems.length === 0) {
|
|
10749
|
-
console.error(`[aria-ease] Element with class="${togglesClass}" not found. Make sure the toggle items exist before calling updateToggleAriaAttribute.`);
|
|
10750
|
-
return;
|
|
10751
|
-
}
|
|
10752
|
-
if (toggleItems.length !== toggleStates.length) {
|
|
10753
|
-
console.error(`[aria-ease] Toggle state/DOM length mismatch: found ${toggleItems.length} triggers, but got ${toggleStates.length} state objects.'`);
|
|
10754
|
-
return;
|
|
10755
|
-
}
|
|
10756
|
-
toggleItems.forEach((toggle, index) => {
|
|
10757
|
-
if (index === currentPressedToggleIndex) {
|
|
10758
|
-
const pressed = toggle.getAttribute("aria-pressed");
|
|
10759
|
-
const shouldBePressed = toggleStates[index].pressed ? "true" : "false";
|
|
10760
|
-
if (pressed && pressed !== shouldBePressed) {
|
|
10761
|
-
toggle.setAttribute("aria-pressed", shouldBePressed);
|
|
10762
|
-
}
|
|
10763
|
-
}
|
|
10764
|
-
});
|
|
10765
|
-
}
|
|
10766
|
-
|
|
10767
10639
|
// src/toggle/src/makeTogggleAccessible/makeToggleAccessible.ts
|
|
10768
10640
|
function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle = true }) {
|
|
10769
10641
|
const toggleContainer = document.querySelector(`#${toggleId}`);
|
|
@@ -10908,7 +10780,7 @@ function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle = true })
|
|
|
10908
10780
|
};
|
|
10909
10781
|
}
|
|
10910
10782
|
|
|
10911
|
-
// src/combobox/src/makeComboBoxAccessible.ts
|
|
10783
|
+
// src/combobox/src/makeComboBoxAccessible/makeComboBoxAccessible.ts
|
|
10912
10784
|
function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId, listBoxItemsClass, config: config2 }) {
|
|
10913
10785
|
const comboboxInput = document.getElementById(`${comboboxInputId}`);
|
|
10914
10786
|
if (!comboboxInput) {
|
|
@@ -14827,11 +14699,7 @@ if (typeof window === "undefined") {
|
|
|
14827
14699
|
makeMenuAccessible,
|
|
14828
14700
|
makeRadioAccessible,
|
|
14829
14701
|
makeToggleAccessible,
|
|
14830
|
-
testUiComponent
|
|
14831
|
-
updateAccordionTriggerAriaAttributes,
|
|
14832
|
-
updateCheckboxAriaAttributes,
|
|
14833
|
-
updateRadioAriaAttributes,
|
|
14834
|
-
updateToggleAriaAttribute
|
|
14702
|
+
testUiComponent
|
|
14835
14703
|
});
|
|
14836
14704
|
/*! Bundled license information:
|
|
14837
14705
|
|
package/dist/index.d.cts
CHANGED
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
interface AccordionStates {
|
|
2
|
-
display: boolean;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
interface CheckboxStates {
|
|
6
|
-
checked: boolean;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
interface RadioStates {
|
|
10
|
-
checked: boolean;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
interface ToggleStates {
|
|
14
|
-
pressed: boolean;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
1
|
interface JestAxeResult {
|
|
18
2
|
violations: unknown[];
|
|
19
3
|
raw: unknown;
|
|
@@ -59,16 +43,6 @@ interface config {
|
|
|
59
43
|
onClear?: () => void;
|
|
60
44
|
}
|
|
61
45
|
|
|
62
|
-
/**
|
|
63
|
-
* Adds screen reader accessibility to accordions. Updates the aria attributes of the accordion trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-controls, aria-label (for only non-text triggers).
|
|
64
|
-
* @param {string} accordionId The id of the accordion triggers parent container.
|
|
65
|
-
* @param {string} accordionTriggersClass The shared class of all the accordion triggers.
|
|
66
|
-
* @param {AccordionStates[]} accordionStates Array of objects containing accordions state information.
|
|
67
|
-
* @param {number} clickedTriggerIndex Index of the currently clicked accordion trigger within the accordion div container.
|
|
68
|
-
*/
|
|
69
|
-
|
|
70
|
-
declare function updateAccordionTriggerAriaAttributes(accordionId: string, accordionTriggersClass: string, accordionStates: AccordionStates[], clickedTriggerIndex: number): void;
|
|
71
|
-
|
|
72
46
|
/**
|
|
73
47
|
* Makes an accordion accessible by managing ARIA attributes, keyboard navigation, and state.
|
|
74
48
|
* Handles multiple accordion items with proper focus management and keyboard interactions.
|
|
@@ -98,16 +72,6 @@ interface BlockConfig {
|
|
|
98
72
|
}
|
|
99
73
|
declare function makeBlockAccessible({ blockId, blockItemsClass }: BlockConfig): AccessibilityInstance;
|
|
100
74
|
|
|
101
|
-
/**
|
|
102
|
-
* Adds screen reader accessibility to multiple checkboxes. Updates the aria attributes of the checkboxes. Checkbox elements must possess the following aria attributes; aria-checked and aria-label.
|
|
103
|
-
* @param {string} checkboxId The id of the checkbox parent container.
|
|
104
|
-
* @param {string} checkboxesClass The shared class of all the checkboxes.
|
|
105
|
-
* @param {CheckboxStates[]} checkboxStates Array of objects containing checkboxes state information.
|
|
106
|
-
* @param {number} currentPressedCheckboxIndex Index of the currently checked or unchecked checkbox.
|
|
107
|
-
*/
|
|
108
|
-
|
|
109
|
-
declare function updateCheckboxAriaAttributes(checkboxId: string, checkboxesClass: string, checkboxStates: CheckboxStates[], currentPressedCheckboxIndex: number): void;
|
|
110
|
-
|
|
111
75
|
/**
|
|
112
76
|
* Makes a checkbox group accessible by managing ARIA attributes and keyboard navigation.
|
|
113
77
|
* Handles multiple independent checkboxes with proper focus management and keyboard interactions.
|
|
@@ -134,16 +98,6 @@ declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId }: {
|
|
|
134
98
|
triggerId: string;
|
|
135
99
|
}): AccessibilityInstance;
|
|
136
100
|
|
|
137
|
-
/**
|
|
138
|
-
* Adds screen reader accessibility to multiple radio buttons. Updates the aria attributes of the radio buttons. Radio elements must possess the following aria attributes; aria-checked and aria-label.
|
|
139
|
-
* @param {string} radioId The id of the radio parent container.
|
|
140
|
-
* @param {string} radiosClass The shared class of all the radios.
|
|
141
|
-
* @param {RadioStates[]} radioStates Array of objects containing radio buttons state information.
|
|
142
|
-
* @param {number} currentPressedRadioIndex Index of the currently checked or unchecked radio button.
|
|
143
|
-
*/
|
|
144
|
-
|
|
145
|
-
declare function updateRadioAriaAttributes(radioId: string, radiosClass: string, radioStates: RadioStates[], currentPressedRadioIndex: number): void;
|
|
146
|
-
|
|
147
101
|
/**
|
|
148
102
|
* Makes a radio group accessible by managing ARIA attributes, keyboard navigation, and state.
|
|
149
103
|
* Handles radio button selection with proper focus management and keyboard interactions.
|
|
@@ -159,16 +113,6 @@ interface RadioConfig {
|
|
|
159
113
|
}
|
|
160
114
|
declare function makeRadioAccessible({ radioGroupId, radiosClass, defaultSelectedIndex }: RadioConfig): AccessibilityInstance;
|
|
161
115
|
|
|
162
|
-
/**
|
|
163
|
-
* Adds screen reader accessibility to toggle buttons. Updates the aria attributes of the toggle buttons. Button must be a semantic button element or a non-semantic element with a role of button, and possess the aria-pressed attribute.
|
|
164
|
-
* @param {string} toggleId The id of the toggle buttons parent container.
|
|
165
|
-
* @param {string} togglesClass The shared class of all the toggle buttons.
|
|
166
|
-
* @param {ToggleStates[]} toggleStates Array of objects containing toggle buttons state information.
|
|
167
|
-
* @param {number} currentPressedToggleIndex Index of the currently pressed or unpressed toggle button.
|
|
168
|
-
*/
|
|
169
|
-
|
|
170
|
-
declare function updateToggleAriaAttribute(toggleId: string, togglesClass: string, toggleStates: ToggleStates[], currentPressedToggleIndex: number): void;
|
|
171
|
-
|
|
172
116
|
/**
|
|
173
117
|
* Makes a toggle button accessible by managing ARIA attributes and keyboard interactions.
|
|
174
118
|
* Handles toggle button state with proper focus management.
|
|
@@ -204,4 +148,4 @@ declare function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, lis
|
|
|
204
148
|
|
|
205
149
|
declare function testUiComponent(componentName: string, component: HTMLElement, url?: string): Promise<JestAxeResult>;
|
|
206
150
|
|
|
207
|
-
export { makeAccordionAccessible, makeBlockAccessible, makeCheckboxAccessible, makeComboboxAccessible, makeMenuAccessible, makeRadioAccessible, makeToggleAccessible, testUiComponent
|
|
151
|
+
export { makeAccordionAccessible, makeBlockAccessible, makeCheckboxAccessible, makeComboboxAccessible, makeMenuAccessible, makeRadioAccessible, makeToggleAccessible, testUiComponent };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
interface AccordionStates {
|
|
2
|
-
display: boolean;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
interface CheckboxStates {
|
|
6
|
-
checked: boolean;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
interface RadioStates {
|
|
10
|
-
checked: boolean;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
interface ToggleStates {
|
|
14
|
-
pressed: boolean;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
1
|
interface JestAxeResult {
|
|
18
2
|
violations: unknown[];
|
|
19
3
|
raw: unknown;
|
|
@@ -59,16 +43,6 @@ interface config {
|
|
|
59
43
|
onClear?: () => void;
|
|
60
44
|
}
|
|
61
45
|
|
|
62
|
-
/**
|
|
63
|
-
* Adds screen reader accessibility to accordions. Updates the aria attributes of the accordion trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-controls, aria-label (for only non-text triggers).
|
|
64
|
-
* @param {string} accordionId The id of the accordion triggers parent container.
|
|
65
|
-
* @param {string} accordionTriggersClass The shared class of all the accordion triggers.
|
|
66
|
-
* @param {AccordionStates[]} accordionStates Array of objects containing accordions state information.
|
|
67
|
-
* @param {number} clickedTriggerIndex Index of the currently clicked accordion trigger within the accordion div container.
|
|
68
|
-
*/
|
|
69
|
-
|
|
70
|
-
declare function updateAccordionTriggerAriaAttributes(accordionId: string, accordionTriggersClass: string, accordionStates: AccordionStates[], clickedTriggerIndex: number): void;
|
|
71
|
-
|
|
72
46
|
/**
|
|
73
47
|
* Makes an accordion accessible by managing ARIA attributes, keyboard navigation, and state.
|
|
74
48
|
* Handles multiple accordion items with proper focus management and keyboard interactions.
|
|
@@ -98,16 +72,6 @@ interface BlockConfig {
|
|
|
98
72
|
}
|
|
99
73
|
declare function makeBlockAccessible({ blockId, blockItemsClass }: BlockConfig): AccessibilityInstance;
|
|
100
74
|
|
|
101
|
-
/**
|
|
102
|
-
* Adds screen reader accessibility to multiple checkboxes. Updates the aria attributes of the checkboxes. Checkbox elements must possess the following aria attributes; aria-checked and aria-label.
|
|
103
|
-
* @param {string} checkboxId The id of the checkbox parent container.
|
|
104
|
-
* @param {string} checkboxesClass The shared class of all the checkboxes.
|
|
105
|
-
* @param {CheckboxStates[]} checkboxStates Array of objects containing checkboxes state information.
|
|
106
|
-
* @param {number} currentPressedCheckboxIndex Index of the currently checked or unchecked checkbox.
|
|
107
|
-
*/
|
|
108
|
-
|
|
109
|
-
declare function updateCheckboxAriaAttributes(checkboxId: string, checkboxesClass: string, checkboxStates: CheckboxStates[], currentPressedCheckboxIndex: number): void;
|
|
110
|
-
|
|
111
75
|
/**
|
|
112
76
|
* Makes a checkbox group accessible by managing ARIA attributes and keyboard navigation.
|
|
113
77
|
* Handles multiple independent checkboxes with proper focus management and keyboard interactions.
|
|
@@ -134,16 +98,6 @@ declare function makeMenuAccessible({ menuId, menuItemsClass, triggerId }: {
|
|
|
134
98
|
triggerId: string;
|
|
135
99
|
}): AccessibilityInstance;
|
|
136
100
|
|
|
137
|
-
/**
|
|
138
|
-
* Adds screen reader accessibility to multiple radio buttons. Updates the aria attributes of the radio buttons. Radio elements must possess the following aria attributes; aria-checked and aria-label.
|
|
139
|
-
* @param {string} radioId The id of the radio parent container.
|
|
140
|
-
* @param {string} radiosClass The shared class of all the radios.
|
|
141
|
-
* @param {RadioStates[]} radioStates Array of objects containing radio buttons state information.
|
|
142
|
-
* @param {number} currentPressedRadioIndex Index of the currently checked or unchecked radio button.
|
|
143
|
-
*/
|
|
144
|
-
|
|
145
|
-
declare function updateRadioAriaAttributes(radioId: string, radiosClass: string, radioStates: RadioStates[], currentPressedRadioIndex: number): void;
|
|
146
|
-
|
|
147
101
|
/**
|
|
148
102
|
* Makes a radio group accessible by managing ARIA attributes, keyboard navigation, and state.
|
|
149
103
|
* Handles radio button selection with proper focus management and keyboard interactions.
|
|
@@ -159,16 +113,6 @@ interface RadioConfig {
|
|
|
159
113
|
}
|
|
160
114
|
declare function makeRadioAccessible({ radioGroupId, radiosClass, defaultSelectedIndex }: RadioConfig): AccessibilityInstance;
|
|
161
115
|
|
|
162
|
-
/**
|
|
163
|
-
* Adds screen reader accessibility to toggle buttons. Updates the aria attributes of the toggle buttons. Button must be a semantic button element or a non-semantic element with a role of button, and possess the aria-pressed attribute.
|
|
164
|
-
* @param {string} toggleId The id of the toggle buttons parent container.
|
|
165
|
-
* @param {string} togglesClass The shared class of all the toggle buttons.
|
|
166
|
-
* @param {ToggleStates[]} toggleStates Array of objects containing toggle buttons state information.
|
|
167
|
-
* @param {number} currentPressedToggleIndex Index of the currently pressed or unpressed toggle button.
|
|
168
|
-
*/
|
|
169
|
-
|
|
170
|
-
declare function updateToggleAriaAttribute(toggleId: string, togglesClass: string, toggleStates: ToggleStates[], currentPressedToggleIndex: number): void;
|
|
171
|
-
|
|
172
116
|
/**
|
|
173
117
|
* Makes a toggle button accessible by managing ARIA attributes and keyboard interactions.
|
|
174
118
|
* Handles toggle button state with proper focus management.
|
|
@@ -204,4 +148,4 @@ declare function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, lis
|
|
|
204
148
|
|
|
205
149
|
declare function testUiComponent(componentName: string, component: HTMLElement, url?: string): Promise<JestAxeResult>;
|
|
206
150
|
|
|
207
|
-
export { makeAccordionAccessible, makeBlockAccessible, makeCheckboxAccessible, makeComboboxAccessible, makeMenuAccessible, makeRadioAccessible, makeToggleAccessible, testUiComponent
|
|
151
|
+
export { makeAccordionAccessible, makeBlockAccessible, makeCheckboxAccessible, makeComboboxAccessible, makeMenuAccessible, makeRadioAccessible, makeToggleAccessible, testUiComponent };
|