@y14e/accordion 2.0.15 → 2.1.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 +3 -3
- package/dist/index.bundle.cjs +40 -56
- package/dist/index.bundle.js +40 -56
- package/dist/index.cjs +8 -35
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +8 -15
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -13,11 +13,11 @@ npm i @y14e/accordion
|
|
|
13
13
|
import { Accordion } from '@y14e/accordion';
|
|
14
14
|
|
|
15
15
|
// CDNs
|
|
16
|
-
import { Accordion } from 'https://esm.sh/@y14e/accordion@2.0.
|
|
16
|
+
import { Accordion } from 'https://esm.sh/@y14e/accordion@2.0.17';
|
|
17
17
|
// or
|
|
18
|
-
import { Accordion } from 'https://cdn.jsdelivr.net/npm/@y14e/accordion@2.0.
|
|
18
|
+
import { Accordion } from 'https://cdn.jsdelivr.net/npm/@y14e/accordion@2.0.17/+esm';
|
|
19
19
|
// or
|
|
20
|
-
import { Accordion } from 'https://esm.unpkg.com/@y14e/accordion@2.0.
|
|
20
|
+
import { Accordion } from 'https://esm.unpkg.com/@y14e/accordion@2.0.17';
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## Usage
|
package/dist/index.bundle.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
// node_modules/@y14e/attribute-utils/dist/index.js
|
|
4
|
-
var DEFAULT_PARSER = (
|
|
5
|
-
var DEFAULT_SERIALIZER = (
|
|
4
|
+
var DEFAULT_PARSER = (v) => v.split(/\s+/);
|
|
5
|
+
var DEFAULT_SERIALIZER = (t) => t.join(" ");
|
|
6
6
|
function addAttributeToken(element, name, token, options = {}) {
|
|
7
7
|
if (!isValid(element, name, token)) {
|
|
8
8
|
return;
|
|
@@ -12,7 +12,7 @@ function addAttributeToken(element, name, token, options = {}) {
|
|
|
12
12
|
const tokens = value ? parse(value).filter(Boolean) : [];
|
|
13
13
|
if (caseInsensitive) {
|
|
14
14
|
const lower = token.toLowerCase();
|
|
15
|
-
if (tokens.every((
|
|
15
|
+
if (tokens.every((t) => t.toLowerCase() !== lower)) {
|
|
16
16
|
tokens.push(token);
|
|
17
17
|
element.setAttribute(name, serialize(tokens));
|
|
18
18
|
}
|
|
@@ -115,11 +115,11 @@ function getFocusables(container = document.body, options = {}) {
|
|
|
115
115
|
skipNegativeTabIndexCheck,
|
|
116
116
|
skipVisibilityCheck
|
|
117
117
|
}) || include?.(node)) {
|
|
118
|
-
candidates
|
|
118
|
+
candidates.push(node);
|
|
119
119
|
}
|
|
120
|
-
(composed ? getComposedChildren(node) :
|
|
120
|
+
(composed ? getComposedChildren(node) : [...node.children]).map(traverse2);
|
|
121
121
|
};
|
|
122
|
-
(composed ? getComposedChildren(container) :
|
|
122
|
+
(composed ? getComposedChildren(container) : [...container.children]).map(
|
|
123
123
|
traverse2
|
|
124
124
|
);
|
|
125
125
|
} else {
|
|
@@ -207,31 +207,31 @@ function normalizeRadioGroup(elements) {
|
|
|
207
207
|
map = /* @__PURE__ */ new Map();
|
|
208
208
|
}
|
|
209
209
|
const root = element.getRootNode();
|
|
210
|
-
let
|
|
211
|
-
if (!
|
|
212
|
-
|
|
213
|
-
map.set(root,
|
|
214
|
-
}
|
|
215
|
-
let
|
|
216
|
-
if (!
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
}
|
|
220
|
-
let
|
|
221
|
-
if (!
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
}
|
|
225
|
-
|
|
210
|
+
let groups = map.get(root);
|
|
211
|
+
if (!groups) {
|
|
212
|
+
groups = /* @__PURE__ */ new Map();
|
|
213
|
+
map.set(root, groups);
|
|
214
|
+
}
|
|
215
|
+
let group = groups.get(element.form);
|
|
216
|
+
if (!group) {
|
|
217
|
+
group = /* @__PURE__ */ new Map();
|
|
218
|
+
groups.set(element.form, group);
|
|
219
|
+
}
|
|
220
|
+
let radios = group.get(element.name);
|
|
221
|
+
if (!radios) {
|
|
222
|
+
radios = [];
|
|
223
|
+
group.set(element.name, radios);
|
|
224
|
+
}
|
|
225
|
+
radios.push(element);
|
|
226
226
|
}
|
|
227
227
|
if (!map) {
|
|
228
228
|
return elements;
|
|
229
229
|
}
|
|
230
230
|
const placeholder = /* @__PURE__ */ new Set();
|
|
231
|
-
for (const
|
|
232
|
-
for (const
|
|
233
|
-
for (const
|
|
234
|
-
const radio =
|
|
231
|
+
for (const groups of map.values()) {
|
|
232
|
+
for (const group of groups.values()) {
|
|
233
|
+
for (const radios of group.values()) {
|
|
234
|
+
const radio = radios.find((r) => r.checked) ?? radios[0];
|
|
235
235
|
radio && placeholder.add(radio);
|
|
236
236
|
}
|
|
237
237
|
}
|
|
@@ -253,7 +253,7 @@ function sortByTabIndex(elements) {
|
|
|
253
253
|
}
|
|
254
254
|
function getComposedChildren(node) {
|
|
255
255
|
if (node instanceof ShadowRoot) {
|
|
256
|
-
return
|
|
256
|
+
return [...node.children];
|
|
257
257
|
}
|
|
258
258
|
if (!(node instanceof Element)) {
|
|
259
259
|
return [];
|
|
@@ -265,9 +265,9 @@ function getComposedChildren(node) {
|
|
|
265
265
|
}
|
|
266
266
|
}
|
|
267
267
|
if (node instanceof HTMLElement && node.shadowRoot?.mode === "open") {
|
|
268
|
-
return
|
|
268
|
+
return [...node.shadowRoot.children];
|
|
269
269
|
}
|
|
270
|
-
return
|
|
270
|
+
return [...node.children];
|
|
271
271
|
}
|
|
272
272
|
function focusElement(element) {
|
|
273
273
|
"focus" in element && typeof element.focus === "function" && element.focus();
|
|
@@ -279,13 +279,6 @@ function getActiveElement() {
|
|
|
279
279
|
}
|
|
280
280
|
return current;
|
|
281
281
|
}
|
|
282
|
-
function getChildren(node) {
|
|
283
|
-
const elements = [];
|
|
284
|
-
for (let child = node.firstElementChild; child; child = child.nextElementSibling) {
|
|
285
|
-
elements[elements.length] = child;
|
|
286
|
-
}
|
|
287
|
-
return elements;
|
|
288
|
-
}
|
|
289
282
|
function getTabIndex(element) {
|
|
290
283
|
return "tabIndex" in element ? Number(element.tabIndex) : 0;
|
|
291
284
|
}
|
|
@@ -492,7 +485,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
492
485
|
}
|
|
493
486
|
}
|
|
494
487
|
const candidates = this.#getFocusables().filter(
|
|
495
|
-
(
|
|
488
|
+
(f) => this.#focusables.has(f)
|
|
496
489
|
);
|
|
497
490
|
const active = getActiveElement();
|
|
498
491
|
if (!(active instanceof Element)) {
|
|
@@ -529,11 +522,9 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
529
522
|
const focusablesByFirstChar = new Set(
|
|
530
523
|
this.#focusablesByFirstChar.get(key.toUpperCase()) ?? []
|
|
531
524
|
);
|
|
532
|
-
focusables = candidates.filter(
|
|
533
|
-
(candidate) => focusablesByFirstChar.has(candidate)
|
|
534
|
-
);
|
|
525
|
+
focusables = candidates.filter((c) => focusablesByFirstChar.has(c));
|
|
535
526
|
const afterIndex = focusables.findIndex(
|
|
536
|
-
(
|
|
527
|
+
(f) => candidates.indexOf(f) > activeIndex
|
|
537
528
|
);
|
|
538
529
|
newIndex = afterIndex >= 0 ? afterIndex : 0;
|
|
539
530
|
}
|
|
@@ -577,7 +568,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
577
568
|
const char = focusable.textContent?.trim()?.at(0)?.toUpperCase();
|
|
578
569
|
const value = focusable.ariaKeyShortcuts?.trim();
|
|
579
570
|
const keys = new Set(
|
|
580
|
-
value ? value.split(/\s+/).filter((
|
|
571
|
+
value ? value.split(/\s+/).filter((k) => /^\S$/i.test(k)).map((k) => k.toUpperCase()) : []
|
|
581
572
|
);
|
|
582
573
|
if (char) {
|
|
583
574
|
keys.add(char);
|
|
@@ -768,10 +759,7 @@ var Accordion = class _Accordion {
|
|
|
768
759
|
}
|
|
769
760
|
this.#animationController?.abort();
|
|
770
761
|
this.#animationController = null;
|
|
771
|
-
restoreAttributes([
|
|
772
|
-
...this.#triggerElements,
|
|
773
|
-
...this.#contentElements
|
|
774
|
-
]);
|
|
762
|
+
restoreAttributes([...this.#triggerElements, ...this.#contentElements]);
|
|
775
763
|
this.#triggerElements.length = 0;
|
|
776
764
|
this.#contentElements.length = 0;
|
|
777
765
|
this.#rootElement.removeAttribute("data-accordion-initialized");
|
|
@@ -794,11 +782,7 @@ var Accordion = class _Accordion {
|
|
|
794
782
|
"style",
|
|
795
783
|
"tabindex"
|
|
796
784
|
]);
|
|
797
|
-
saveAttributes(this.#contentElements, [
|
|
798
|
-
"aria-labelledby",
|
|
799
|
-
"id",
|
|
800
|
-
"role"
|
|
801
|
-
]);
|
|
785
|
+
saveAttributes(this.#contentElements, ["aria-labelledby", "id", "role"]);
|
|
802
786
|
this.#eventController = new AbortController();
|
|
803
787
|
const { signal } = this.#eventController;
|
|
804
788
|
this.#triggerElements.forEach((trigger2, i) => {
|
|
@@ -869,7 +853,7 @@ var Accordion = class _Accordion {
|
|
|
869
853
|
if (trigger.ariaExpanded === String(isExpand)) {
|
|
870
854
|
return;
|
|
871
855
|
}
|
|
872
|
-
if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#triggerElements.filter((
|
|
856
|
+
if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#triggerElements.filter((t) => t.ariaExpanded === "true").length <= 1) {
|
|
873
857
|
return;
|
|
874
858
|
}
|
|
875
859
|
const name = trigger.getAttribute("data-accordion-name");
|
|
@@ -995,7 +979,7 @@ function waitAnimationFinish(animation) {
|
|
|
995
979
|
* Accordion
|
|
996
980
|
* WAI-ARIA compliant accordion pattern implementation in TypeScript.
|
|
997
981
|
*
|
|
998
|
-
* @version 2.0
|
|
982
|
+
* @version 2.1.0
|
|
999
983
|
* @author Yusuke Kamiyamane
|
|
1000
984
|
* @license MIT
|
|
1001
985
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1007,7 +991,7 @@ function waitAnimationFinish(animation) {
|
|
|
1007
991
|
(**
|
|
1008
992
|
* Attribute Utils
|
|
1009
993
|
*
|
|
1010
|
-
* @version 2.0.
|
|
994
|
+
* @version 2.0.12
|
|
1011
995
|
* @author Yusuke Kamiyamane
|
|
1012
996
|
* @license MIT
|
|
1013
997
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1020,7 +1004,7 @@ power-focusable/dist/index.js:
|
|
|
1020
1004
|
* High-precision focus management utility with full composed tree support.
|
|
1021
1005
|
* Handles complex focus rules including tabindex ordering, radio groups, inert.
|
|
1022
1006
|
*
|
|
1023
|
-
* @version 4.3.
|
|
1007
|
+
* @version 4.3.33
|
|
1024
1008
|
* @author Yusuke Kamiyamane
|
|
1025
1009
|
* @license MIT
|
|
1026
1010
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1044,7 +1028,7 @@ power-focusable/dist/index.js:
|
|
|
1044
1028
|
* Lightweight roving tabindex utility with fully focus management.
|
|
1045
1029
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
1046
1030
|
*
|
|
1047
|
-
* @version 3.1.
|
|
1031
|
+
* @version 3.1.31
|
|
1048
1032
|
* @author Yusuke Kamiyamane
|
|
1049
1033
|
* @license MIT
|
|
1050
1034
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.bundle.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// node_modules/@y14e/attribute-utils/dist/index.js
|
|
2
|
-
var DEFAULT_PARSER = (
|
|
3
|
-
var DEFAULT_SERIALIZER = (
|
|
2
|
+
var DEFAULT_PARSER = (v) => v.split(/\s+/);
|
|
3
|
+
var DEFAULT_SERIALIZER = (t) => t.join(" ");
|
|
4
4
|
function addAttributeToken(element, name, token, options = {}) {
|
|
5
5
|
if (!isValid(element, name, token)) {
|
|
6
6
|
return;
|
|
@@ -10,7 +10,7 @@ function addAttributeToken(element, name, token, options = {}) {
|
|
|
10
10
|
const tokens = value ? parse(value).filter(Boolean) : [];
|
|
11
11
|
if (caseInsensitive) {
|
|
12
12
|
const lower = token.toLowerCase();
|
|
13
|
-
if (tokens.every((
|
|
13
|
+
if (tokens.every((t) => t.toLowerCase() !== lower)) {
|
|
14
14
|
tokens.push(token);
|
|
15
15
|
element.setAttribute(name, serialize(tokens));
|
|
16
16
|
}
|
|
@@ -113,11 +113,11 @@ function getFocusables(container = document.body, options = {}) {
|
|
|
113
113
|
skipNegativeTabIndexCheck,
|
|
114
114
|
skipVisibilityCheck
|
|
115
115
|
}) || include?.(node)) {
|
|
116
|
-
candidates
|
|
116
|
+
candidates.push(node);
|
|
117
117
|
}
|
|
118
|
-
(composed ? getComposedChildren(node) :
|
|
118
|
+
(composed ? getComposedChildren(node) : [...node.children]).map(traverse2);
|
|
119
119
|
};
|
|
120
|
-
(composed ? getComposedChildren(container) :
|
|
120
|
+
(composed ? getComposedChildren(container) : [...container.children]).map(
|
|
121
121
|
traverse2
|
|
122
122
|
);
|
|
123
123
|
} else {
|
|
@@ -205,31 +205,31 @@ function normalizeRadioGroup(elements) {
|
|
|
205
205
|
map = /* @__PURE__ */ new Map();
|
|
206
206
|
}
|
|
207
207
|
const root = element.getRootNode();
|
|
208
|
-
let
|
|
209
|
-
if (!
|
|
210
|
-
|
|
211
|
-
map.set(root,
|
|
212
|
-
}
|
|
213
|
-
let
|
|
214
|
-
if (!
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
}
|
|
218
|
-
let
|
|
219
|
-
if (!
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
}
|
|
223
|
-
|
|
208
|
+
let groups = map.get(root);
|
|
209
|
+
if (!groups) {
|
|
210
|
+
groups = /* @__PURE__ */ new Map();
|
|
211
|
+
map.set(root, groups);
|
|
212
|
+
}
|
|
213
|
+
let group = groups.get(element.form);
|
|
214
|
+
if (!group) {
|
|
215
|
+
group = /* @__PURE__ */ new Map();
|
|
216
|
+
groups.set(element.form, group);
|
|
217
|
+
}
|
|
218
|
+
let radios = group.get(element.name);
|
|
219
|
+
if (!radios) {
|
|
220
|
+
radios = [];
|
|
221
|
+
group.set(element.name, radios);
|
|
222
|
+
}
|
|
223
|
+
radios.push(element);
|
|
224
224
|
}
|
|
225
225
|
if (!map) {
|
|
226
226
|
return elements;
|
|
227
227
|
}
|
|
228
228
|
const placeholder = /* @__PURE__ */ new Set();
|
|
229
|
-
for (const
|
|
230
|
-
for (const
|
|
231
|
-
for (const
|
|
232
|
-
const radio =
|
|
229
|
+
for (const groups of map.values()) {
|
|
230
|
+
for (const group of groups.values()) {
|
|
231
|
+
for (const radios of group.values()) {
|
|
232
|
+
const radio = radios.find((r) => r.checked) ?? radios[0];
|
|
233
233
|
radio && placeholder.add(radio);
|
|
234
234
|
}
|
|
235
235
|
}
|
|
@@ -251,7 +251,7 @@ function sortByTabIndex(elements) {
|
|
|
251
251
|
}
|
|
252
252
|
function getComposedChildren(node) {
|
|
253
253
|
if (node instanceof ShadowRoot) {
|
|
254
|
-
return
|
|
254
|
+
return [...node.children];
|
|
255
255
|
}
|
|
256
256
|
if (!(node instanceof Element)) {
|
|
257
257
|
return [];
|
|
@@ -263,9 +263,9 @@ function getComposedChildren(node) {
|
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
265
|
if (node instanceof HTMLElement && node.shadowRoot?.mode === "open") {
|
|
266
|
-
return
|
|
266
|
+
return [...node.shadowRoot.children];
|
|
267
267
|
}
|
|
268
|
-
return
|
|
268
|
+
return [...node.children];
|
|
269
269
|
}
|
|
270
270
|
function focusElement(element) {
|
|
271
271
|
"focus" in element && typeof element.focus === "function" && element.focus();
|
|
@@ -277,13 +277,6 @@ function getActiveElement() {
|
|
|
277
277
|
}
|
|
278
278
|
return current;
|
|
279
279
|
}
|
|
280
|
-
function getChildren(node) {
|
|
281
|
-
const elements = [];
|
|
282
|
-
for (let child = node.firstElementChild; child; child = child.nextElementSibling) {
|
|
283
|
-
elements[elements.length] = child;
|
|
284
|
-
}
|
|
285
|
-
return elements;
|
|
286
|
-
}
|
|
287
280
|
function getTabIndex(element) {
|
|
288
281
|
return "tabIndex" in element ? Number(element.tabIndex) : 0;
|
|
289
282
|
}
|
|
@@ -490,7 +483,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
490
483
|
}
|
|
491
484
|
}
|
|
492
485
|
const candidates = this.#getFocusables().filter(
|
|
493
|
-
(
|
|
486
|
+
(f) => this.#focusables.has(f)
|
|
494
487
|
);
|
|
495
488
|
const active = getActiveElement();
|
|
496
489
|
if (!(active instanceof Element)) {
|
|
@@ -527,11 +520,9 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
527
520
|
const focusablesByFirstChar = new Set(
|
|
528
521
|
this.#focusablesByFirstChar.get(key.toUpperCase()) ?? []
|
|
529
522
|
);
|
|
530
|
-
focusables = candidates.filter(
|
|
531
|
-
(candidate) => focusablesByFirstChar.has(candidate)
|
|
532
|
-
);
|
|
523
|
+
focusables = candidates.filter((c) => focusablesByFirstChar.has(c));
|
|
533
524
|
const afterIndex = focusables.findIndex(
|
|
534
|
-
(
|
|
525
|
+
(f) => candidates.indexOf(f) > activeIndex
|
|
535
526
|
);
|
|
536
527
|
newIndex = afterIndex >= 0 ? afterIndex : 0;
|
|
537
528
|
}
|
|
@@ -575,7 +566,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
575
566
|
const char = focusable.textContent?.trim()?.at(0)?.toUpperCase();
|
|
576
567
|
const value = focusable.ariaKeyShortcuts?.trim();
|
|
577
568
|
const keys = new Set(
|
|
578
|
-
value ? value.split(/\s+/).filter((
|
|
569
|
+
value ? value.split(/\s+/).filter((k) => /^\S$/i.test(k)).map((k) => k.toUpperCase()) : []
|
|
579
570
|
);
|
|
580
571
|
if (char) {
|
|
581
572
|
keys.add(char);
|
|
@@ -766,10 +757,7 @@ var Accordion = class _Accordion {
|
|
|
766
757
|
}
|
|
767
758
|
this.#animationController?.abort();
|
|
768
759
|
this.#animationController = null;
|
|
769
|
-
restoreAttributes([
|
|
770
|
-
...this.#triggerElements,
|
|
771
|
-
...this.#contentElements
|
|
772
|
-
]);
|
|
760
|
+
restoreAttributes([...this.#triggerElements, ...this.#contentElements]);
|
|
773
761
|
this.#triggerElements.length = 0;
|
|
774
762
|
this.#contentElements.length = 0;
|
|
775
763
|
this.#rootElement.removeAttribute("data-accordion-initialized");
|
|
@@ -792,11 +780,7 @@ var Accordion = class _Accordion {
|
|
|
792
780
|
"style",
|
|
793
781
|
"tabindex"
|
|
794
782
|
]);
|
|
795
|
-
saveAttributes(this.#contentElements, [
|
|
796
|
-
"aria-labelledby",
|
|
797
|
-
"id",
|
|
798
|
-
"role"
|
|
799
|
-
]);
|
|
783
|
+
saveAttributes(this.#contentElements, ["aria-labelledby", "id", "role"]);
|
|
800
784
|
this.#eventController = new AbortController();
|
|
801
785
|
const { signal } = this.#eventController;
|
|
802
786
|
this.#triggerElements.forEach((trigger2, i) => {
|
|
@@ -867,7 +851,7 @@ var Accordion = class _Accordion {
|
|
|
867
851
|
if (trigger.ariaExpanded === String(isExpand)) {
|
|
868
852
|
return;
|
|
869
853
|
}
|
|
870
|
-
if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#triggerElements.filter((
|
|
854
|
+
if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#triggerElements.filter((t) => t.ariaExpanded === "true").length <= 1) {
|
|
871
855
|
return;
|
|
872
856
|
}
|
|
873
857
|
const name = trigger.getAttribute("data-accordion-name");
|
|
@@ -993,7 +977,7 @@ function waitAnimationFinish(animation) {
|
|
|
993
977
|
* Accordion
|
|
994
978
|
* WAI-ARIA compliant accordion pattern implementation in TypeScript.
|
|
995
979
|
*
|
|
996
|
-
* @version 2.0
|
|
980
|
+
* @version 2.1.0
|
|
997
981
|
* @author Yusuke Kamiyamane
|
|
998
982
|
* @license MIT
|
|
999
983
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1005,7 +989,7 @@ function waitAnimationFinish(animation) {
|
|
|
1005
989
|
(**
|
|
1006
990
|
* Attribute Utils
|
|
1007
991
|
*
|
|
1008
|
-
* @version 2.0.
|
|
992
|
+
* @version 2.0.12
|
|
1009
993
|
* @author Yusuke Kamiyamane
|
|
1010
994
|
* @license MIT
|
|
1011
995
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1018,7 +1002,7 @@ power-focusable/dist/index.js:
|
|
|
1018
1002
|
* High-precision focus management utility with full composed tree support.
|
|
1019
1003
|
* Handles complex focus rules including tabindex ordering, radio groups, inert.
|
|
1020
1004
|
*
|
|
1021
|
-
* @version 4.3.
|
|
1005
|
+
* @version 4.3.33
|
|
1022
1006
|
* @author Yusuke Kamiyamane
|
|
1023
1007
|
* @license MIT
|
|
1024
1008
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1042,7 +1026,7 @@ power-focusable/dist/index.js:
|
|
|
1042
1026
|
* Lightweight roving tabindex utility with fully focus management.
|
|
1043
1027
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
1044
1028
|
*
|
|
1045
|
-
* @version 3.1.
|
|
1029
|
+
* @version 3.1.31
|
|
1046
1030
|
* @author Yusuke Kamiyamane
|
|
1047
1031
|
* @license MIT
|
|
1048
1032
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.cjs
CHANGED
|
@@ -1,29 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var attributeUtils = require('@y14e/attribute-utils');
|
|
4
4
|
var button = require('@y14e/button');
|
|
5
5
|
var rovingTabindex = require('@y14e/roving-tabindex');
|
|
6
6
|
|
|
7
|
-
function _interopNamespace(e) {
|
|
8
|
-
if (e && e.__esModule) return e;
|
|
9
|
-
var n = Object.create(null);
|
|
10
|
-
if (e) {
|
|
11
|
-
Object.keys(e).forEach(function (k) {
|
|
12
|
-
if (k !== 'default') {
|
|
13
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
-
enumerable: true,
|
|
16
|
-
get: function () { return e[k]; }
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
n.default = e;
|
|
22
|
-
return Object.freeze(n);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
var utils__namespace = /*#__PURE__*/_interopNamespace(utils);
|
|
26
|
-
|
|
27
7
|
// src/index.ts
|
|
28
8
|
var Accordion = class _Accordion {
|
|
29
9
|
static defaults = {};
|
|
@@ -121,10 +101,7 @@ var Accordion = class _Accordion {
|
|
|
121
101
|
}
|
|
122
102
|
this.#animationController?.abort();
|
|
123
103
|
this.#animationController = null;
|
|
124
|
-
|
|
125
|
-
...this.#triggerElements,
|
|
126
|
-
...this.#contentElements
|
|
127
|
-
]);
|
|
104
|
+
attributeUtils.restoreAttributes([...this.#triggerElements, ...this.#contentElements]);
|
|
128
105
|
this.#triggerElements.length = 0;
|
|
129
106
|
this.#contentElements.length = 0;
|
|
130
107
|
this.#rootElement.removeAttribute("data-accordion-initialized");
|
|
@@ -140,18 +117,14 @@ var Accordion = class _Accordion {
|
|
|
140
117
|
this.#toggle(trigger, true);
|
|
141
118
|
}
|
|
142
119
|
#initialize() {
|
|
143
|
-
|
|
120
|
+
attributeUtils.saveAttributes(this.#triggerElements, [
|
|
144
121
|
"aria-controls",
|
|
145
122
|
"aria-disabled",
|
|
146
123
|
"id",
|
|
147
124
|
"style",
|
|
148
125
|
"tabindex"
|
|
149
126
|
]);
|
|
150
|
-
|
|
151
|
-
"aria-labelledby",
|
|
152
|
-
"id",
|
|
153
|
-
"role"
|
|
154
|
-
]);
|
|
127
|
+
attributeUtils.saveAttributes(this.#contentElements, ["aria-labelledby", "id", "role"]);
|
|
155
128
|
this.#eventController = new AbortController();
|
|
156
129
|
const { signal } = this.#eventController;
|
|
157
130
|
this.#triggerElements.forEach((trigger2, i) => {
|
|
@@ -161,7 +134,7 @@ var Accordion = class _Accordion {
|
|
|
161
134
|
return;
|
|
162
135
|
}
|
|
163
136
|
content2.id ||= `accordion-content-${id}`;
|
|
164
|
-
|
|
137
|
+
attributeUtils.addAttributeToken(trigger2, "aria-controls", content2.id);
|
|
165
138
|
trigger2.setAttribute(
|
|
166
139
|
"aria-expanded",
|
|
167
140
|
String(trigger2.ariaExpanded === "true")
|
|
@@ -173,7 +146,7 @@ var Accordion = class _Accordion {
|
|
|
173
146
|
trigger2.style.setProperty("pointer-events", "none");
|
|
174
147
|
}
|
|
175
148
|
trigger2.addEventListener("click", this.#onTriggerClick, { signal });
|
|
176
|
-
|
|
149
|
+
attributeUtils.addAttributeToken(content2, "aria-labelledby", trigger2.id);
|
|
177
150
|
content2.setAttribute("role", "region");
|
|
178
151
|
content2.addEventListener("beforematch", this.#onContentBeforeMatch, {
|
|
179
152
|
signal
|
|
@@ -222,7 +195,7 @@ var Accordion = class _Accordion {
|
|
|
222
195
|
if (trigger.ariaExpanded === String(isExpand)) {
|
|
223
196
|
return;
|
|
224
197
|
}
|
|
225
|
-
if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#triggerElements.filter((
|
|
198
|
+
if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#triggerElements.filter((t) => t.ariaExpanded === "true").length <= 1) {
|
|
226
199
|
return;
|
|
227
200
|
}
|
|
228
201
|
const name = trigger.getAttribute("data-accordion-name");
|
|
@@ -348,7 +321,7 @@ function waitAnimationFinish(animation) {
|
|
|
348
321
|
* Accordion
|
|
349
322
|
* WAI-ARIA compliant accordion pattern implementation in TypeScript.
|
|
350
323
|
*
|
|
351
|
-
* @version 2.0
|
|
324
|
+
* @version 2.1.0
|
|
352
325
|
* @author Yusuke Kamiyamane
|
|
353
326
|
* @license MIT
|
|
354
327
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { restoreAttributes, saveAttributes, addAttributeToken } from '@y14e/attribute-utils';
|
|
2
2
|
import { Button } from '@y14e/button';
|
|
3
3
|
import { createRovingTabIndex } from '@y14e/roving-tabindex';
|
|
4
4
|
|
|
@@ -99,10 +99,7 @@ var Accordion = class _Accordion {
|
|
|
99
99
|
}
|
|
100
100
|
this.#animationController?.abort();
|
|
101
101
|
this.#animationController = null;
|
|
102
|
-
|
|
103
|
-
...this.#triggerElements,
|
|
104
|
-
...this.#contentElements
|
|
105
|
-
]);
|
|
102
|
+
restoreAttributes([...this.#triggerElements, ...this.#contentElements]);
|
|
106
103
|
this.#triggerElements.length = 0;
|
|
107
104
|
this.#contentElements.length = 0;
|
|
108
105
|
this.#rootElement.removeAttribute("data-accordion-initialized");
|
|
@@ -118,18 +115,14 @@ var Accordion = class _Accordion {
|
|
|
118
115
|
this.#toggle(trigger, true);
|
|
119
116
|
}
|
|
120
117
|
#initialize() {
|
|
121
|
-
|
|
118
|
+
saveAttributes(this.#triggerElements, [
|
|
122
119
|
"aria-controls",
|
|
123
120
|
"aria-disabled",
|
|
124
121
|
"id",
|
|
125
122
|
"style",
|
|
126
123
|
"tabindex"
|
|
127
124
|
]);
|
|
128
|
-
|
|
129
|
-
"aria-labelledby",
|
|
130
|
-
"id",
|
|
131
|
-
"role"
|
|
132
|
-
]);
|
|
125
|
+
saveAttributes(this.#contentElements, ["aria-labelledby", "id", "role"]);
|
|
133
126
|
this.#eventController = new AbortController();
|
|
134
127
|
const { signal } = this.#eventController;
|
|
135
128
|
this.#triggerElements.forEach((trigger2, i) => {
|
|
@@ -139,7 +132,7 @@ var Accordion = class _Accordion {
|
|
|
139
132
|
return;
|
|
140
133
|
}
|
|
141
134
|
content2.id ||= `accordion-content-${id}`;
|
|
142
|
-
|
|
135
|
+
addAttributeToken(trigger2, "aria-controls", content2.id);
|
|
143
136
|
trigger2.setAttribute(
|
|
144
137
|
"aria-expanded",
|
|
145
138
|
String(trigger2.ariaExpanded === "true")
|
|
@@ -151,7 +144,7 @@ var Accordion = class _Accordion {
|
|
|
151
144
|
trigger2.style.setProperty("pointer-events", "none");
|
|
152
145
|
}
|
|
153
146
|
trigger2.addEventListener("click", this.#onTriggerClick, { signal });
|
|
154
|
-
|
|
147
|
+
addAttributeToken(content2, "aria-labelledby", trigger2.id);
|
|
155
148
|
content2.setAttribute("role", "region");
|
|
156
149
|
content2.addEventListener("beforematch", this.#onContentBeforeMatch, {
|
|
157
150
|
signal
|
|
@@ -200,7 +193,7 @@ var Accordion = class _Accordion {
|
|
|
200
193
|
if (trigger.ariaExpanded === String(isExpand)) {
|
|
201
194
|
return;
|
|
202
195
|
}
|
|
203
|
-
if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#triggerElements.filter((
|
|
196
|
+
if (!isExpand && !isProgrammatic && !this.#settings.collapsible && this.#triggerElements.filter((t) => t.ariaExpanded === "true").length <= 1) {
|
|
204
197
|
return;
|
|
205
198
|
}
|
|
206
199
|
const name = trigger.getAttribute("data-accordion-name");
|
|
@@ -326,7 +319,7 @@ function waitAnimationFinish(animation) {
|
|
|
326
319
|
* Accordion
|
|
327
320
|
* WAI-ARIA compliant accordion pattern implementation in TypeScript.
|
|
328
321
|
*
|
|
329
|
-
* @version 2.0
|
|
322
|
+
* @version 2.1.0
|
|
330
323
|
* @author Yusuke Kamiyamane
|
|
331
324
|
* @license MIT
|
|
332
325
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@y14e/accordion",
|
|
3
|
-
"version": "2.0
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"description": "WAI-ARIA compliant accordion pattern implementation in TypeScript",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"a11y",
|
|
@@ -54,8 +54,8 @@
|
|
|
54
54
|
"esbuild": true
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"@y14e/attribute-utils": "^2.0.
|
|
57
|
+
"@y14e/attribute-utils": "^2.0.12",
|
|
58
58
|
"@y14e/button": "^1.0.8",
|
|
59
|
-
"@y14e/roving-tabindex": "^3.1.
|
|
59
|
+
"@y14e/roving-tabindex": "^3.1.31"
|
|
60
60
|
}
|
|
61
61
|
}
|