@y14e/disclosure 1.3.18 → 1.3.19
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.bundle.cjs +47 -51
- package/dist/index.bundle.js +47 -51
- package/dist/index.cjs +34 -38
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +34 -38
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -10,14 +10,14 @@ npm i @y14e/disclosure
|
|
|
10
10
|
|
|
11
11
|
```ts
|
|
12
12
|
// npm
|
|
13
|
-
import Disclosure from '@y14e/disclosure@1.3.
|
|
13
|
+
import Disclosure from '@y14e/disclosure@1.3.19';
|
|
14
14
|
|
|
15
15
|
// CDNs
|
|
16
|
-
import Disclosure from 'https://esm.sh/@y14e/disclosure@1.3.
|
|
16
|
+
import Disclosure from 'https://esm.sh/@y14e/disclosure@1.3.19';
|
|
17
17
|
// or
|
|
18
|
-
import Disclosure from 'https://cdn.jsdelivr.net/npm/@y14e/disclosure@1.3.
|
|
18
|
+
import Disclosure from 'https://cdn.jsdelivr.net/npm/@y14e/disclosure@1.3.19/+esm';
|
|
19
19
|
// or
|
|
20
|
-
import Disclosure from 'https://esm.unpkg.com/@y14e/disclosure@1.3.
|
|
20
|
+
import Disclosure from 'https://esm.unpkg.com/@y14e/disclosure@1.3.19';
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## Usage
|
package/dist/index.bundle.cjs
CHANGED
|
@@ -377,28 +377,28 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
377
377
|
this.#focusablesByFirstChar.clear();
|
|
378
378
|
}
|
|
379
379
|
#initialize() {
|
|
380
|
-
this.#update(
|
|
380
|
+
this.#update(getActiveElement());
|
|
381
381
|
if (!(this.#container instanceof HTMLElement)) {
|
|
382
382
|
return;
|
|
383
383
|
}
|
|
384
384
|
this.#controller = new AbortController();
|
|
385
385
|
const { signal } = this.#controller;
|
|
386
|
-
document.addEventListener("focusin", this.#onFocusIn, {
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
});
|
|
390
|
-
this.#container.addEventListener("keydown", this.#onKeyDown, {
|
|
391
|
-
capture: true,
|
|
392
|
-
signal
|
|
393
|
-
});
|
|
386
|
+
document.addEventListener("focusin", this.#onFocusIn, { signal });
|
|
387
|
+
this.#settings.noMemory && document.addEventListener("focusout", this.#onFocusOut, { signal });
|
|
388
|
+
this.#container.addEventListener("keydown", this.#onKeyDown, { signal });
|
|
394
389
|
}
|
|
395
390
|
#onFocusIn = (event) => {
|
|
396
391
|
const { target } = event;
|
|
397
392
|
if (!(target instanceof Element)) {
|
|
398
393
|
return;
|
|
399
394
|
}
|
|
400
|
-
const
|
|
401
|
-
this.#settings.noMemory && !
|
|
395
|
+
const isFocusable2 = this.#focusables.has(target);
|
|
396
|
+
this.#settings.noMemory && !isFocusable2 ? this.#update() : isFocusable2 && this.#update(target);
|
|
397
|
+
};
|
|
398
|
+
#onFocusOut = (event) => {
|
|
399
|
+
if (!event.relatedTarget) {
|
|
400
|
+
this.#update();
|
|
401
|
+
}
|
|
402
402
|
};
|
|
403
403
|
#onKeyDown = (event) => {
|
|
404
404
|
const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
|
|
@@ -597,7 +597,7 @@ var Disclosure = class _Disclosure {
|
|
|
597
597
|
const summary = this.#summaryElements[i];
|
|
598
598
|
const content = this.#contentElements[i];
|
|
599
599
|
if (summary && content) {
|
|
600
|
-
const binding = createBinding(details, summary, content);
|
|
600
|
+
const binding = this.#createBinding(details, summary, content);
|
|
601
601
|
this.#bindings.set(details, binding);
|
|
602
602
|
this.#bindings.set(summary, binding);
|
|
603
603
|
this.#bindings.set(content, binding);
|
|
@@ -631,7 +631,7 @@ var Disclosure = class _Disclosure {
|
|
|
631
631
|
!force && await this.#waitAnimationsFinish();
|
|
632
632
|
this.#contentElements.forEach((content) => {
|
|
633
633
|
force && this.#bindings.get(content)?.animation?.finish();
|
|
634
|
-
this.#
|
|
634
|
+
this.#onContentAnimationFinish(content);
|
|
635
635
|
});
|
|
636
636
|
this.#animationController?.abort();
|
|
637
637
|
this.#animationController = null;
|
|
@@ -677,7 +677,7 @@ var Disclosure = class _Disclosure {
|
|
|
677
677
|
if (!summary) {
|
|
678
678
|
return;
|
|
679
679
|
}
|
|
680
|
-
if (!
|
|
680
|
+
if (!this.#isFocusable(summary)) {
|
|
681
681
|
summary.setAttribute("aria-disabled", "true");
|
|
682
682
|
summary.setAttribute("tabindex", "-1");
|
|
683
683
|
summary.style.setProperty("pointer-events", "none");
|
|
@@ -705,6 +705,24 @@ var Disclosure = class _Disclosure {
|
|
|
705
705
|
const { details } = binding;
|
|
706
706
|
this.#toggle(details, !details.hasAttribute("data-disclosure-open"));
|
|
707
707
|
};
|
|
708
|
+
#onContentAnimationFinish(content) {
|
|
709
|
+
const binding = this.#bindings.get(content);
|
|
710
|
+
if (!binding) {
|
|
711
|
+
return;
|
|
712
|
+
}
|
|
713
|
+
const details = binding.details;
|
|
714
|
+
if (!details) {
|
|
715
|
+
return;
|
|
716
|
+
}
|
|
717
|
+
const name = details.getAttribute("data-disclosure-name");
|
|
718
|
+
name && details.setAttribute("name", name);
|
|
719
|
+
if (!details.hasAttribute("data-disclosure-open")) {
|
|
720
|
+
details.open = false;
|
|
721
|
+
}
|
|
722
|
+
["block-size", "overflow"].forEach((name2) => {
|
|
723
|
+
content.style.removeProperty(name2);
|
|
724
|
+
});
|
|
725
|
+
}
|
|
708
726
|
#toggle(details, isOpen) {
|
|
709
727
|
if (details.hasAttribute("data-disclosure-open") === isOpen) {
|
|
710
728
|
return;
|
|
@@ -712,10 +730,10 @@ var Disclosure = class _Disclosure {
|
|
|
712
730
|
const name = details.getAttribute("data-disclosure-name");
|
|
713
731
|
if (name && isOpen) {
|
|
714
732
|
details.removeAttribute("name");
|
|
715
|
-
const
|
|
733
|
+
const open = this.#detailsElements.find(
|
|
716
734
|
(d) => d.hasAttribute("data-disclosure-open") && d.getAttribute("data-disclosure-name") === name
|
|
717
735
|
);
|
|
718
|
-
|
|
736
|
+
open && this.close(open);
|
|
719
737
|
}
|
|
720
738
|
const binding = this.#bindings.get(details);
|
|
721
739
|
if (!binding) {
|
|
@@ -749,36 +767,24 @@ var Disclosure = class _Disclosure {
|
|
|
749
767
|
"finish",
|
|
750
768
|
() => {
|
|
751
769
|
if (binding?.animation === animation) {
|
|
752
|
-
this.#
|
|
770
|
+
this.#onContentAnimationFinish(content);
|
|
753
771
|
cleanup();
|
|
754
772
|
}
|
|
755
773
|
},
|
|
756
774
|
{ once: true, signal }
|
|
757
775
|
);
|
|
758
776
|
}
|
|
777
|
+
#createBinding(details, summary, content) {
|
|
778
|
+
return { details, summary, content, animation: null };
|
|
779
|
+
}
|
|
780
|
+
#isFocusable(element) {
|
|
781
|
+
return element.tabIndex >= 0;
|
|
782
|
+
}
|
|
759
783
|
#mergeOptions(target, source) {
|
|
760
784
|
return {
|
|
761
785
|
animation: { ...target.animation, ...source.animation ?? {} }
|
|
762
786
|
};
|
|
763
787
|
}
|
|
764
|
-
#onAnimationFinish(content) {
|
|
765
|
-
const binding = this.#bindings.get(content);
|
|
766
|
-
if (!binding) {
|
|
767
|
-
return;
|
|
768
|
-
}
|
|
769
|
-
const details = binding.details;
|
|
770
|
-
if (!details) {
|
|
771
|
-
return;
|
|
772
|
-
}
|
|
773
|
-
const name = details.getAttribute("data-disclosure-name");
|
|
774
|
-
name && details.setAttribute("name", name);
|
|
775
|
-
if (!details.hasAttribute("data-disclosure-open")) {
|
|
776
|
-
details.open = false;
|
|
777
|
-
}
|
|
778
|
-
["block-size", "overflow"].forEach((name2) => {
|
|
779
|
-
content.style.removeProperty(name2);
|
|
780
|
-
});
|
|
781
|
-
}
|
|
782
788
|
async #waitAnimationsFinish() {
|
|
783
789
|
const promises = [];
|
|
784
790
|
this.#contentElements.forEach((content) => {
|
|
@@ -788,27 +794,17 @@ var Disclosure = class _Disclosure {
|
|
|
788
794
|
await Promise.allSettled(promises);
|
|
789
795
|
}
|
|
790
796
|
};
|
|
791
|
-
function createBinding(details, summary, content) {
|
|
792
|
-
return { details, summary, content, animation: null };
|
|
793
|
-
}
|
|
794
|
-
function isFocusable2(element) {
|
|
795
|
-
return element.tabIndex >= 0;
|
|
796
|
-
}
|
|
797
797
|
function waitAnimationFinish(animation) {
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
return new Promise(
|
|
802
|
-
(resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
|
|
803
|
-
);
|
|
804
|
-
}
|
|
798
|
+
return ["idle", "finished"].includes(animation.playState) ? Promise.resolve() : new Promise(
|
|
799
|
+
(resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
|
|
800
|
+
);
|
|
805
801
|
}
|
|
806
802
|
/**
|
|
807
803
|
* Disclosure
|
|
808
804
|
* WAI-ARIA compliant disclosure pattern implementation in TypeScript.
|
|
809
805
|
* Using the <details> and <summary> element.
|
|
810
806
|
*
|
|
811
|
-
* @version 1.3.
|
|
807
|
+
* @version 1.3.19
|
|
812
808
|
* @author Yusuke Kamiyamane
|
|
813
809
|
* @license MIT
|
|
814
810
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -833,7 +829,7 @@ power-focusable/dist/index.js:
|
|
|
833
829
|
* High-precision focus management utility with full composed tree support.
|
|
834
830
|
* Handles complex focus rules including tabindex ordering, radio groups, inert.
|
|
835
831
|
*
|
|
836
|
-
* @version 4.3.
|
|
832
|
+
* @version 4.3.5
|
|
837
833
|
* @author Yusuke Kamiyamane
|
|
838
834
|
* @license MIT
|
|
839
835
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -846,7 +842,7 @@ power-focusable/dist/index.js:
|
|
|
846
842
|
* Lightweight roving tabindex utility with fully focus management.
|
|
847
843
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
848
844
|
*
|
|
849
|
-
* @version 3.
|
|
845
|
+
* @version 3.1.2
|
|
850
846
|
* @author Yusuke Kamiyamane
|
|
851
847
|
* @license MIT
|
|
852
848
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.bundle.js
CHANGED
|
@@ -375,28 +375,28 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
375
375
|
this.#focusablesByFirstChar.clear();
|
|
376
376
|
}
|
|
377
377
|
#initialize() {
|
|
378
|
-
this.#update(
|
|
378
|
+
this.#update(getActiveElement());
|
|
379
379
|
if (!(this.#container instanceof HTMLElement)) {
|
|
380
380
|
return;
|
|
381
381
|
}
|
|
382
382
|
this.#controller = new AbortController();
|
|
383
383
|
const { signal } = this.#controller;
|
|
384
|
-
document.addEventListener("focusin", this.#onFocusIn, {
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
});
|
|
388
|
-
this.#container.addEventListener("keydown", this.#onKeyDown, {
|
|
389
|
-
capture: true,
|
|
390
|
-
signal
|
|
391
|
-
});
|
|
384
|
+
document.addEventListener("focusin", this.#onFocusIn, { signal });
|
|
385
|
+
this.#settings.noMemory && document.addEventListener("focusout", this.#onFocusOut, { signal });
|
|
386
|
+
this.#container.addEventListener("keydown", this.#onKeyDown, { signal });
|
|
392
387
|
}
|
|
393
388
|
#onFocusIn = (event) => {
|
|
394
389
|
const { target } = event;
|
|
395
390
|
if (!(target instanceof Element)) {
|
|
396
391
|
return;
|
|
397
392
|
}
|
|
398
|
-
const
|
|
399
|
-
this.#settings.noMemory && !
|
|
393
|
+
const isFocusable2 = this.#focusables.has(target);
|
|
394
|
+
this.#settings.noMemory && !isFocusable2 ? this.#update() : isFocusable2 && this.#update(target);
|
|
395
|
+
};
|
|
396
|
+
#onFocusOut = (event) => {
|
|
397
|
+
if (!event.relatedTarget) {
|
|
398
|
+
this.#update();
|
|
399
|
+
}
|
|
400
400
|
};
|
|
401
401
|
#onKeyDown = (event) => {
|
|
402
402
|
const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
|
|
@@ -595,7 +595,7 @@ var Disclosure = class _Disclosure {
|
|
|
595
595
|
const summary = this.#summaryElements[i];
|
|
596
596
|
const content = this.#contentElements[i];
|
|
597
597
|
if (summary && content) {
|
|
598
|
-
const binding = createBinding(details, summary, content);
|
|
598
|
+
const binding = this.#createBinding(details, summary, content);
|
|
599
599
|
this.#bindings.set(details, binding);
|
|
600
600
|
this.#bindings.set(summary, binding);
|
|
601
601
|
this.#bindings.set(content, binding);
|
|
@@ -629,7 +629,7 @@ var Disclosure = class _Disclosure {
|
|
|
629
629
|
!force && await this.#waitAnimationsFinish();
|
|
630
630
|
this.#contentElements.forEach((content) => {
|
|
631
631
|
force && this.#bindings.get(content)?.animation?.finish();
|
|
632
|
-
this.#
|
|
632
|
+
this.#onContentAnimationFinish(content);
|
|
633
633
|
});
|
|
634
634
|
this.#animationController?.abort();
|
|
635
635
|
this.#animationController = null;
|
|
@@ -675,7 +675,7 @@ var Disclosure = class _Disclosure {
|
|
|
675
675
|
if (!summary) {
|
|
676
676
|
return;
|
|
677
677
|
}
|
|
678
|
-
if (!
|
|
678
|
+
if (!this.#isFocusable(summary)) {
|
|
679
679
|
summary.setAttribute("aria-disabled", "true");
|
|
680
680
|
summary.setAttribute("tabindex", "-1");
|
|
681
681
|
summary.style.setProperty("pointer-events", "none");
|
|
@@ -703,6 +703,24 @@ var Disclosure = class _Disclosure {
|
|
|
703
703
|
const { details } = binding;
|
|
704
704
|
this.#toggle(details, !details.hasAttribute("data-disclosure-open"));
|
|
705
705
|
};
|
|
706
|
+
#onContentAnimationFinish(content) {
|
|
707
|
+
const binding = this.#bindings.get(content);
|
|
708
|
+
if (!binding) {
|
|
709
|
+
return;
|
|
710
|
+
}
|
|
711
|
+
const details = binding.details;
|
|
712
|
+
if (!details) {
|
|
713
|
+
return;
|
|
714
|
+
}
|
|
715
|
+
const name = details.getAttribute("data-disclosure-name");
|
|
716
|
+
name && details.setAttribute("name", name);
|
|
717
|
+
if (!details.hasAttribute("data-disclosure-open")) {
|
|
718
|
+
details.open = false;
|
|
719
|
+
}
|
|
720
|
+
["block-size", "overflow"].forEach((name2) => {
|
|
721
|
+
content.style.removeProperty(name2);
|
|
722
|
+
});
|
|
723
|
+
}
|
|
706
724
|
#toggle(details, isOpen) {
|
|
707
725
|
if (details.hasAttribute("data-disclosure-open") === isOpen) {
|
|
708
726
|
return;
|
|
@@ -710,10 +728,10 @@ var Disclosure = class _Disclosure {
|
|
|
710
728
|
const name = details.getAttribute("data-disclosure-name");
|
|
711
729
|
if (name && isOpen) {
|
|
712
730
|
details.removeAttribute("name");
|
|
713
|
-
const
|
|
731
|
+
const open = this.#detailsElements.find(
|
|
714
732
|
(d) => d.hasAttribute("data-disclosure-open") && d.getAttribute("data-disclosure-name") === name
|
|
715
733
|
);
|
|
716
|
-
|
|
734
|
+
open && this.close(open);
|
|
717
735
|
}
|
|
718
736
|
const binding = this.#bindings.get(details);
|
|
719
737
|
if (!binding) {
|
|
@@ -747,36 +765,24 @@ var Disclosure = class _Disclosure {
|
|
|
747
765
|
"finish",
|
|
748
766
|
() => {
|
|
749
767
|
if (binding?.animation === animation) {
|
|
750
|
-
this.#
|
|
768
|
+
this.#onContentAnimationFinish(content);
|
|
751
769
|
cleanup();
|
|
752
770
|
}
|
|
753
771
|
},
|
|
754
772
|
{ once: true, signal }
|
|
755
773
|
);
|
|
756
774
|
}
|
|
775
|
+
#createBinding(details, summary, content) {
|
|
776
|
+
return { details, summary, content, animation: null };
|
|
777
|
+
}
|
|
778
|
+
#isFocusable(element) {
|
|
779
|
+
return element.tabIndex >= 0;
|
|
780
|
+
}
|
|
757
781
|
#mergeOptions(target, source) {
|
|
758
782
|
return {
|
|
759
783
|
animation: { ...target.animation, ...source.animation ?? {} }
|
|
760
784
|
};
|
|
761
785
|
}
|
|
762
|
-
#onAnimationFinish(content) {
|
|
763
|
-
const binding = this.#bindings.get(content);
|
|
764
|
-
if (!binding) {
|
|
765
|
-
return;
|
|
766
|
-
}
|
|
767
|
-
const details = binding.details;
|
|
768
|
-
if (!details) {
|
|
769
|
-
return;
|
|
770
|
-
}
|
|
771
|
-
const name = details.getAttribute("data-disclosure-name");
|
|
772
|
-
name && details.setAttribute("name", name);
|
|
773
|
-
if (!details.hasAttribute("data-disclosure-open")) {
|
|
774
|
-
details.open = false;
|
|
775
|
-
}
|
|
776
|
-
["block-size", "overflow"].forEach((name2) => {
|
|
777
|
-
content.style.removeProperty(name2);
|
|
778
|
-
});
|
|
779
|
-
}
|
|
780
786
|
async #waitAnimationsFinish() {
|
|
781
787
|
const promises = [];
|
|
782
788
|
this.#contentElements.forEach((content) => {
|
|
@@ -786,27 +792,17 @@ var Disclosure = class _Disclosure {
|
|
|
786
792
|
await Promise.allSettled(promises);
|
|
787
793
|
}
|
|
788
794
|
};
|
|
789
|
-
function createBinding(details, summary, content) {
|
|
790
|
-
return { details, summary, content, animation: null };
|
|
791
|
-
}
|
|
792
|
-
function isFocusable2(element) {
|
|
793
|
-
return element.tabIndex >= 0;
|
|
794
|
-
}
|
|
795
795
|
function waitAnimationFinish(animation) {
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
return new Promise(
|
|
800
|
-
(resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
|
|
801
|
-
);
|
|
802
|
-
}
|
|
796
|
+
return ["idle", "finished"].includes(animation.playState) ? Promise.resolve() : new Promise(
|
|
797
|
+
(resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
|
|
798
|
+
);
|
|
803
799
|
}
|
|
804
800
|
/**
|
|
805
801
|
* Disclosure
|
|
806
802
|
* WAI-ARIA compliant disclosure pattern implementation in TypeScript.
|
|
807
803
|
* Using the <details> and <summary> element.
|
|
808
804
|
*
|
|
809
|
-
* @version 1.3.
|
|
805
|
+
* @version 1.3.19
|
|
810
806
|
* @author Yusuke Kamiyamane
|
|
811
807
|
* @license MIT
|
|
812
808
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -831,7 +827,7 @@ power-focusable/dist/index.js:
|
|
|
831
827
|
* High-precision focus management utility with full composed tree support.
|
|
832
828
|
* Handles complex focus rules including tabindex ordering, radio groups, inert.
|
|
833
829
|
*
|
|
834
|
-
* @version 4.3.
|
|
830
|
+
* @version 4.3.5
|
|
835
831
|
* @author Yusuke Kamiyamane
|
|
836
832
|
* @license MIT
|
|
837
833
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -844,7 +840,7 @@ power-focusable/dist/index.js:
|
|
|
844
840
|
* Lightweight roving tabindex utility with fully focus management.
|
|
845
841
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
846
842
|
*
|
|
847
|
-
* @version 3.
|
|
843
|
+
* @version 3.1.2
|
|
848
844
|
* @author Yusuke Kamiyamane
|
|
849
845
|
* @license MIT
|
|
850
846
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.cjs
CHANGED
|
@@ -67,7 +67,7 @@ var Disclosure = class _Disclosure {
|
|
|
67
67
|
const summary = this.#summaryElements[i];
|
|
68
68
|
const content = this.#contentElements[i];
|
|
69
69
|
if (summary && content) {
|
|
70
|
-
const binding = createBinding(details, summary, content);
|
|
70
|
+
const binding = this.#createBinding(details, summary, content);
|
|
71
71
|
this.#bindings.set(details, binding);
|
|
72
72
|
this.#bindings.set(summary, binding);
|
|
73
73
|
this.#bindings.set(content, binding);
|
|
@@ -101,7 +101,7 @@ var Disclosure = class _Disclosure {
|
|
|
101
101
|
!force && await this.#waitAnimationsFinish();
|
|
102
102
|
this.#contentElements.forEach((content) => {
|
|
103
103
|
force && this.#bindings.get(content)?.animation?.finish();
|
|
104
|
-
this.#
|
|
104
|
+
this.#onContentAnimationFinish(content);
|
|
105
105
|
});
|
|
106
106
|
this.#animationController?.abort();
|
|
107
107
|
this.#animationController = null;
|
|
@@ -147,7 +147,7 @@ var Disclosure = class _Disclosure {
|
|
|
147
147
|
if (!summary) {
|
|
148
148
|
return;
|
|
149
149
|
}
|
|
150
|
-
if (!isFocusable(summary)) {
|
|
150
|
+
if (!this.#isFocusable(summary)) {
|
|
151
151
|
summary.setAttribute("aria-disabled", "true");
|
|
152
152
|
summary.setAttribute("tabindex", "-1");
|
|
153
153
|
summary.style.setProperty("pointer-events", "none");
|
|
@@ -175,6 +175,24 @@ var Disclosure = class _Disclosure {
|
|
|
175
175
|
const { details } = binding;
|
|
176
176
|
this.#toggle(details, !details.hasAttribute("data-disclosure-open"));
|
|
177
177
|
};
|
|
178
|
+
#onContentAnimationFinish(content) {
|
|
179
|
+
const binding = this.#bindings.get(content);
|
|
180
|
+
if (!binding) {
|
|
181
|
+
return;
|
|
182
|
+
}
|
|
183
|
+
const details = binding.details;
|
|
184
|
+
if (!details) {
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
187
|
+
const name = details.getAttribute("data-disclosure-name");
|
|
188
|
+
name && details.setAttribute("name", name);
|
|
189
|
+
if (!details.hasAttribute("data-disclosure-open")) {
|
|
190
|
+
details.open = false;
|
|
191
|
+
}
|
|
192
|
+
["block-size", "overflow"].forEach((name2) => {
|
|
193
|
+
content.style.removeProperty(name2);
|
|
194
|
+
});
|
|
195
|
+
}
|
|
178
196
|
#toggle(details, isOpen) {
|
|
179
197
|
if (details.hasAttribute("data-disclosure-open") === isOpen) {
|
|
180
198
|
return;
|
|
@@ -182,10 +200,10 @@ var Disclosure = class _Disclosure {
|
|
|
182
200
|
const name = details.getAttribute("data-disclosure-name");
|
|
183
201
|
if (name && isOpen) {
|
|
184
202
|
details.removeAttribute("name");
|
|
185
|
-
const
|
|
203
|
+
const open = this.#detailsElements.find(
|
|
186
204
|
(d) => d.hasAttribute("data-disclosure-open") && d.getAttribute("data-disclosure-name") === name
|
|
187
205
|
);
|
|
188
|
-
|
|
206
|
+
open && this.close(open);
|
|
189
207
|
}
|
|
190
208
|
const binding = this.#bindings.get(details);
|
|
191
209
|
if (!binding) {
|
|
@@ -219,36 +237,24 @@ var Disclosure = class _Disclosure {
|
|
|
219
237
|
"finish",
|
|
220
238
|
() => {
|
|
221
239
|
if (binding?.animation === animation) {
|
|
222
|
-
this.#
|
|
240
|
+
this.#onContentAnimationFinish(content);
|
|
223
241
|
cleanup();
|
|
224
242
|
}
|
|
225
243
|
},
|
|
226
244
|
{ once: true, signal }
|
|
227
245
|
);
|
|
228
246
|
}
|
|
247
|
+
#createBinding(details, summary, content) {
|
|
248
|
+
return { details, summary, content, animation: null };
|
|
249
|
+
}
|
|
250
|
+
#isFocusable(element) {
|
|
251
|
+
return element.tabIndex >= 0;
|
|
252
|
+
}
|
|
229
253
|
#mergeOptions(target, source) {
|
|
230
254
|
return {
|
|
231
255
|
animation: { ...target.animation, ...source.animation ?? {} }
|
|
232
256
|
};
|
|
233
257
|
}
|
|
234
|
-
#onAnimationFinish(content) {
|
|
235
|
-
const binding = this.#bindings.get(content);
|
|
236
|
-
if (!binding) {
|
|
237
|
-
return;
|
|
238
|
-
}
|
|
239
|
-
const details = binding.details;
|
|
240
|
-
if (!details) {
|
|
241
|
-
return;
|
|
242
|
-
}
|
|
243
|
-
const name = details.getAttribute("data-disclosure-name");
|
|
244
|
-
name && details.setAttribute("name", name);
|
|
245
|
-
if (!details.hasAttribute("data-disclosure-open")) {
|
|
246
|
-
details.open = false;
|
|
247
|
-
}
|
|
248
|
-
["block-size", "overflow"].forEach((name2) => {
|
|
249
|
-
content.style.removeProperty(name2);
|
|
250
|
-
});
|
|
251
|
-
}
|
|
252
258
|
async #waitAnimationsFinish() {
|
|
253
259
|
const promises = [];
|
|
254
260
|
this.#contentElements.forEach((content) => {
|
|
@@ -258,27 +264,17 @@ var Disclosure = class _Disclosure {
|
|
|
258
264
|
await Promise.allSettled(promises);
|
|
259
265
|
}
|
|
260
266
|
};
|
|
261
|
-
function createBinding(details, summary, content) {
|
|
262
|
-
return { details, summary, content, animation: null };
|
|
263
|
-
}
|
|
264
|
-
function isFocusable(element) {
|
|
265
|
-
return element.tabIndex >= 0;
|
|
266
|
-
}
|
|
267
267
|
function waitAnimationFinish(animation) {
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
return new Promise(
|
|
272
|
-
(resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
|
|
273
|
-
);
|
|
274
|
-
}
|
|
268
|
+
return ["idle", "finished"].includes(animation.playState) ? Promise.resolve() : new Promise(
|
|
269
|
+
(resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
|
|
270
|
+
);
|
|
275
271
|
}
|
|
276
272
|
/**
|
|
277
273
|
* Disclosure
|
|
278
274
|
* WAI-ARIA compliant disclosure pattern implementation in TypeScript.
|
|
279
275
|
* Using the <details> and <summary> element.
|
|
280
276
|
*
|
|
281
|
-
* @version 1.3.
|
|
277
|
+
* @version 1.3.19
|
|
282
278
|
* @author Yusuke Kamiyamane
|
|
283
279
|
* @license MIT
|
|
284
280
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -65,7 +65,7 @@ var Disclosure = class _Disclosure {
|
|
|
65
65
|
const summary = this.#summaryElements[i];
|
|
66
66
|
const content = this.#contentElements[i];
|
|
67
67
|
if (summary && content) {
|
|
68
|
-
const binding = createBinding(details, summary, content);
|
|
68
|
+
const binding = this.#createBinding(details, summary, content);
|
|
69
69
|
this.#bindings.set(details, binding);
|
|
70
70
|
this.#bindings.set(summary, binding);
|
|
71
71
|
this.#bindings.set(content, binding);
|
|
@@ -99,7 +99,7 @@ var Disclosure = class _Disclosure {
|
|
|
99
99
|
!force && await this.#waitAnimationsFinish();
|
|
100
100
|
this.#contentElements.forEach((content) => {
|
|
101
101
|
force && this.#bindings.get(content)?.animation?.finish();
|
|
102
|
-
this.#
|
|
102
|
+
this.#onContentAnimationFinish(content);
|
|
103
103
|
});
|
|
104
104
|
this.#animationController?.abort();
|
|
105
105
|
this.#animationController = null;
|
|
@@ -145,7 +145,7 @@ var Disclosure = class _Disclosure {
|
|
|
145
145
|
if (!summary) {
|
|
146
146
|
return;
|
|
147
147
|
}
|
|
148
|
-
if (!isFocusable(summary)) {
|
|
148
|
+
if (!this.#isFocusable(summary)) {
|
|
149
149
|
summary.setAttribute("aria-disabled", "true");
|
|
150
150
|
summary.setAttribute("tabindex", "-1");
|
|
151
151
|
summary.style.setProperty("pointer-events", "none");
|
|
@@ -173,6 +173,24 @@ var Disclosure = class _Disclosure {
|
|
|
173
173
|
const { details } = binding;
|
|
174
174
|
this.#toggle(details, !details.hasAttribute("data-disclosure-open"));
|
|
175
175
|
};
|
|
176
|
+
#onContentAnimationFinish(content) {
|
|
177
|
+
const binding = this.#bindings.get(content);
|
|
178
|
+
if (!binding) {
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
const details = binding.details;
|
|
182
|
+
if (!details) {
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
const name = details.getAttribute("data-disclosure-name");
|
|
186
|
+
name && details.setAttribute("name", name);
|
|
187
|
+
if (!details.hasAttribute("data-disclosure-open")) {
|
|
188
|
+
details.open = false;
|
|
189
|
+
}
|
|
190
|
+
["block-size", "overflow"].forEach((name2) => {
|
|
191
|
+
content.style.removeProperty(name2);
|
|
192
|
+
});
|
|
193
|
+
}
|
|
176
194
|
#toggle(details, isOpen) {
|
|
177
195
|
if (details.hasAttribute("data-disclosure-open") === isOpen) {
|
|
178
196
|
return;
|
|
@@ -180,10 +198,10 @@ var Disclosure = class _Disclosure {
|
|
|
180
198
|
const name = details.getAttribute("data-disclosure-name");
|
|
181
199
|
if (name && isOpen) {
|
|
182
200
|
details.removeAttribute("name");
|
|
183
|
-
const
|
|
201
|
+
const open = this.#detailsElements.find(
|
|
184
202
|
(d) => d.hasAttribute("data-disclosure-open") && d.getAttribute("data-disclosure-name") === name
|
|
185
203
|
);
|
|
186
|
-
|
|
204
|
+
open && this.close(open);
|
|
187
205
|
}
|
|
188
206
|
const binding = this.#bindings.get(details);
|
|
189
207
|
if (!binding) {
|
|
@@ -217,36 +235,24 @@ var Disclosure = class _Disclosure {
|
|
|
217
235
|
"finish",
|
|
218
236
|
() => {
|
|
219
237
|
if (binding?.animation === animation) {
|
|
220
|
-
this.#
|
|
238
|
+
this.#onContentAnimationFinish(content);
|
|
221
239
|
cleanup();
|
|
222
240
|
}
|
|
223
241
|
},
|
|
224
242
|
{ once: true, signal }
|
|
225
243
|
);
|
|
226
244
|
}
|
|
245
|
+
#createBinding(details, summary, content) {
|
|
246
|
+
return { details, summary, content, animation: null };
|
|
247
|
+
}
|
|
248
|
+
#isFocusable(element) {
|
|
249
|
+
return element.tabIndex >= 0;
|
|
250
|
+
}
|
|
227
251
|
#mergeOptions(target, source) {
|
|
228
252
|
return {
|
|
229
253
|
animation: { ...target.animation, ...source.animation ?? {} }
|
|
230
254
|
};
|
|
231
255
|
}
|
|
232
|
-
#onAnimationFinish(content) {
|
|
233
|
-
const binding = this.#bindings.get(content);
|
|
234
|
-
if (!binding) {
|
|
235
|
-
return;
|
|
236
|
-
}
|
|
237
|
-
const details = binding.details;
|
|
238
|
-
if (!details) {
|
|
239
|
-
return;
|
|
240
|
-
}
|
|
241
|
-
const name = details.getAttribute("data-disclosure-name");
|
|
242
|
-
name && details.setAttribute("name", name);
|
|
243
|
-
if (!details.hasAttribute("data-disclosure-open")) {
|
|
244
|
-
details.open = false;
|
|
245
|
-
}
|
|
246
|
-
["block-size", "overflow"].forEach((name2) => {
|
|
247
|
-
content.style.removeProperty(name2);
|
|
248
|
-
});
|
|
249
|
-
}
|
|
250
256
|
async #waitAnimationsFinish() {
|
|
251
257
|
const promises = [];
|
|
252
258
|
this.#contentElements.forEach((content) => {
|
|
@@ -256,27 +262,17 @@ var Disclosure = class _Disclosure {
|
|
|
256
262
|
await Promise.allSettled(promises);
|
|
257
263
|
}
|
|
258
264
|
};
|
|
259
|
-
function createBinding(details, summary, content) {
|
|
260
|
-
return { details, summary, content, animation: null };
|
|
261
|
-
}
|
|
262
|
-
function isFocusable(element) {
|
|
263
|
-
return element.tabIndex >= 0;
|
|
264
|
-
}
|
|
265
265
|
function waitAnimationFinish(animation) {
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
return new Promise(
|
|
270
|
-
(resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
|
|
271
|
-
);
|
|
272
|
-
}
|
|
266
|
+
return ["idle", "finished"].includes(animation.playState) ? Promise.resolve() : new Promise(
|
|
267
|
+
(resolve) => animation.addEventListener("finish", () => resolve(), { once: true })
|
|
268
|
+
);
|
|
273
269
|
}
|
|
274
270
|
/**
|
|
275
271
|
* Disclosure
|
|
276
272
|
* WAI-ARIA compliant disclosure pattern implementation in TypeScript.
|
|
277
273
|
* Using the <details> and <summary> element.
|
|
278
274
|
*
|
|
279
|
-
* @version 1.3.
|
|
275
|
+
* @version 1.3.19
|
|
280
276
|
* @author Yusuke Kamiyamane
|
|
281
277
|
* @license MIT
|
|
282
278
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@y14e/disclosure",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.19",
|
|
4
4
|
"description": "WAI-ARIA compliant disclosure pattern implementation in TypeScript",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -53,6 +53,6 @@
|
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@y14e/attributes-utils": "^1.1.2",
|
|
56
|
-
"@y14e/roving-tabindex": "^3.
|
|
56
|
+
"@y14e/roving-tabindex": "^3.1.2"
|
|
57
57
|
}
|
|
58
58
|
}
|