@y14e/accordion 1.4.9 → 1.4.10
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 +4 -4
- package/dist/index.cjs +30 -40
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +30 -40
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -10,14 +10,14 @@ npm i @y14e/accordion
|
|
|
10
10
|
|
|
11
11
|
```ts
|
|
12
12
|
// npm
|
|
13
|
-
import Accordion from '@y14e/accordion@1.4.
|
|
13
|
+
import Accordion from '@y14e/accordion@1.4.10';
|
|
14
14
|
|
|
15
15
|
// CDNs
|
|
16
|
-
import Accordion from 'https://esm.sh/@y14e/accordion@1.4.
|
|
16
|
+
import Accordion from 'https://esm.sh/@y14e/accordion@1.4.10';
|
|
17
17
|
// or
|
|
18
|
-
import Accordion from 'https://cdn.jsdelivr.net/npm/@y14e/accordion@1.4.
|
|
18
|
+
import Accordion from 'https://cdn.jsdelivr.net/npm/@y14e/accordion@1.4.10/+esm';
|
|
19
19
|
// or
|
|
20
|
-
import Accordion from 'https://esm.unpkg.com/@y14e/accordion@1.4.
|
|
20
|
+
import Accordion from 'https://esm.unpkg.com/@y14e/accordion@1.4.10';
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## Usage
|
package/dist/index.cjs
CHANGED
|
@@ -90,11 +90,10 @@ var Button = class {
|
|
|
90
90
|
return;
|
|
91
91
|
}
|
|
92
92
|
const active = getActiveElement();
|
|
93
|
-
if (
|
|
94
|
-
|
|
93
|
+
if (active instanceof HTMLElement) {
|
|
94
|
+
event.preventDefault();
|
|
95
|
+
active.click();
|
|
95
96
|
}
|
|
96
|
-
event.preventDefault();
|
|
97
|
-
active.click();
|
|
98
97
|
};
|
|
99
98
|
};
|
|
100
99
|
function getActiveElement() {
|
|
@@ -478,11 +477,10 @@ var RovingTabIndex = class {
|
|
|
478
477
|
}
|
|
479
478
|
#onFocusIn = (event) => {
|
|
480
479
|
const { target } = event;
|
|
481
|
-
if (
|
|
482
|
-
|
|
480
|
+
if (target instanceof Element) {
|
|
481
|
+
const isFocusable22 = this.#focusables.has(target);
|
|
482
|
+
this.#options.noMemory && !isFocusable22 ? this.#update(null) : isFocusable22 && this.#update(target);
|
|
483
483
|
}
|
|
484
|
-
const isFocusable22 = this.#focusables.has(target);
|
|
485
|
-
this.#options.noMemory && !isFocusable22 ? this.#update(null) : isFocusable22 && this.#update(target);
|
|
486
484
|
};
|
|
487
485
|
#onKeyDown = (event) => {
|
|
488
486
|
if (!event.composedPath().includes(this.#container)) {
|
|
@@ -572,11 +570,11 @@ var RovingTabIndex = class {
|
|
|
572
570
|
if (!typeahead) {
|
|
573
571
|
continue;
|
|
574
572
|
}
|
|
573
|
+
const char = focusable.textContent?.trim()?.at(0)?.toUpperCase();
|
|
575
574
|
const value = focusable.ariaKeyShortcuts?.trim();
|
|
576
575
|
const keys = new Set(
|
|
577
576
|
value ? value.split(/\s+/).filter((key) => /^\S$/i.test(key)).map((key) => key.toUpperCase()) : []
|
|
578
577
|
);
|
|
579
|
-
const char = focusable.textContent?.trim()?.at(0)?.toUpperCase();
|
|
580
578
|
if (char) {
|
|
581
579
|
keys.add(char);
|
|
582
580
|
saveAttributes2([focusable], ["aria-keyshortcuts"]);
|
|
@@ -680,12 +678,11 @@ var Accordion = class _Accordion {
|
|
|
680
678
|
}
|
|
681
679
|
this.#triggerElements.forEach((trigger2, i) => {
|
|
682
680
|
const content2 = this.#contentElements[i];
|
|
683
|
-
if (
|
|
684
|
-
|
|
681
|
+
if (content2) {
|
|
682
|
+
const binding = createBinding(trigger2, content2);
|
|
683
|
+
this.#bindings.set(trigger2, binding);
|
|
684
|
+
this.#bindings.set(content2, binding);
|
|
685
685
|
}
|
|
686
|
-
const binding = createBinding(trigger2, content2);
|
|
687
|
-
this.#bindings.set(trigger2, binding);
|
|
688
|
-
this.#bindings.set(content2, binding);
|
|
689
686
|
});
|
|
690
687
|
this.#initialize();
|
|
691
688
|
}
|
|
@@ -693,11 +690,11 @@ var Accordion = class _Accordion {
|
|
|
693
690
|
if (this.#isDestroyed) {
|
|
694
691
|
return;
|
|
695
692
|
}
|
|
696
|
-
if (
|
|
693
|
+
if (trigger instanceof HTMLElement && this.#bindings.has(trigger)) {
|
|
694
|
+
this.#toggle(trigger, false);
|
|
695
|
+
} else {
|
|
697
696
|
console.warn("Invalid trigger element");
|
|
698
|
-
return;
|
|
699
697
|
}
|
|
700
|
-
this.#toggle(trigger, false);
|
|
701
698
|
}
|
|
702
699
|
async destroy(force = false) {
|
|
703
700
|
if (this.#isDestroyed) {
|
|
@@ -728,11 +725,11 @@ var Accordion = class _Accordion {
|
|
|
728
725
|
if (this.#isDestroyed) {
|
|
729
726
|
return;
|
|
730
727
|
}
|
|
731
|
-
if (
|
|
728
|
+
if (trigger instanceof HTMLElement && this.#bindings.has(trigger)) {
|
|
729
|
+
this.#toggle(trigger, true);
|
|
730
|
+
} else {
|
|
732
731
|
console.warn("Invalid trigger element");
|
|
733
|
-
return;
|
|
734
732
|
}
|
|
735
|
-
this.#toggle(trigger, true);
|
|
736
733
|
}
|
|
737
734
|
#initialize() {
|
|
738
735
|
saveAttributes(this.#triggerElements, [
|
|
@@ -783,21 +780,16 @@ var Accordion = class _Accordion {
|
|
|
783
780
|
#onTriggerClick = (event) => {
|
|
784
781
|
event.preventDefault();
|
|
785
782
|
const trigger = event.currentTarget;
|
|
786
|
-
if (
|
|
787
|
-
|
|
783
|
+
if (trigger instanceof HTMLElement) {
|
|
784
|
+
this.#toggle(trigger, trigger.ariaExpanded === "false");
|
|
788
785
|
}
|
|
789
|
-
this.#toggle(trigger, trigger.ariaExpanded === "false");
|
|
790
786
|
};
|
|
791
787
|
#onContentBeforeMatch = (event) => {
|
|
792
788
|
const content = event.currentTarget;
|
|
793
|
-
if (
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
const binding = this.#bindings.get(content);
|
|
797
|
-
if (!binding) {
|
|
798
|
-
return;
|
|
789
|
+
if (content instanceof HTMLElement) {
|
|
790
|
+
const binding = this.#bindings.get(content);
|
|
791
|
+
binding && binding.trigger.ariaExpanded === "false" && this.#toggle(binding.trigger, true, true);
|
|
799
792
|
}
|
|
800
|
-
binding.trigger.ariaExpanded === "false" && this.#toggle(binding.trigger, true, true);
|
|
801
793
|
};
|
|
802
794
|
#toggle(trigger, isOpen, isMatch = false) {
|
|
803
795
|
if (trigger.ariaExpanded === String(isOpen)) {
|
|
@@ -862,10 +854,7 @@ var Accordion = class _Accordion {
|
|
|
862
854
|
}
|
|
863
855
|
#onAnimationFinish(content) {
|
|
864
856
|
const trigger = this.#bindings.get(content)?.trigger;
|
|
865
|
-
if (
|
|
866
|
-
return;
|
|
867
|
-
}
|
|
868
|
-
if (trigger.ariaExpanded === "false") {
|
|
857
|
+
if (trigger && trigger.ariaExpanded === "false") {
|
|
869
858
|
content.setAttribute("hidden", "until-found");
|
|
870
859
|
}
|
|
871
860
|
["block-size", "overflow"].forEach((name) => {
|
|
@@ -890,16 +879,17 @@ function isFocusable2(element) {
|
|
|
890
879
|
function waitAnimationFinish(animation) {
|
|
891
880
|
if (["idle", "finished"].includes(animation.playState)) {
|
|
892
881
|
return Promise.resolve();
|
|
882
|
+
} else {
|
|
883
|
+
return new Promise(
|
|
884
|
+
(resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
|
|
885
|
+
);
|
|
893
886
|
}
|
|
894
|
-
return new Promise(
|
|
895
|
-
(resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
|
|
896
|
-
);
|
|
897
887
|
}
|
|
898
888
|
/**
|
|
899
889
|
* Accordion
|
|
900
890
|
* WAI-ARIA compliant accordion pattern implementation in TypeScript.
|
|
901
891
|
*
|
|
902
|
-
* @version 1.4.
|
|
892
|
+
* @version 1.4.10
|
|
903
893
|
* @author Yusuke Kamiyamane
|
|
904
894
|
* @license MIT
|
|
905
895
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -922,7 +912,7 @@ function waitAnimationFinish(animation) {
|
|
|
922
912
|
(**
|
|
923
913
|
* Button
|
|
924
914
|
*
|
|
925
|
-
* @version 1.0.
|
|
915
|
+
* @version 1.0.1
|
|
926
916
|
* @author Yusuke Kamiyamane
|
|
927
917
|
* @license MIT
|
|
928
918
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -935,7 +925,7 @@ function waitAnimationFinish(animation) {
|
|
|
935
925
|
* Lightweight roving tabindex utility with fully focus management.
|
|
936
926
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
937
927
|
*
|
|
938
|
-
* @version 3.0.
|
|
928
|
+
* @version 3.0.4
|
|
939
929
|
* @author Yusuke Kamiyamane
|
|
940
930
|
* @license MIT
|
|
941
931
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -88,11 +88,10 @@ var Button = class {
|
|
|
88
88
|
return;
|
|
89
89
|
}
|
|
90
90
|
const active = getActiveElement();
|
|
91
|
-
if (
|
|
92
|
-
|
|
91
|
+
if (active instanceof HTMLElement) {
|
|
92
|
+
event.preventDefault();
|
|
93
|
+
active.click();
|
|
93
94
|
}
|
|
94
|
-
event.preventDefault();
|
|
95
|
-
active.click();
|
|
96
95
|
};
|
|
97
96
|
};
|
|
98
97
|
function getActiveElement() {
|
|
@@ -476,11 +475,10 @@ var RovingTabIndex = class {
|
|
|
476
475
|
}
|
|
477
476
|
#onFocusIn = (event) => {
|
|
478
477
|
const { target } = event;
|
|
479
|
-
if (
|
|
480
|
-
|
|
478
|
+
if (target instanceof Element) {
|
|
479
|
+
const isFocusable22 = this.#focusables.has(target);
|
|
480
|
+
this.#options.noMemory && !isFocusable22 ? this.#update(null) : isFocusable22 && this.#update(target);
|
|
481
481
|
}
|
|
482
|
-
const isFocusable22 = this.#focusables.has(target);
|
|
483
|
-
this.#options.noMemory && !isFocusable22 ? this.#update(null) : isFocusable22 && this.#update(target);
|
|
484
482
|
};
|
|
485
483
|
#onKeyDown = (event) => {
|
|
486
484
|
if (!event.composedPath().includes(this.#container)) {
|
|
@@ -570,11 +568,11 @@ var RovingTabIndex = class {
|
|
|
570
568
|
if (!typeahead) {
|
|
571
569
|
continue;
|
|
572
570
|
}
|
|
571
|
+
const char = focusable.textContent?.trim()?.at(0)?.toUpperCase();
|
|
573
572
|
const value = focusable.ariaKeyShortcuts?.trim();
|
|
574
573
|
const keys = new Set(
|
|
575
574
|
value ? value.split(/\s+/).filter((key) => /^\S$/i.test(key)).map((key) => key.toUpperCase()) : []
|
|
576
575
|
);
|
|
577
|
-
const char = focusable.textContent?.trim()?.at(0)?.toUpperCase();
|
|
578
576
|
if (char) {
|
|
579
577
|
keys.add(char);
|
|
580
578
|
saveAttributes2([focusable], ["aria-keyshortcuts"]);
|
|
@@ -678,12 +676,11 @@ var Accordion = class _Accordion {
|
|
|
678
676
|
}
|
|
679
677
|
this.#triggerElements.forEach((trigger2, i) => {
|
|
680
678
|
const content2 = this.#contentElements[i];
|
|
681
|
-
if (
|
|
682
|
-
|
|
679
|
+
if (content2) {
|
|
680
|
+
const binding = createBinding(trigger2, content2);
|
|
681
|
+
this.#bindings.set(trigger2, binding);
|
|
682
|
+
this.#bindings.set(content2, binding);
|
|
683
683
|
}
|
|
684
|
-
const binding = createBinding(trigger2, content2);
|
|
685
|
-
this.#bindings.set(trigger2, binding);
|
|
686
|
-
this.#bindings.set(content2, binding);
|
|
687
684
|
});
|
|
688
685
|
this.#initialize();
|
|
689
686
|
}
|
|
@@ -691,11 +688,11 @@ var Accordion = class _Accordion {
|
|
|
691
688
|
if (this.#isDestroyed) {
|
|
692
689
|
return;
|
|
693
690
|
}
|
|
694
|
-
if (
|
|
691
|
+
if (trigger instanceof HTMLElement && this.#bindings.has(trigger)) {
|
|
692
|
+
this.#toggle(trigger, false);
|
|
693
|
+
} else {
|
|
695
694
|
console.warn("Invalid trigger element");
|
|
696
|
-
return;
|
|
697
695
|
}
|
|
698
|
-
this.#toggle(trigger, false);
|
|
699
696
|
}
|
|
700
697
|
async destroy(force = false) {
|
|
701
698
|
if (this.#isDestroyed) {
|
|
@@ -726,11 +723,11 @@ var Accordion = class _Accordion {
|
|
|
726
723
|
if (this.#isDestroyed) {
|
|
727
724
|
return;
|
|
728
725
|
}
|
|
729
|
-
if (
|
|
726
|
+
if (trigger instanceof HTMLElement && this.#bindings.has(trigger)) {
|
|
727
|
+
this.#toggle(trigger, true);
|
|
728
|
+
} else {
|
|
730
729
|
console.warn("Invalid trigger element");
|
|
731
|
-
return;
|
|
732
730
|
}
|
|
733
|
-
this.#toggle(trigger, true);
|
|
734
731
|
}
|
|
735
732
|
#initialize() {
|
|
736
733
|
saveAttributes(this.#triggerElements, [
|
|
@@ -781,21 +778,16 @@ var Accordion = class _Accordion {
|
|
|
781
778
|
#onTriggerClick = (event) => {
|
|
782
779
|
event.preventDefault();
|
|
783
780
|
const trigger = event.currentTarget;
|
|
784
|
-
if (
|
|
785
|
-
|
|
781
|
+
if (trigger instanceof HTMLElement) {
|
|
782
|
+
this.#toggle(trigger, trigger.ariaExpanded === "false");
|
|
786
783
|
}
|
|
787
|
-
this.#toggle(trigger, trigger.ariaExpanded === "false");
|
|
788
784
|
};
|
|
789
785
|
#onContentBeforeMatch = (event) => {
|
|
790
786
|
const content = event.currentTarget;
|
|
791
|
-
if (
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
const binding = this.#bindings.get(content);
|
|
795
|
-
if (!binding) {
|
|
796
|
-
return;
|
|
787
|
+
if (content instanceof HTMLElement) {
|
|
788
|
+
const binding = this.#bindings.get(content);
|
|
789
|
+
binding && binding.trigger.ariaExpanded === "false" && this.#toggle(binding.trigger, true, true);
|
|
797
790
|
}
|
|
798
|
-
binding.trigger.ariaExpanded === "false" && this.#toggle(binding.trigger, true, true);
|
|
799
791
|
};
|
|
800
792
|
#toggle(trigger, isOpen, isMatch = false) {
|
|
801
793
|
if (trigger.ariaExpanded === String(isOpen)) {
|
|
@@ -860,10 +852,7 @@ var Accordion = class _Accordion {
|
|
|
860
852
|
}
|
|
861
853
|
#onAnimationFinish(content) {
|
|
862
854
|
const trigger = this.#bindings.get(content)?.trigger;
|
|
863
|
-
if (
|
|
864
|
-
return;
|
|
865
|
-
}
|
|
866
|
-
if (trigger.ariaExpanded === "false") {
|
|
855
|
+
if (trigger && trigger.ariaExpanded === "false") {
|
|
867
856
|
content.setAttribute("hidden", "until-found");
|
|
868
857
|
}
|
|
869
858
|
["block-size", "overflow"].forEach((name) => {
|
|
@@ -888,16 +877,17 @@ function isFocusable2(element) {
|
|
|
888
877
|
function waitAnimationFinish(animation) {
|
|
889
878
|
if (["idle", "finished"].includes(animation.playState)) {
|
|
890
879
|
return Promise.resolve();
|
|
880
|
+
} else {
|
|
881
|
+
return new Promise(
|
|
882
|
+
(resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
|
|
883
|
+
);
|
|
891
884
|
}
|
|
892
|
-
return new Promise(
|
|
893
|
-
(resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
|
|
894
|
-
);
|
|
895
885
|
}
|
|
896
886
|
/**
|
|
897
887
|
* Accordion
|
|
898
888
|
* WAI-ARIA compliant accordion pattern implementation in TypeScript.
|
|
899
889
|
*
|
|
900
|
-
* @version 1.4.
|
|
890
|
+
* @version 1.4.10
|
|
901
891
|
* @author Yusuke Kamiyamane
|
|
902
892
|
* @license MIT
|
|
903
893
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -920,7 +910,7 @@ function waitAnimationFinish(animation) {
|
|
|
920
910
|
(**
|
|
921
911
|
* Button
|
|
922
912
|
*
|
|
923
|
-
* @version 1.0.
|
|
913
|
+
* @version 1.0.1
|
|
924
914
|
* @author Yusuke Kamiyamane
|
|
925
915
|
* @license MIT
|
|
926
916
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -933,7 +923,7 @@ function waitAnimationFinish(animation) {
|
|
|
933
923
|
* Lightweight roving tabindex utility with fully focus management.
|
|
934
924
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
935
925
|
*
|
|
936
|
-
* @version 3.0.
|
|
926
|
+
* @version 3.0.4
|
|
937
927
|
* @author Yusuke Kamiyamane
|
|
938
928
|
* @license MIT
|
|
939
929
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@y14e/accordion",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.10",
|
|
4
4
|
"description": "WAI-ARIA compliant accordion pattern implementation in TypeScript",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"homepage": "https://github.com/y14e/accordion#readme",
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@y14e/attributes-utils": "^1.1.2",
|
|
47
|
-
"@y14e/button": "^1.0.
|
|
48
|
-
"@y14e/roving-tabindex": "^3.0.
|
|
47
|
+
"@y14e/button": "^1.0.1",
|
|
48
|
+
"@y14e/roving-tabindex": "^3.0.4",
|
|
49
49
|
"bun-types": "latest",
|
|
50
50
|
"tsup": "^8.0.0",
|
|
51
51
|
"typescript": "^5.6.0",
|