@y14e/accordion 1.3.1 → 1.3.2
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/index.cjs +28 -27
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +28 -27
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -598,12 +598,6 @@ var Accordion = class _Accordion {
|
|
|
598
598
|
this.#bindings.set(trigger2, binding);
|
|
599
599
|
this.#bindings.set(content2, binding);
|
|
600
600
|
});
|
|
601
|
-
this.#cleanupRovingTabIndex = createRovingTabIndex(this.#rootElement, {
|
|
602
|
-
direction: "vertical",
|
|
603
|
-
navigationOnly: true,
|
|
604
|
-
selector: `${trigger}${NOT_NESTED}`,
|
|
605
|
-
wrap: true
|
|
606
|
-
});
|
|
607
601
|
this.#initialize();
|
|
608
602
|
}
|
|
609
603
|
open(trigger) {
|
|
@@ -631,10 +625,10 @@ var Accordion = class _Accordion {
|
|
|
631
625
|
return;
|
|
632
626
|
}
|
|
633
627
|
this.#isDestroyed = true;
|
|
634
|
-
this.#cleanupRovingTabIndex?.();
|
|
635
|
-
this.#cleanupRovingTabIndex = null;
|
|
636
628
|
this.#eventController?.abort();
|
|
637
629
|
this.#eventController = null;
|
|
630
|
+
this.#cleanupRovingTabIndex?.();
|
|
631
|
+
this.#cleanupRovingTabIndex = null;
|
|
638
632
|
!force && await this.#waitAnimationsFinish();
|
|
639
633
|
this.#contentElements.forEach((content) => {
|
|
640
634
|
force && this.#bindings.get(content)?.animation?.finish();
|
|
@@ -657,33 +651,40 @@ var Accordion = class _Accordion {
|
|
|
657
651
|
"style",
|
|
658
652
|
"tabindex"
|
|
659
653
|
]);
|
|
660
|
-
this.#triggerElements.forEach((
|
|
654
|
+
this.#triggerElements.forEach((trigger2, i) => {
|
|
661
655
|
const id = Math.random().toString(36).slice(-8);
|
|
662
|
-
const
|
|
663
|
-
if (!
|
|
656
|
+
const content2 = this.#contentElements[i];
|
|
657
|
+
if (!content2) {
|
|
664
658
|
return;
|
|
665
659
|
}
|
|
666
|
-
saveAttributes([
|
|
667
|
-
|
|
668
|
-
addTokenToAttribute(
|
|
669
|
-
|
|
660
|
+
saveAttributes([content2], ["aria-labelledby", "id", "role"]);
|
|
661
|
+
content2.id ||= `accordion-content-${id}`;
|
|
662
|
+
addTokenToAttribute(trigger2, "aria-controls", content2.id);
|
|
663
|
+
trigger2.setAttribute(
|
|
670
664
|
"aria-expanded",
|
|
671
|
-
|
|
665
|
+
trigger2.ariaExpanded === "true" ? "true" : "false"
|
|
672
666
|
);
|
|
673
|
-
|
|
674
|
-
if (!isFocusable2(
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
667
|
+
trigger2.id ||= `accordion-trigger-${id}`;
|
|
668
|
+
if (!isFocusable2(trigger2)) {
|
|
669
|
+
trigger2.setAttribute("aria-disabled", "true");
|
|
670
|
+
trigger2.setAttribute("tabindex", "-1");
|
|
671
|
+
trigger2.style.setProperty("pointer-events", "none");
|
|
678
672
|
}
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
addTokenToAttribute(
|
|
682
|
-
|
|
683
|
-
|
|
673
|
+
trigger2.addEventListener("click", this.#onTriggerClick, { signal });
|
|
674
|
+
trigger2.addEventListener("keydown", this.#onTriggerKeyDown, { signal });
|
|
675
|
+
addTokenToAttribute(content2, "aria-labelledby", trigger2.id);
|
|
676
|
+
content2.setAttribute("role", "region");
|
|
677
|
+
content2.addEventListener("beforematch", this.#onContentBeforeMatch, {
|
|
684
678
|
signal
|
|
685
679
|
});
|
|
686
680
|
});
|
|
681
|
+
const { trigger, content } = this.#settings.selector;
|
|
682
|
+
this.#cleanupRovingTabIndex = createRovingTabIndex(this.#rootElement, {
|
|
683
|
+
direction: "vertical",
|
|
684
|
+
navigationOnly: true,
|
|
685
|
+
selector: `${trigger}:not(:scope ${content} *)`,
|
|
686
|
+
wrap: true
|
|
687
|
+
});
|
|
687
688
|
this.#rootElement.setAttribute("data-accordion-initialized", "");
|
|
688
689
|
}
|
|
689
690
|
#onTriggerClick = (event) => {
|
|
@@ -833,7 +834,7 @@ function waitAnimationFinish(animation) {
|
|
|
833
834
|
* Accordion
|
|
834
835
|
* WAI-ARIA compliant accordion pattern implementation in TypeScript.
|
|
835
836
|
*
|
|
836
|
-
* @version 1.3.
|
|
837
|
+
* @version 1.3.2
|
|
837
838
|
* @author Yusuke Kamiyamane
|
|
838
839
|
* @license MIT
|
|
839
840
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -596,12 +596,6 @@ var Accordion = class _Accordion {
|
|
|
596
596
|
this.#bindings.set(trigger2, binding);
|
|
597
597
|
this.#bindings.set(content2, binding);
|
|
598
598
|
});
|
|
599
|
-
this.#cleanupRovingTabIndex = createRovingTabIndex(this.#rootElement, {
|
|
600
|
-
direction: "vertical",
|
|
601
|
-
navigationOnly: true,
|
|
602
|
-
selector: `${trigger}${NOT_NESTED}`,
|
|
603
|
-
wrap: true
|
|
604
|
-
});
|
|
605
599
|
this.#initialize();
|
|
606
600
|
}
|
|
607
601
|
open(trigger) {
|
|
@@ -629,10 +623,10 @@ var Accordion = class _Accordion {
|
|
|
629
623
|
return;
|
|
630
624
|
}
|
|
631
625
|
this.#isDestroyed = true;
|
|
632
|
-
this.#cleanupRovingTabIndex?.();
|
|
633
|
-
this.#cleanupRovingTabIndex = null;
|
|
634
626
|
this.#eventController?.abort();
|
|
635
627
|
this.#eventController = null;
|
|
628
|
+
this.#cleanupRovingTabIndex?.();
|
|
629
|
+
this.#cleanupRovingTabIndex = null;
|
|
636
630
|
!force && await this.#waitAnimationsFinish();
|
|
637
631
|
this.#contentElements.forEach((content) => {
|
|
638
632
|
force && this.#bindings.get(content)?.animation?.finish();
|
|
@@ -655,33 +649,40 @@ var Accordion = class _Accordion {
|
|
|
655
649
|
"style",
|
|
656
650
|
"tabindex"
|
|
657
651
|
]);
|
|
658
|
-
this.#triggerElements.forEach((
|
|
652
|
+
this.#triggerElements.forEach((trigger2, i) => {
|
|
659
653
|
const id = Math.random().toString(36).slice(-8);
|
|
660
|
-
const
|
|
661
|
-
if (!
|
|
654
|
+
const content2 = this.#contentElements[i];
|
|
655
|
+
if (!content2) {
|
|
662
656
|
return;
|
|
663
657
|
}
|
|
664
|
-
saveAttributes([
|
|
665
|
-
|
|
666
|
-
addTokenToAttribute(
|
|
667
|
-
|
|
658
|
+
saveAttributes([content2], ["aria-labelledby", "id", "role"]);
|
|
659
|
+
content2.id ||= `accordion-content-${id}`;
|
|
660
|
+
addTokenToAttribute(trigger2, "aria-controls", content2.id);
|
|
661
|
+
trigger2.setAttribute(
|
|
668
662
|
"aria-expanded",
|
|
669
|
-
|
|
663
|
+
trigger2.ariaExpanded === "true" ? "true" : "false"
|
|
670
664
|
);
|
|
671
|
-
|
|
672
|
-
if (!isFocusable2(
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
665
|
+
trigger2.id ||= `accordion-trigger-${id}`;
|
|
666
|
+
if (!isFocusable2(trigger2)) {
|
|
667
|
+
trigger2.setAttribute("aria-disabled", "true");
|
|
668
|
+
trigger2.setAttribute("tabindex", "-1");
|
|
669
|
+
trigger2.style.setProperty("pointer-events", "none");
|
|
676
670
|
}
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
addTokenToAttribute(
|
|
680
|
-
|
|
681
|
-
|
|
671
|
+
trigger2.addEventListener("click", this.#onTriggerClick, { signal });
|
|
672
|
+
trigger2.addEventListener("keydown", this.#onTriggerKeyDown, { signal });
|
|
673
|
+
addTokenToAttribute(content2, "aria-labelledby", trigger2.id);
|
|
674
|
+
content2.setAttribute("role", "region");
|
|
675
|
+
content2.addEventListener("beforematch", this.#onContentBeforeMatch, {
|
|
682
676
|
signal
|
|
683
677
|
});
|
|
684
678
|
});
|
|
679
|
+
const { trigger, content } = this.#settings.selector;
|
|
680
|
+
this.#cleanupRovingTabIndex = createRovingTabIndex(this.#rootElement, {
|
|
681
|
+
direction: "vertical",
|
|
682
|
+
navigationOnly: true,
|
|
683
|
+
selector: `${trigger}:not(:scope ${content} *)`,
|
|
684
|
+
wrap: true
|
|
685
|
+
});
|
|
685
686
|
this.#rootElement.setAttribute("data-accordion-initialized", "");
|
|
686
687
|
}
|
|
687
688
|
#onTriggerClick = (event) => {
|
|
@@ -831,7 +832,7 @@ function waitAnimationFinish(animation) {
|
|
|
831
832
|
* Accordion
|
|
832
833
|
* WAI-ARIA compliant accordion pattern implementation in TypeScript.
|
|
833
834
|
*
|
|
834
|
-
* @version 1.3.
|
|
835
|
+
* @version 1.3.2
|
|
835
836
|
* @author Yusuke Kamiyamane
|
|
836
837
|
* @license MIT
|
|
837
838
|
* @copyright Copyright (c) Yusuke Kamiyamane
|