@y14e/accordion 1.4.12 → 1.4.13
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 +73 -134
- package/dist/index.js +73 -134
- package/package.json +2 -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.13';
|
|
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.13';
|
|
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.13/+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.13';
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## Usage
|
package/dist/index.cjs
CHANGED
|
@@ -1,54 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
// node_modules/@y14e/attributes-utils/dist/index.js
|
|
4
|
-
var DEFAULT_PARSER = (value) => value.split(/\s+/);
|
|
5
|
-
var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
|
|
6
|
-
function addTokenToAttribute(element, attribute, token, options = {}) {
|
|
7
|
-
const {
|
|
8
|
-
caseInsensitive = false,
|
|
9
|
-
parse = DEFAULT_PARSER,
|
|
10
|
-
serialize = DEFAULT_SERIALIZER
|
|
11
|
-
} = options;
|
|
12
|
-
const value = element.getAttribute(attribute)?.trim();
|
|
13
|
-
const tokens = value ? parse(value).filter(Boolean) : [];
|
|
14
|
-
if (caseInsensitive) {
|
|
15
|
-
const lower = token.toLowerCase();
|
|
16
|
-
if (tokens.every((token2) => token2.toLowerCase() !== lower)) {
|
|
17
|
-
tokens.push(token);
|
|
18
|
-
element.setAttribute(attribute, serialize(tokens));
|
|
19
|
-
}
|
|
20
|
-
} else {
|
|
21
|
-
const set = new Set(tokens);
|
|
22
|
-
set.add(token);
|
|
23
|
-
element.setAttribute(attribute, serialize([...set]));
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
var snapshots = /* @__PURE__ */ new WeakMap();
|
|
27
|
-
function restoreAttributes(elements) {
|
|
28
|
-
for (const element of elements) {
|
|
29
|
-
const snapshot = snapshots.get(element);
|
|
30
|
-
if (!snapshot) {
|
|
31
|
-
continue;
|
|
32
|
-
}
|
|
33
|
-
for (const [attribute, value] of snapshot.entries()) {
|
|
34
|
-
value === null ? element.removeAttribute(attribute) : element.setAttribute(attribute, value);
|
|
35
|
-
}
|
|
36
|
-
snapshots.delete(element);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
function saveAttributes(elements, attributes) {
|
|
40
|
-
elements.forEach((element) => {
|
|
41
|
-
let snapshot = snapshots.get(element);
|
|
42
|
-
if (!snapshot) {
|
|
43
|
-
snapshot = /* @__PURE__ */ new Map();
|
|
44
|
-
snapshots.set(element, snapshot);
|
|
45
|
-
}
|
|
46
|
-
attributes.forEach((attribute) => {
|
|
47
|
-
snapshot.set(attribute, element.getAttribute(attribute));
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
|
|
52
3
|
// node_modules/@y14e/button/dist/index.js
|
|
53
4
|
var Button = class {
|
|
54
5
|
#element;
|
|
@@ -106,13 +57,13 @@ function getActiveElement() {
|
|
|
106
57
|
}
|
|
107
58
|
|
|
108
59
|
// node_modules/@y14e/roving-tabindex/dist/index.js
|
|
109
|
-
var
|
|
110
|
-
var
|
|
111
|
-
function
|
|
60
|
+
var DEFAULT_PARSER = (value) => value.split(/\s+/);
|
|
61
|
+
var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
|
|
62
|
+
function addTokenToAttribute(element, attribute, token, options = {}) {
|
|
112
63
|
const {
|
|
113
64
|
caseInsensitive = false,
|
|
114
|
-
parse =
|
|
115
|
-
serialize =
|
|
65
|
+
parse = DEFAULT_PARSER,
|
|
66
|
+
serialize = DEFAULT_SERIALIZER
|
|
116
67
|
} = options;
|
|
117
68
|
const value = element.getAttribute(attribute)?.trim();
|
|
118
69
|
const tokens = value ? parse(value).filter(Boolean) : [];
|
|
@@ -128,25 +79,25 @@ function addTokenToAttribute2(element, attribute, token, options = {}) {
|
|
|
128
79
|
element.setAttribute(attribute, serialize([...set]));
|
|
129
80
|
}
|
|
130
81
|
}
|
|
131
|
-
var
|
|
132
|
-
function
|
|
82
|
+
var snapshots = /* @__PURE__ */ new WeakMap();
|
|
83
|
+
function restoreAttributes(elements) {
|
|
133
84
|
for (const element of elements) {
|
|
134
|
-
const snapshot =
|
|
85
|
+
const snapshot = snapshots.get(element);
|
|
135
86
|
if (!snapshot) {
|
|
136
87
|
continue;
|
|
137
88
|
}
|
|
138
89
|
for (const [attribute, value] of snapshot.entries()) {
|
|
139
90
|
value === null ? element.removeAttribute(attribute) : element.setAttribute(attribute, value);
|
|
140
91
|
}
|
|
141
|
-
|
|
92
|
+
snapshots.delete(element);
|
|
142
93
|
}
|
|
143
94
|
}
|
|
144
|
-
function
|
|
95
|
+
function saveAttributes(elements, attributes) {
|
|
145
96
|
elements.forEach((element) => {
|
|
146
|
-
let snapshot =
|
|
97
|
+
let snapshot = snapshots.get(element);
|
|
147
98
|
if (!snapshot) {
|
|
148
99
|
snapshot = /* @__PURE__ */ new Map();
|
|
149
|
-
|
|
100
|
+
snapshots.set(element, snapshot);
|
|
150
101
|
}
|
|
151
102
|
attributes.forEach((attribute) => {
|
|
152
103
|
snapshot.set(attribute, element.getAttribute(attribute));
|
|
@@ -385,60 +336,12 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
385
336
|
return () => {
|
|
386
337
|
};
|
|
387
338
|
}
|
|
388
|
-
|
|
389
|
-
direction,
|
|
390
|
-
navigationOnly = false,
|
|
391
|
-
noMemory = false,
|
|
392
|
-
noStart = false,
|
|
393
|
-
selector,
|
|
394
|
-
typeahead = false,
|
|
395
|
-
wrap = false
|
|
396
|
-
} = options;
|
|
397
|
-
if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
|
|
398
|
-
console.warn("Invalid direction option. Fallback: both (undefined).");
|
|
399
|
-
direction = void 0;
|
|
400
|
-
}
|
|
401
|
-
if (typeof navigationOnly !== "boolean") {
|
|
402
|
-
console.warn("Invalid navigationOnly option. Fallback: false.");
|
|
403
|
-
navigationOnly = false;
|
|
404
|
-
}
|
|
405
|
-
if (typeof noMemory !== "boolean") {
|
|
406
|
-
console.warn("Invalid noMemory option. Fallback: false.");
|
|
407
|
-
noMemory = false;
|
|
408
|
-
}
|
|
409
|
-
if (typeof noStart !== "boolean") {
|
|
410
|
-
console.warn("Invalid noStart option. Fallback: false.");
|
|
411
|
-
noStart = false;
|
|
412
|
-
}
|
|
413
|
-
if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
|
|
414
|
-
console.warn(
|
|
415
|
-
"Invalid selector. Fallback: all focusable elements (undefined)."
|
|
416
|
-
);
|
|
417
|
-
selector = void 0;
|
|
418
|
-
}
|
|
419
|
-
if (typeof typeahead !== "boolean") {
|
|
420
|
-
console.warn("Invalid typeahead option. Fallback: false.");
|
|
421
|
-
typeahead = false;
|
|
422
|
-
}
|
|
423
|
-
if (typeof wrap !== "boolean") {
|
|
424
|
-
console.warn("Invalid wrap option. Fallback: false.");
|
|
425
|
-
wrap = false;
|
|
426
|
-
}
|
|
427
|
-
const settings = {
|
|
428
|
-
navigationOnly,
|
|
429
|
-
noMemory,
|
|
430
|
-
noStart,
|
|
431
|
-
typeahead,
|
|
432
|
-
wrap
|
|
433
|
-
};
|
|
434
|
-
direction && Object.assign(settings, { direction });
|
|
435
|
-
selector && Object.assign(settings, { selector });
|
|
436
|
-
const roving = new RovingTabIndex(container, settings);
|
|
339
|
+
const roving = new RovingTabIndex(container, options);
|
|
437
340
|
return () => roving.destroy();
|
|
438
341
|
}
|
|
439
342
|
var RovingTabIndex = class {
|
|
440
343
|
#container;
|
|
441
|
-
#
|
|
344
|
+
#settings;
|
|
442
345
|
#focusables = /* @__PURE__ */ new Set();
|
|
443
346
|
#focusablesByFirstChar = /* @__PURE__ */ new Map();
|
|
444
347
|
#selectorFilter;
|
|
@@ -446,7 +349,54 @@ var RovingTabIndex = class {
|
|
|
446
349
|
#isDestroyed = false;
|
|
447
350
|
constructor(container, options = {}) {
|
|
448
351
|
this.#container = container;
|
|
449
|
-
|
|
352
|
+
let {
|
|
353
|
+
direction,
|
|
354
|
+
navigationOnly = false,
|
|
355
|
+
noMemory = false,
|
|
356
|
+
noStart = false,
|
|
357
|
+
selector,
|
|
358
|
+
typeahead = false,
|
|
359
|
+
wrap = false
|
|
360
|
+
} = options;
|
|
361
|
+
if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
|
|
362
|
+
console.warn("Invalid direction option. Fallback: both (undefined).");
|
|
363
|
+
direction = void 0;
|
|
364
|
+
}
|
|
365
|
+
if (typeof navigationOnly !== "boolean") {
|
|
366
|
+
console.warn("Invalid navigationOnly option. Fallback: false.");
|
|
367
|
+
navigationOnly = false;
|
|
368
|
+
}
|
|
369
|
+
if (typeof noMemory !== "boolean") {
|
|
370
|
+
console.warn("Invalid noMemory option. Fallback: false.");
|
|
371
|
+
noMemory = false;
|
|
372
|
+
}
|
|
373
|
+
if (typeof noStart !== "boolean") {
|
|
374
|
+
console.warn("Invalid noStart option. Fallback: false.");
|
|
375
|
+
noStart = false;
|
|
376
|
+
}
|
|
377
|
+
if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
|
|
378
|
+
console.warn(
|
|
379
|
+
"Invalid selector. Fallback: all focusable elements (undefined)."
|
|
380
|
+
);
|
|
381
|
+
selector = void 0;
|
|
382
|
+
}
|
|
383
|
+
if (typeof typeahead !== "boolean") {
|
|
384
|
+
console.warn("Invalid typeahead option. Fallback: false.");
|
|
385
|
+
typeahead = false;
|
|
386
|
+
}
|
|
387
|
+
if (typeof wrap !== "boolean") {
|
|
388
|
+
console.warn("Invalid wrap option. Fallback: false.");
|
|
389
|
+
wrap = false;
|
|
390
|
+
}
|
|
391
|
+
this.#settings = {
|
|
392
|
+
navigationOnly,
|
|
393
|
+
noMemory,
|
|
394
|
+
noStart,
|
|
395
|
+
typeahead,
|
|
396
|
+
wrap
|
|
397
|
+
};
|
|
398
|
+
direction && Object.assign(this.#settings, { direction });
|
|
399
|
+
selector && Object.assign(this.#settings, { selector });
|
|
450
400
|
this.#selectorFilter = this.#createSelectorFilter();
|
|
451
401
|
this.#initialize();
|
|
452
402
|
}
|
|
@@ -457,7 +407,7 @@ var RovingTabIndex = class {
|
|
|
457
407
|
this.#isDestroyed = true;
|
|
458
408
|
this.#controller?.abort();
|
|
459
409
|
this.#controller = null;
|
|
460
|
-
|
|
410
|
+
restoreAttributes([...this.#focusables]);
|
|
461
411
|
this.#focusables.clear();
|
|
462
412
|
this.#focusablesByFirstChar.clear();
|
|
463
413
|
this.#container.removeAttribute("data-roving-tabindex-initialized");
|
|
@@ -482,7 +432,7 @@ var RovingTabIndex = class {
|
|
|
482
432
|
return;
|
|
483
433
|
}
|
|
484
434
|
const isFocusable22 = this.#focusables.has(target);
|
|
485
|
-
this.#
|
|
435
|
+
this.#settings.noMemory && !isFocusable22 ? this.#update(null) : isFocusable22 && this.#update(target);
|
|
486
436
|
};
|
|
487
437
|
#onKeyDown = (event) => {
|
|
488
438
|
if (!event.composedPath().includes(this.#container)) {
|
|
@@ -492,7 +442,7 @@ var RovingTabIndex = class {
|
|
|
492
442
|
if (altKey || ctrlKey || metaKey || shiftKey) {
|
|
493
443
|
return;
|
|
494
444
|
}
|
|
495
|
-
const { direction, typeahead, wrap } = this.#
|
|
445
|
+
const { direction, typeahead, wrap } = this.#settings;
|
|
496
446
|
const isBoth = !direction;
|
|
497
447
|
const isHorizontal = direction === "horizontal";
|
|
498
448
|
if (![
|
|
@@ -551,7 +501,7 @@ var RovingTabIndex = class {
|
|
|
551
501
|
const current = new Set(this.#getFocusables());
|
|
552
502
|
for (const focusable of this.#focusables) {
|
|
553
503
|
if (!current.has(focusable)) {
|
|
554
|
-
focusable.isConnected &&
|
|
504
|
+
focusable.isConnected && restoreAttributes([focusable]);
|
|
555
505
|
this.#focusables.delete(focusable);
|
|
556
506
|
this.#focusablesByFirstChar.forEach((focusables) => {
|
|
557
507
|
const index = focusables.indexOf(focusable);
|
|
@@ -559,14 +509,14 @@ var RovingTabIndex = class {
|
|
|
559
509
|
});
|
|
560
510
|
}
|
|
561
511
|
}
|
|
562
|
-
const { navigationOnly, noStart, typeahead } = this.#
|
|
512
|
+
const { navigationOnly, noStart, typeahead } = this.#settings;
|
|
563
513
|
for (const focusable of current) {
|
|
564
514
|
if (this.#focusables.has(focusable)) {
|
|
565
515
|
continue;
|
|
566
516
|
}
|
|
567
517
|
this.#focusables.add(focusable);
|
|
568
518
|
if (!navigationOnly) {
|
|
569
|
-
|
|
519
|
+
saveAttributes([focusable], ["tabindex"]);
|
|
570
520
|
focusable.setAttribute("tabindex", "-1");
|
|
571
521
|
}
|
|
572
522
|
if (!typeahead) {
|
|
@@ -579,8 +529,8 @@ var RovingTabIndex = class {
|
|
|
579
529
|
);
|
|
580
530
|
if (char) {
|
|
581
531
|
keys.add(char);
|
|
582
|
-
|
|
583
|
-
|
|
532
|
+
saveAttributes([focusable], ["aria-keyshortcuts"]);
|
|
533
|
+
addTokenToAttribute(focusable, "aria-keyshortcuts", char, {
|
|
584
534
|
caseInsensitive: true
|
|
585
535
|
});
|
|
586
536
|
}
|
|
@@ -603,14 +553,14 @@ var RovingTabIndex = class {
|
|
|
603
553
|
}
|
|
604
554
|
}
|
|
605
555
|
#createSelectorFilter() {
|
|
606
|
-
const { selector } = this.#
|
|
556
|
+
const { selector } = this.#settings;
|
|
607
557
|
return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
|
|
608
558
|
}
|
|
609
559
|
#getFocusables() {
|
|
610
560
|
return getFocusables(this.#container, {
|
|
611
561
|
composed: true,
|
|
612
562
|
filter: this.#selectorFilter,
|
|
613
|
-
skipNegativeTabIndexCheck: !this.#
|
|
563
|
+
skipNegativeTabIndexCheck: !this.#settings.navigationOnly,
|
|
614
564
|
skipVisibilityCheck: true
|
|
615
565
|
});
|
|
616
566
|
}
|
|
@@ -908,17 +858,6 @@ function waitAnimationFinish(animation) {
|
|
|
908
858
|
*/
|
|
909
859
|
/*! Bundled license information:
|
|
910
860
|
|
|
911
|
-
@y14e/attributes-utils/dist/index.js:
|
|
912
|
-
(**
|
|
913
|
-
* Attributes Utils
|
|
914
|
-
*
|
|
915
|
-
* @version 1.1.2
|
|
916
|
-
* @author Yusuke Kamiyamane
|
|
917
|
-
* @license MIT
|
|
918
|
-
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
919
|
-
* @see {@link https://github.com/y14e/attributes-utils}
|
|
920
|
-
*)
|
|
921
|
-
|
|
922
861
|
@y14e/button/dist/index.js:
|
|
923
862
|
(**
|
|
924
863
|
* Button
|
|
@@ -936,7 +875,7 @@ function waitAnimationFinish(animation) {
|
|
|
936
875
|
* Lightweight roving tabindex utility with fully focus management.
|
|
937
876
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
938
877
|
*
|
|
939
|
-
* @version 3.0.
|
|
878
|
+
* @version 3.0.7
|
|
940
879
|
* @author Yusuke Kamiyamane
|
|
941
880
|
* @license MIT
|
|
942
881
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.js
CHANGED
|
@@ -1,52 +1,3 @@
|
|
|
1
|
-
// node_modules/@y14e/attributes-utils/dist/index.js
|
|
2
|
-
var DEFAULT_PARSER = (value) => value.split(/\s+/);
|
|
3
|
-
var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
|
|
4
|
-
function addTokenToAttribute(element, attribute, token, options = {}) {
|
|
5
|
-
const {
|
|
6
|
-
caseInsensitive = false,
|
|
7
|
-
parse = DEFAULT_PARSER,
|
|
8
|
-
serialize = DEFAULT_SERIALIZER
|
|
9
|
-
} = options;
|
|
10
|
-
const value = element.getAttribute(attribute)?.trim();
|
|
11
|
-
const tokens = value ? parse(value).filter(Boolean) : [];
|
|
12
|
-
if (caseInsensitive) {
|
|
13
|
-
const lower = token.toLowerCase();
|
|
14
|
-
if (tokens.every((token2) => token2.toLowerCase() !== lower)) {
|
|
15
|
-
tokens.push(token);
|
|
16
|
-
element.setAttribute(attribute, serialize(tokens));
|
|
17
|
-
}
|
|
18
|
-
} else {
|
|
19
|
-
const set = new Set(tokens);
|
|
20
|
-
set.add(token);
|
|
21
|
-
element.setAttribute(attribute, serialize([...set]));
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
var snapshots = /* @__PURE__ */ new WeakMap();
|
|
25
|
-
function restoreAttributes(elements) {
|
|
26
|
-
for (const element of elements) {
|
|
27
|
-
const snapshot = snapshots.get(element);
|
|
28
|
-
if (!snapshot) {
|
|
29
|
-
continue;
|
|
30
|
-
}
|
|
31
|
-
for (const [attribute, value] of snapshot.entries()) {
|
|
32
|
-
value === null ? element.removeAttribute(attribute) : element.setAttribute(attribute, value);
|
|
33
|
-
}
|
|
34
|
-
snapshots.delete(element);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
function saveAttributes(elements, attributes) {
|
|
38
|
-
elements.forEach((element) => {
|
|
39
|
-
let snapshot = snapshots.get(element);
|
|
40
|
-
if (!snapshot) {
|
|
41
|
-
snapshot = /* @__PURE__ */ new Map();
|
|
42
|
-
snapshots.set(element, snapshot);
|
|
43
|
-
}
|
|
44
|
-
attributes.forEach((attribute) => {
|
|
45
|
-
snapshot.set(attribute, element.getAttribute(attribute));
|
|
46
|
-
});
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
|
|
50
1
|
// node_modules/@y14e/button/dist/index.js
|
|
51
2
|
var Button = class {
|
|
52
3
|
#element;
|
|
@@ -104,13 +55,13 @@ function getActiveElement() {
|
|
|
104
55
|
}
|
|
105
56
|
|
|
106
57
|
// node_modules/@y14e/roving-tabindex/dist/index.js
|
|
107
|
-
var
|
|
108
|
-
var
|
|
109
|
-
function
|
|
58
|
+
var DEFAULT_PARSER = (value) => value.split(/\s+/);
|
|
59
|
+
var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
|
|
60
|
+
function addTokenToAttribute(element, attribute, token, options = {}) {
|
|
110
61
|
const {
|
|
111
62
|
caseInsensitive = false,
|
|
112
|
-
parse =
|
|
113
|
-
serialize =
|
|
63
|
+
parse = DEFAULT_PARSER,
|
|
64
|
+
serialize = DEFAULT_SERIALIZER
|
|
114
65
|
} = options;
|
|
115
66
|
const value = element.getAttribute(attribute)?.trim();
|
|
116
67
|
const tokens = value ? parse(value).filter(Boolean) : [];
|
|
@@ -126,25 +77,25 @@ function addTokenToAttribute2(element, attribute, token, options = {}) {
|
|
|
126
77
|
element.setAttribute(attribute, serialize([...set]));
|
|
127
78
|
}
|
|
128
79
|
}
|
|
129
|
-
var
|
|
130
|
-
function
|
|
80
|
+
var snapshots = /* @__PURE__ */ new WeakMap();
|
|
81
|
+
function restoreAttributes(elements) {
|
|
131
82
|
for (const element of elements) {
|
|
132
|
-
const snapshot =
|
|
83
|
+
const snapshot = snapshots.get(element);
|
|
133
84
|
if (!snapshot) {
|
|
134
85
|
continue;
|
|
135
86
|
}
|
|
136
87
|
for (const [attribute, value] of snapshot.entries()) {
|
|
137
88
|
value === null ? element.removeAttribute(attribute) : element.setAttribute(attribute, value);
|
|
138
89
|
}
|
|
139
|
-
|
|
90
|
+
snapshots.delete(element);
|
|
140
91
|
}
|
|
141
92
|
}
|
|
142
|
-
function
|
|
93
|
+
function saveAttributes(elements, attributes) {
|
|
143
94
|
elements.forEach((element) => {
|
|
144
|
-
let snapshot =
|
|
95
|
+
let snapshot = snapshots.get(element);
|
|
145
96
|
if (!snapshot) {
|
|
146
97
|
snapshot = /* @__PURE__ */ new Map();
|
|
147
|
-
|
|
98
|
+
snapshots.set(element, snapshot);
|
|
148
99
|
}
|
|
149
100
|
attributes.forEach((attribute) => {
|
|
150
101
|
snapshot.set(attribute, element.getAttribute(attribute));
|
|
@@ -383,60 +334,12 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
383
334
|
return () => {
|
|
384
335
|
};
|
|
385
336
|
}
|
|
386
|
-
|
|
387
|
-
direction,
|
|
388
|
-
navigationOnly = false,
|
|
389
|
-
noMemory = false,
|
|
390
|
-
noStart = false,
|
|
391
|
-
selector,
|
|
392
|
-
typeahead = false,
|
|
393
|
-
wrap = false
|
|
394
|
-
} = options;
|
|
395
|
-
if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
|
|
396
|
-
console.warn("Invalid direction option. Fallback: both (undefined).");
|
|
397
|
-
direction = void 0;
|
|
398
|
-
}
|
|
399
|
-
if (typeof navigationOnly !== "boolean") {
|
|
400
|
-
console.warn("Invalid navigationOnly option. Fallback: false.");
|
|
401
|
-
navigationOnly = false;
|
|
402
|
-
}
|
|
403
|
-
if (typeof noMemory !== "boolean") {
|
|
404
|
-
console.warn("Invalid noMemory option. Fallback: false.");
|
|
405
|
-
noMemory = false;
|
|
406
|
-
}
|
|
407
|
-
if (typeof noStart !== "boolean") {
|
|
408
|
-
console.warn("Invalid noStart option. Fallback: false.");
|
|
409
|
-
noStart = false;
|
|
410
|
-
}
|
|
411
|
-
if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
|
|
412
|
-
console.warn(
|
|
413
|
-
"Invalid selector. Fallback: all focusable elements (undefined)."
|
|
414
|
-
);
|
|
415
|
-
selector = void 0;
|
|
416
|
-
}
|
|
417
|
-
if (typeof typeahead !== "boolean") {
|
|
418
|
-
console.warn("Invalid typeahead option. Fallback: false.");
|
|
419
|
-
typeahead = false;
|
|
420
|
-
}
|
|
421
|
-
if (typeof wrap !== "boolean") {
|
|
422
|
-
console.warn("Invalid wrap option. Fallback: false.");
|
|
423
|
-
wrap = false;
|
|
424
|
-
}
|
|
425
|
-
const settings = {
|
|
426
|
-
navigationOnly,
|
|
427
|
-
noMemory,
|
|
428
|
-
noStart,
|
|
429
|
-
typeahead,
|
|
430
|
-
wrap
|
|
431
|
-
};
|
|
432
|
-
direction && Object.assign(settings, { direction });
|
|
433
|
-
selector && Object.assign(settings, { selector });
|
|
434
|
-
const roving = new RovingTabIndex(container, settings);
|
|
337
|
+
const roving = new RovingTabIndex(container, options);
|
|
435
338
|
return () => roving.destroy();
|
|
436
339
|
}
|
|
437
340
|
var RovingTabIndex = class {
|
|
438
341
|
#container;
|
|
439
|
-
#
|
|
342
|
+
#settings;
|
|
440
343
|
#focusables = /* @__PURE__ */ new Set();
|
|
441
344
|
#focusablesByFirstChar = /* @__PURE__ */ new Map();
|
|
442
345
|
#selectorFilter;
|
|
@@ -444,7 +347,54 @@ var RovingTabIndex = class {
|
|
|
444
347
|
#isDestroyed = false;
|
|
445
348
|
constructor(container, options = {}) {
|
|
446
349
|
this.#container = container;
|
|
447
|
-
|
|
350
|
+
let {
|
|
351
|
+
direction,
|
|
352
|
+
navigationOnly = false,
|
|
353
|
+
noMemory = false,
|
|
354
|
+
noStart = false,
|
|
355
|
+
selector,
|
|
356
|
+
typeahead = false,
|
|
357
|
+
wrap = false
|
|
358
|
+
} = options;
|
|
359
|
+
if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
|
|
360
|
+
console.warn("Invalid direction option. Fallback: both (undefined).");
|
|
361
|
+
direction = void 0;
|
|
362
|
+
}
|
|
363
|
+
if (typeof navigationOnly !== "boolean") {
|
|
364
|
+
console.warn("Invalid navigationOnly option. Fallback: false.");
|
|
365
|
+
navigationOnly = false;
|
|
366
|
+
}
|
|
367
|
+
if (typeof noMemory !== "boolean") {
|
|
368
|
+
console.warn("Invalid noMemory option. Fallback: false.");
|
|
369
|
+
noMemory = false;
|
|
370
|
+
}
|
|
371
|
+
if (typeof noStart !== "boolean") {
|
|
372
|
+
console.warn("Invalid noStart option. Fallback: false.");
|
|
373
|
+
noStart = false;
|
|
374
|
+
}
|
|
375
|
+
if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
|
|
376
|
+
console.warn(
|
|
377
|
+
"Invalid selector. Fallback: all focusable elements (undefined)."
|
|
378
|
+
);
|
|
379
|
+
selector = void 0;
|
|
380
|
+
}
|
|
381
|
+
if (typeof typeahead !== "boolean") {
|
|
382
|
+
console.warn("Invalid typeahead option. Fallback: false.");
|
|
383
|
+
typeahead = false;
|
|
384
|
+
}
|
|
385
|
+
if (typeof wrap !== "boolean") {
|
|
386
|
+
console.warn("Invalid wrap option. Fallback: false.");
|
|
387
|
+
wrap = false;
|
|
388
|
+
}
|
|
389
|
+
this.#settings = {
|
|
390
|
+
navigationOnly,
|
|
391
|
+
noMemory,
|
|
392
|
+
noStart,
|
|
393
|
+
typeahead,
|
|
394
|
+
wrap
|
|
395
|
+
};
|
|
396
|
+
direction && Object.assign(this.#settings, { direction });
|
|
397
|
+
selector && Object.assign(this.#settings, { selector });
|
|
448
398
|
this.#selectorFilter = this.#createSelectorFilter();
|
|
449
399
|
this.#initialize();
|
|
450
400
|
}
|
|
@@ -455,7 +405,7 @@ var RovingTabIndex = class {
|
|
|
455
405
|
this.#isDestroyed = true;
|
|
456
406
|
this.#controller?.abort();
|
|
457
407
|
this.#controller = null;
|
|
458
|
-
|
|
408
|
+
restoreAttributes([...this.#focusables]);
|
|
459
409
|
this.#focusables.clear();
|
|
460
410
|
this.#focusablesByFirstChar.clear();
|
|
461
411
|
this.#container.removeAttribute("data-roving-tabindex-initialized");
|
|
@@ -480,7 +430,7 @@ var RovingTabIndex = class {
|
|
|
480
430
|
return;
|
|
481
431
|
}
|
|
482
432
|
const isFocusable22 = this.#focusables.has(target);
|
|
483
|
-
this.#
|
|
433
|
+
this.#settings.noMemory && !isFocusable22 ? this.#update(null) : isFocusable22 && this.#update(target);
|
|
484
434
|
};
|
|
485
435
|
#onKeyDown = (event) => {
|
|
486
436
|
if (!event.composedPath().includes(this.#container)) {
|
|
@@ -490,7 +440,7 @@ var RovingTabIndex = class {
|
|
|
490
440
|
if (altKey || ctrlKey || metaKey || shiftKey) {
|
|
491
441
|
return;
|
|
492
442
|
}
|
|
493
|
-
const { direction, typeahead, wrap } = this.#
|
|
443
|
+
const { direction, typeahead, wrap } = this.#settings;
|
|
494
444
|
const isBoth = !direction;
|
|
495
445
|
const isHorizontal = direction === "horizontal";
|
|
496
446
|
if (![
|
|
@@ -549,7 +499,7 @@ var RovingTabIndex = class {
|
|
|
549
499
|
const current = new Set(this.#getFocusables());
|
|
550
500
|
for (const focusable of this.#focusables) {
|
|
551
501
|
if (!current.has(focusable)) {
|
|
552
|
-
focusable.isConnected &&
|
|
502
|
+
focusable.isConnected && restoreAttributes([focusable]);
|
|
553
503
|
this.#focusables.delete(focusable);
|
|
554
504
|
this.#focusablesByFirstChar.forEach((focusables) => {
|
|
555
505
|
const index = focusables.indexOf(focusable);
|
|
@@ -557,14 +507,14 @@ var RovingTabIndex = class {
|
|
|
557
507
|
});
|
|
558
508
|
}
|
|
559
509
|
}
|
|
560
|
-
const { navigationOnly, noStart, typeahead } = this.#
|
|
510
|
+
const { navigationOnly, noStart, typeahead } = this.#settings;
|
|
561
511
|
for (const focusable of current) {
|
|
562
512
|
if (this.#focusables.has(focusable)) {
|
|
563
513
|
continue;
|
|
564
514
|
}
|
|
565
515
|
this.#focusables.add(focusable);
|
|
566
516
|
if (!navigationOnly) {
|
|
567
|
-
|
|
517
|
+
saveAttributes([focusable], ["tabindex"]);
|
|
568
518
|
focusable.setAttribute("tabindex", "-1");
|
|
569
519
|
}
|
|
570
520
|
if (!typeahead) {
|
|
@@ -577,8 +527,8 @@ var RovingTabIndex = class {
|
|
|
577
527
|
);
|
|
578
528
|
if (char) {
|
|
579
529
|
keys.add(char);
|
|
580
|
-
|
|
581
|
-
|
|
530
|
+
saveAttributes([focusable], ["aria-keyshortcuts"]);
|
|
531
|
+
addTokenToAttribute(focusable, "aria-keyshortcuts", char, {
|
|
582
532
|
caseInsensitive: true
|
|
583
533
|
});
|
|
584
534
|
}
|
|
@@ -601,14 +551,14 @@ var RovingTabIndex = class {
|
|
|
601
551
|
}
|
|
602
552
|
}
|
|
603
553
|
#createSelectorFilter() {
|
|
604
|
-
const { selector } = this.#
|
|
554
|
+
const { selector } = this.#settings;
|
|
605
555
|
return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
|
|
606
556
|
}
|
|
607
557
|
#getFocusables() {
|
|
608
558
|
return getFocusables(this.#container, {
|
|
609
559
|
composed: true,
|
|
610
560
|
filter: this.#selectorFilter,
|
|
611
|
-
skipNegativeTabIndexCheck: !this.#
|
|
561
|
+
skipNegativeTabIndexCheck: !this.#settings.navigationOnly,
|
|
612
562
|
skipVisibilityCheck: true
|
|
613
563
|
});
|
|
614
564
|
}
|
|
@@ -906,17 +856,6 @@ function waitAnimationFinish(animation) {
|
|
|
906
856
|
*/
|
|
907
857
|
/*! Bundled license information:
|
|
908
858
|
|
|
909
|
-
@y14e/attributes-utils/dist/index.js:
|
|
910
|
-
(**
|
|
911
|
-
* Attributes Utils
|
|
912
|
-
*
|
|
913
|
-
* @version 1.1.2
|
|
914
|
-
* @author Yusuke Kamiyamane
|
|
915
|
-
* @license MIT
|
|
916
|
-
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
917
|
-
* @see {@link https://github.com/y14e/attributes-utils}
|
|
918
|
-
*)
|
|
919
|
-
|
|
920
859
|
@y14e/button/dist/index.js:
|
|
921
860
|
(**
|
|
922
861
|
* Button
|
|
@@ -934,7 +873,7 @@ function waitAnimationFinish(animation) {
|
|
|
934
873
|
* Lightweight roving tabindex utility with fully focus management.
|
|
935
874
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
936
875
|
*
|
|
937
|
-
* @version 3.0.
|
|
876
|
+
* @version 3.0.7
|
|
938
877
|
* @author Yusuke Kamiyamane
|
|
939
878
|
* @license MIT
|
|
940
879
|
* @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.13",
|
|
4
4
|
"description": "WAI-ARIA compliant accordion pattern implementation in TypeScript",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -43,9 +43,8 @@
|
|
|
43
43
|
},
|
|
44
44
|
"homepage": "https://github.com/y14e/accordion#readme",
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@y14e/attributes-utils": "^1.1.2",
|
|
47
46
|
"@y14e/button": "^1.0.2",
|
|
48
|
-
"@y14e/roving-tabindex": "^3.0.
|
|
47
|
+
"@y14e/roving-tabindex": "^3.0.7",
|
|
49
48
|
"bun-types": "latest",
|
|
50
49
|
"tsup": "^8.0.0",
|
|
51
50
|
"typescript": "^5.6.0",
|