@y14e/disclosure 1.3.13 → 1.3.15
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 +72 -111
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +72 -111
- package/package.json +2 -3
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.15';
|
|
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.15';
|
|
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.15/+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.15';
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## Usage
|
package/dist/index.cjs
CHANGED
|
@@ -1,32 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
// node_modules/@y14e/attributes-utils/dist/index.js
|
|
4
|
-
var snapshots = /* @__PURE__ */ new WeakMap();
|
|
5
|
-
function restoreAttributes(elements) {
|
|
6
|
-
for (const element of elements) {
|
|
7
|
-
const snapshot = snapshots.get(element);
|
|
8
|
-
if (!snapshot) {
|
|
9
|
-
continue;
|
|
10
|
-
}
|
|
11
|
-
for (const [attribute, value] of snapshot.entries()) {
|
|
12
|
-
value === null ? element.removeAttribute(attribute) : element.setAttribute(attribute, value);
|
|
13
|
-
}
|
|
14
|
-
snapshots.delete(element);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
function saveAttributes(elements, attributes) {
|
|
18
|
-
elements.forEach((element) => {
|
|
19
|
-
let snapshot = snapshots.get(element);
|
|
20
|
-
if (!snapshot) {
|
|
21
|
-
snapshot = /* @__PURE__ */ new Map();
|
|
22
|
-
snapshots.set(element, snapshot);
|
|
23
|
-
}
|
|
24
|
-
attributes.forEach((attribute) => {
|
|
25
|
-
snapshot.set(attribute, element.getAttribute(attribute));
|
|
26
|
-
});
|
|
27
|
-
});
|
|
28
|
-
}
|
|
29
|
-
|
|
30
3
|
// node_modules/@y14e/roving-tabindex/dist/index.js
|
|
31
4
|
var DEFAULT_PARSER = (value) => value.split(/\s+/);
|
|
32
5
|
var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
|
|
@@ -50,25 +23,25 @@ function addTokenToAttribute(element, attribute, token, options = {}) {
|
|
|
50
23
|
element.setAttribute(attribute, serialize([...set]));
|
|
51
24
|
}
|
|
52
25
|
}
|
|
53
|
-
var
|
|
54
|
-
function
|
|
26
|
+
var snapshots = /* @__PURE__ */ new WeakMap();
|
|
27
|
+
function restoreAttributes(elements) {
|
|
55
28
|
for (const element of elements) {
|
|
56
|
-
const snapshot =
|
|
29
|
+
const snapshot = snapshots.get(element);
|
|
57
30
|
if (!snapshot) {
|
|
58
31
|
continue;
|
|
59
32
|
}
|
|
60
33
|
for (const [attribute, value] of snapshot.entries()) {
|
|
61
34
|
value === null ? element.removeAttribute(attribute) : element.setAttribute(attribute, value);
|
|
62
35
|
}
|
|
63
|
-
|
|
36
|
+
snapshots.delete(element);
|
|
64
37
|
}
|
|
65
38
|
}
|
|
66
|
-
function
|
|
39
|
+
function saveAttributes(elements, attributes) {
|
|
67
40
|
elements.forEach((element) => {
|
|
68
|
-
let snapshot =
|
|
41
|
+
let snapshot = snapshots.get(element);
|
|
69
42
|
if (!snapshot) {
|
|
70
43
|
snapshot = /* @__PURE__ */ new Map();
|
|
71
|
-
|
|
44
|
+
snapshots.set(element, snapshot);
|
|
72
45
|
}
|
|
73
46
|
attributes.forEach((attribute) => {
|
|
74
47
|
snapshot.set(attribute, element.getAttribute(attribute));
|
|
@@ -307,60 +280,12 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
307
280
|
return () => {
|
|
308
281
|
};
|
|
309
282
|
}
|
|
310
|
-
|
|
311
|
-
direction,
|
|
312
|
-
navigationOnly = false,
|
|
313
|
-
noMemory = false,
|
|
314
|
-
noStart = false,
|
|
315
|
-
selector,
|
|
316
|
-
typeahead = false,
|
|
317
|
-
wrap = false
|
|
318
|
-
} = options;
|
|
319
|
-
if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
|
|
320
|
-
console.warn("Invalid direction option. Fallback: both (undefined).");
|
|
321
|
-
direction = void 0;
|
|
322
|
-
}
|
|
323
|
-
if (typeof navigationOnly !== "boolean") {
|
|
324
|
-
console.warn("Invalid navigationOnly option. Fallback: false.");
|
|
325
|
-
navigationOnly = false;
|
|
326
|
-
}
|
|
327
|
-
if (typeof noMemory !== "boolean") {
|
|
328
|
-
console.warn("Invalid noMemory option. Fallback: false.");
|
|
329
|
-
noMemory = false;
|
|
330
|
-
}
|
|
331
|
-
if (typeof noStart !== "boolean") {
|
|
332
|
-
console.warn("Invalid noStart option. Fallback: false.");
|
|
333
|
-
noStart = false;
|
|
334
|
-
}
|
|
335
|
-
if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
|
|
336
|
-
console.warn(
|
|
337
|
-
"Invalid selector. Fallback: all focusable elements (undefined)."
|
|
338
|
-
);
|
|
339
|
-
selector = void 0;
|
|
340
|
-
}
|
|
341
|
-
if (typeof typeahead !== "boolean") {
|
|
342
|
-
console.warn("Invalid typeahead option. Fallback: false.");
|
|
343
|
-
typeahead = false;
|
|
344
|
-
}
|
|
345
|
-
if (typeof wrap !== "boolean") {
|
|
346
|
-
console.warn("Invalid wrap option. Fallback: false.");
|
|
347
|
-
wrap = false;
|
|
348
|
-
}
|
|
349
|
-
const settings = {
|
|
350
|
-
navigationOnly,
|
|
351
|
-
noMemory,
|
|
352
|
-
noStart,
|
|
353
|
-
typeahead,
|
|
354
|
-
wrap
|
|
355
|
-
};
|
|
356
|
-
direction && Object.assign(settings, { direction });
|
|
357
|
-
selector && Object.assign(settings, { selector });
|
|
358
|
-
const roving = new RovingTabIndex(container, settings);
|
|
283
|
+
const roving = new RovingTabIndex(container, options);
|
|
359
284
|
return () => roving.destroy();
|
|
360
285
|
}
|
|
361
286
|
var RovingTabIndex = class {
|
|
362
287
|
#container;
|
|
363
|
-
#
|
|
288
|
+
#settings;
|
|
364
289
|
#focusables = /* @__PURE__ */ new Set();
|
|
365
290
|
#focusablesByFirstChar = /* @__PURE__ */ new Map();
|
|
366
291
|
#selectorFilter;
|
|
@@ -368,7 +293,54 @@ var RovingTabIndex = class {
|
|
|
368
293
|
#isDestroyed = false;
|
|
369
294
|
constructor(container, options = {}) {
|
|
370
295
|
this.#container = container;
|
|
371
|
-
|
|
296
|
+
let {
|
|
297
|
+
direction,
|
|
298
|
+
navigationOnly = false,
|
|
299
|
+
noMemory = false,
|
|
300
|
+
noStart = false,
|
|
301
|
+
selector,
|
|
302
|
+
typeahead = false,
|
|
303
|
+
wrap = false
|
|
304
|
+
} = options;
|
|
305
|
+
if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
|
|
306
|
+
console.warn("Invalid direction option. Fallback: both (undefined).");
|
|
307
|
+
direction = void 0;
|
|
308
|
+
}
|
|
309
|
+
if (typeof navigationOnly !== "boolean") {
|
|
310
|
+
console.warn("Invalid navigationOnly option. Fallback: false.");
|
|
311
|
+
navigationOnly = false;
|
|
312
|
+
}
|
|
313
|
+
if (typeof noMemory !== "boolean") {
|
|
314
|
+
console.warn("Invalid noMemory option. Fallback: false.");
|
|
315
|
+
noMemory = false;
|
|
316
|
+
}
|
|
317
|
+
if (typeof noStart !== "boolean") {
|
|
318
|
+
console.warn("Invalid noStart option. Fallback: false.");
|
|
319
|
+
noStart = false;
|
|
320
|
+
}
|
|
321
|
+
if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
|
|
322
|
+
console.warn(
|
|
323
|
+
"Invalid selector. Fallback: all focusable elements (undefined)."
|
|
324
|
+
);
|
|
325
|
+
selector = void 0;
|
|
326
|
+
}
|
|
327
|
+
if (typeof typeahead !== "boolean") {
|
|
328
|
+
console.warn("Invalid typeahead option. Fallback: false.");
|
|
329
|
+
typeahead = false;
|
|
330
|
+
}
|
|
331
|
+
if (typeof wrap !== "boolean") {
|
|
332
|
+
console.warn("Invalid wrap option. Fallback: false.");
|
|
333
|
+
wrap = false;
|
|
334
|
+
}
|
|
335
|
+
this.#settings = {
|
|
336
|
+
navigationOnly,
|
|
337
|
+
noMemory,
|
|
338
|
+
noStart,
|
|
339
|
+
typeahead,
|
|
340
|
+
wrap
|
|
341
|
+
};
|
|
342
|
+
direction && Object.assign(this.#settings, { direction });
|
|
343
|
+
selector && Object.assign(this.#settings, { selector });
|
|
372
344
|
this.#selectorFilter = this.#createSelectorFilter();
|
|
373
345
|
this.#initialize();
|
|
374
346
|
}
|
|
@@ -379,7 +351,7 @@ var RovingTabIndex = class {
|
|
|
379
351
|
this.#isDestroyed = true;
|
|
380
352
|
this.#controller?.abort();
|
|
381
353
|
this.#controller = null;
|
|
382
|
-
|
|
354
|
+
restoreAttributes([...this.#focusables]);
|
|
383
355
|
this.#focusables.clear();
|
|
384
356
|
this.#focusablesByFirstChar.clear();
|
|
385
357
|
this.#container.removeAttribute("data-roving-tabindex-initialized");
|
|
@@ -404,7 +376,7 @@ var RovingTabIndex = class {
|
|
|
404
376
|
return;
|
|
405
377
|
}
|
|
406
378
|
const isFocusable22 = this.#focusables.has(target);
|
|
407
|
-
this.#
|
|
379
|
+
this.#settings.noMemory && !isFocusable22 ? this.#update(null) : isFocusable22 && this.#update(target);
|
|
408
380
|
};
|
|
409
381
|
#onKeyDown = (event) => {
|
|
410
382
|
if (!event.composedPath().includes(this.#container)) {
|
|
@@ -414,7 +386,7 @@ var RovingTabIndex = class {
|
|
|
414
386
|
if (altKey || ctrlKey || metaKey || shiftKey) {
|
|
415
387
|
return;
|
|
416
388
|
}
|
|
417
|
-
const { direction, typeahead, wrap } = this.#
|
|
389
|
+
const { direction, typeahead, wrap } = this.#settings;
|
|
418
390
|
const isBoth = !direction;
|
|
419
391
|
const isHorizontal = direction === "horizontal";
|
|
420
392
|
if (![
|
|
@@ -473,7 +445,7 @@ var RovingTabIndex = class {
|
|
|
473
445
|
const current = new Set(this.#getFocusables());
|
|
474
446
|
for (const focusable of this.#focusables) {
|
|
475
447
|
if (!current.has(focusable)) {
|
|
476
|
-
focusable.isConnected &&
|
|
448
|
+
focusable.isConnected && restoreAttributes([focusable]);
|
|
477
449
|
this.#focusables.delete(focusable);
|
|
478
450
|
this.#focusablesByFirstChar.forEach((focusables) => {
|
|
479
451
|
const index = focusables.indexOf(focusable);
|
|
@@ -481,14 +453,14 @@ var RovingTabIndex = class {
|
|
|
481
453
|
});
|
|
482
454
|
}
|
|
483
455
|
}
|
|
484
|
-
const { navigationOnly, noStart, typeahead } = this.#
|
|
456
|
+
const { navigationOnly, noStart, typeahead } = this.#settings;
|
|
485
457
|
for (const focusable of current) {
|
|
486
458
|
if (this.#focusables.has(focusable)) {
|
|
487
459
|
continue;
|
|
488
460
|
}
|
|
489
461
|
this.#focusables.add(focusable);
|
|
490
462
|
if (!navigationOnly) {
|
|
491
|
-
|
|
463
|
+
saveAttributes([focusable], ["tabindex"]);
|
|
492
464
|
focusable.setAttribute("tabindex", "-1");
|
|
493
465
|
}
|
|
494
466
|
if (!typeahead) {
|
|
@@ -501,7 +473,7 @@ var RovingTabIndex = class {
|
|
|
501
473
|
);
|
|
502
474
|
if (char) {
|
|
503
475
|
keys.add(char);
|
|
504
|
-
|
|
476
|
+
saveAttributes([focusable], ["aria-keyshortcuts"]);
|
|
505
477
|
addTokenToAttribute(focusable, "aria-keyshortcuts", char, {
|
|
506
478
|
caseInsensitive: true
|
|
507
479
|
});
|
|
@@ -525,14 +497,14 @@ var RovingTabIndex = class {
|
|
|
525
497
|
}
|
|
526
498
|
}
|
|
527
499
|
#createSelectorFilter() {
|
|
528
|
-
const { selector } = this.#
|
|
500
|
+
const { selector } = this.#settings;
|
|
529
501
|
return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
|
|
530
502
|
}
|
|
531
503
|
#getFocusables() {
|
|
532
504
|
return getFocusables(this.#container, {
|
|
533
505
|
composed: true,
|
|
534
506
|
filter: this.#selectorFilter,
|
|
535
|
-
skipNegativeTabIndexCheck: !this.#
|
|
507
|
+
skipNegativeTabIndexCheck: !this.#settings.navigationOnly,
|
|
536
508
|
skipVisibilityCheck: true
|
|
537
509
|
});
|
|
538
510
|
}
|
|
@@ -624,11 +596,11 @@ var Disclosure = class _Disclosure {
|
|
|
624
596
|
if (this.#isDestroyed) {
|
|
625
597
|
return;
|
|
626
598
|
}
|
|
627
|
-
if (!(details instanceof HTMLDetailsElement)) {
|
|
599
|
+
if (!(details instanceof HTMLDetailsElement) || !this.#bindings.has(details)) {
|
|
628
600
|
console.warn("Invalid <details> element");
|
|
629
601
|
return;
|
|
630
602
|
}
|
|
631
|
-
this.#
|
|
603
|
+
this.#toggle(details, false);
|
|
632
604
|
}
|
|
633
605
|
async destroy(force = false) {
|
|
634
606
|
if (this.#isDestroyed) {
|
|
@@ -665,11 +637,11 @@ var Disclosure = class _Disclosure {
|
|
|
665
637
|
if (this.#isDestroyed) {
|
|
666
638
|
return;
|
|
667
639
|
}
|
|
668
|
-
if (!(details instanceof HTMLDetailsElement)) {
|
|
640
|
+
if (!(details instanceof HTMLDetailsElement) || !this.#bindings.has(details)) {
|
|
669
641
|
console.warn("Invalid <details> element");
|
|
670
642
|
return;
|
|
671
643
|
}
|
|
672
|
-
this.#
|
|
644
|
+
this.#toggle(details, true);
|
|
673
645
|
}
|
|
674
646
|
#initialize() {
|
|
675
647
|
saveAttributes(this.#summaryElements, [
|
|
@@ -827,7 +799,7 @@ function waitAnimationFinish(animation) {
|
|
|
827
799
|
* WAI-ARIA compliant disclosure pattern implementation in TypeScript.
|
|
828
800
|
* Using the <details> and <summary> element.
|
|
829
801
|
*
|
|
830
|
-
* @version 1.3.
|
|
802
|
+
* @version 1.3.15
|
|
831
803
|
* @author Yusuke Kamiyamane
|
|
832
804
|
* @license MIT
|
|
833
805
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -835,24 +807,13 @@ function waitAnimationFinish(animation) {
|
|
|
835
807
|
*/
|
|
836
808
|
/*! Bundled license information:
|
|
837
809
|
|
|
838
|
-
@y14e/attributes-utils/dist/index.js:
|
|
839
|
-
(**
|
|
840
|
-
* Attributes Utils
|
|
841
|
-
*
|
|
842
|
-
* @version 1.1.2
|
|
843
|
-
* @author Yusuke Kamiyamane
|
|
844
|
-
* @license MIT
|
|
845
|
-
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
846
|
-
* @see {@link https://github.com/y14e/attributes-utils}
|
|
847
|
-
*)
|
|
848
|
-
|
|
849
810
|
@y14e/roving-tabindex/dist/index.js:
|
|
850
811
|
(**
|
|
851
812
|
* Roving Tabindex
|
|
852
813
|
* Lightweight roving tabindex utility with fully focus management.
|
|
853
814
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
854
815
|
*
|
|
855
|
-
* @version 3.0.
|
|
816
|
+
* @version 3.0.7
|
|
856
817
|
* @author Yusuke Kamiyamane
|
|
857
818
|
* @license MIT
|
|
858
819
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,30 +1,3 @@
|
|
|
1
|
-
// node_modules/@y14e/attributes-utils/dist/index.js
|
|
2
|
-
var snapshots = /* @__PURE__ */ new WeakMap();
|
|
3
|
-
function restoreAttributes(elements) {
|
|
4
|
-
for (const element of elements) {
|
|
5
|
-
const snapshot = snapshots.get(element);
|
|
6
|
-
if (!snapshot) {
|
|
7
|
-
continue;
|
|
8
|
-
}
|
|
9
|
-
for (const [attribute, value] of snapshot.entries()) {
|
|
10
|
-
value === null ? element.removeAttribute(attribute) : element.setAttribute(attribute, value);
|
|
11
|
-
}
|
|
12
|
-
snapshots.delete(element);
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
function saveAttributes(elements, attributes) {
|
|
16
|
-
elements.forEach((element) => {
|
|
17
|
-
let snapshot = snapshots.get(element);
|
|
18
|
-
if (!snapshot) {
|
|
19
|
-
snapshot = /* @__PURE__ */ new Map();
|
|
20
|
-
snapshots.set(element, snapshot);
|
|
21
|
-
}
|
|
22
|
-
attributes.forEach((attribute) => {
|
|
23
|
-
snapshot.set(attribute, element.getAttribute(attribute));
|
|
24
|
-
});
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
|
|
28
1
|
// node_modules/@y14e/roving-tabindex/dist/index.js
|
|
29
2
|
var DEFAULT_PARSER = (value) => value.split(/\s+/);
|
|
30
3
|
var DEFAULT_SERIALIZER = (tokens) => tokens.join(" ");
|
|
@@ -48,25 +21,25 @@ function addTokenToAttribute(element, attribute, token, options = {}) {
|
|
|
48
21
|
element.setAttribute(attribute, serialize([...set]));
|
|
49
22
|
}
|
|
50
23
|
}
|
|
51
|
-
var
|
|
52
|
-
function
|
|
24
|
+
var snapshots = /* @__PURE__ */ new WeakMap();
|
|
25
|
+
function restoreAttributes(elements) {
|
|
53
26
|
for (const element of elements) {
|
|
54
|
-
const snapshot =
|
|
27
|
+
const snapshot = snapshots.get(element);
|
|
55
28
|
if (!snapshot) {
|
|
56
29
|
continue;
|
|
57
30
|
}
|
|
58
31
|
for (const [attribute, value] of snapshot.entries()) {
|
|
59
32
|
value === null ? element.removeAttribute(attribute) : element.setAttribute(attribute, value);
|
|
60
33
|
}
|
|
61
|
-
|
|
34
|
+
snapshots.delete(element);
|
|
62
35
|
}
|
|
63
36
|
}
|
|
64
|
-
function
|
|
37
|
+
function saveAttributes(elements, attributes) {
|
|
65
38
|
elements.forEach((element) => {
|
|
66
|
-
let snapshot =
|
|
39
|
+
let snapshot = snapshots.get(element);
|
|
67
40
|
if (!snapshot) {
|
|
68
41
|
snapshot = /* @__PURE__ */ new Map();
|
|
69
|
-
|
|
42
|
+
snapshots.set(element, snapshot);
|
|
70
43
|
}
|
|
71
44
|
attributes.forEach((attribute) => {
|
|
72
45
|
snapshot.set(attribute, element.getAttribute(attribute));
|
|
@@ -305,60 +278,12 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
305
278
|
return () => {
|
|
306
279
|
};
|
|
307
280
|
}
|
|
308
|
-
|
|
309
|
-
direction,
|
|
310
|
-
navigationOnly = false,
|
|
311
|
-
noMemory = false,
|
|
312
|
-
noStart = false,
|
|
313
|
-
selector,
|
|
314
|
-
typeahead = false,
|
|
315
|
-
wrap = false
|
|
316
|
-
} = options;
|
|
317
|
-
if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
|
|
318
|
-
console.warn("Invalid direction option. Fallback: both (undefined).");
|
|
319
|
-
direction = void 0;
|
|
320
|
-
}
|
|
321
|
-
if (typeof navigationOnly !== "boolean") {
|
|
322
|
-
console.warn("Invalid navigationOnly option. Fallback: false.");
|
|
323
|
-
navigationOnly = false;
|
|
324
|
-
}
|
|
325
|
-
if (typeof noMemory !== "boolean") {
|
|
326
|
-
console.warn("Invalid noMemory option. Fallback: false.");
|
|
327
|
-
noMemory = false;
|
|
328
|
-
}
|
|
329
|
-
if (typeof noStart !== "boolean") {
|
|
330
|
-
console.warn("Invalid noStart option. Fallback: false.");
|
|
331
|
-
noStart = false;
|
|
332
|
-
}
|
|
333
|
-
if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
|
|
334
|
-
console.warn(
|
|
335
|
-
"Invalid selector. Fallback: all focusable elements (undefined)."
|
|
336
|
-
);
|
|
337
|
-
selector = void 0;
|
|
338
|
-
}
|
|
339
|
-
if (typeof typeahead !== "boolean") {
|
|
340
|
-
console.warn("Invalid typeahead option. Fallback: false.");
|
|
341
|
-
typeahead = false;
|
|
342
|
-
}
|
|
343
|
-
if (typeof wrap !== "boolean") {
|
|
344
|
-
console.warn("Invalid wrap option. Fallback: false.");
|
|
345
|
-
wrap = false;
|
|
346
|
-
}
|
|
347
|
-
const settings = {
|
|
348
|
-
navigationOnly,
|
|
349
|
-
noMemory,
|
|
350
|
-
noStart,
|
|
351
|
-
typeahead,
|
|
352
|
-
wrap
|
|
353
|
-
};
|
|
354
|
-
direction && Object.assign(settings, { direction });
|
|
355
|
-
selector && Object.assign(settings, { selector });
|
|
356
|
-
const roving = new RovingTabIndex(container, settings);
|
|
281
|
+
const roving = new RovingTabIndex(container, options);
|
|
357
282
|
return () => roving.destroy();
|
|
358
283
|
}
|
|
359
284
|
var RovingTabIndex = class {
|
|
360
285
|
#container;
|
|
361
|
-
#
|
|
286
|
+
#settings;
|
|
362
287
|
#focusables = /* @__PURE__ */ new Set();
|
|
363
288
|
#focusablesByFirstChar = /* @__PURE__ */ new Map();
|
|
364
289
|
#selectorFilter;
|
|
@@ -366,7 +291,54 @@ var RovingTabIndex = class {
|
|
|
366
291
|
#isDestroyed = false;
|
|
367
292
|
constructor(container, options = {}) {
|
|
368
293
|
this.#container = container;
|
|
369
|
-
|
|
294
|
+
let {
|
|
295
|
+
direction,
|
|
296
|
+
navigationOnly = false,
|
|
297
|
+
noMemory = false,
|
|
298
|
+
noStart = false,
|
|
299
|
+
selector,
|
|
300
|
+
typeahead = false,
|
|
301
|
+
wrap = false
|
|
302
|
+
} = options;
|
|
303
|
+
if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
|
|
304
|
+
console.warn("Invalid direction option. Fallback: both (undefined).");
|
|
305
|
+
direction = void 0;
|
|
306
|
+
}
|
|
307
|
+
if (typeof navigationOnly !== "boolean") {
|
|
308
|
+
console.warn("Invalid navigationOnly option. Fallback: false.");
|
|
309
|
+
navigationOnly = false;
|
|
310
|
+
}
|
|
311
|
+
if (typeof noMemory !== "boolean") {
|
|
312
|
+
console.warn("Invalid noMemory option. Fallback: false.");
|
|
313
|
+
noMemory = false;
|
|
314
|
+
}
|
|
315
|
+
if (typeof noStart !== "boolean") {
|
|
316
|
+
console.warn("Invalid noStart option. Fallback: false.");
|
|
317
|
+
noStart = false;
|
|
318
|
+
}
|
|
319
|
+
if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
|
|
320
|
+
console.warn(
|
|
321
|
+
"Invalid selector. Fallback: all focusable elements (undefined)."
|
|
322
|
+
);
|
|
323
|
+
selector = void 0;
|
|
324
|
+
}
|
|
325
|
+
if (typeof typeahead !== "boolean") {
|
|
326
|
+
console.warn("Invalid typeahead option. Fallback: false.");
|
|
327
|
+
typeahead = false;
|
|
328
|
+
}
|
|
329
|
+
if (typeof wrap !== "boolean") {
|
|
330
|
+
console.warn("Invalid wrap option. Fallback: false.");
|
|
331
|
+
wrap = false;
|
|
332
|
+
}
|
|
333
|
+
this.#settings = {
|
|
334
|
+
navigationOnly,
|
|
335
|
+
noMemory,
|
|
336
|
+
noStart,
|
|
337
|
+
typeahead,
|
|
338
|
+
wrap
|
|
339
|
+
};
|
|
340
|
+
direction && Object.assign(this.#settings, { direction });
|
|
341
|
+
selector && Object.assign(this.#settings, { selector });
|
|
370
342
|
this.#selectorFilter = this.#createSelectorFilter();
|
|
371
343
|
this.#initialize();
|
|
372
344
|
}
|
|
@@ -377,7 +349,7 @@ var RovingTabIndex = class {
|
|
|
377
349
|
this.#isDestroyed = true;
|
|
378
350
|
this.#controller?.abort();
|
|
379
351
|
this.#controller = null;
|
|
380
|
-
|
|
352
|
+
restoreAttributes([...this.#focusables]);
|
|
381
353
|
this.#focusables.clear();
|
|
382
354
|
this.#focusablesByFirstChar.clear();
|
|
383
355
|
this.#container.removeAttribute("data-roving-tabindex-initialized");
|
|
@@ -402,7 +374,7 @@ var RovingTabIndex = class {
|
|
|
402
374
|
return;
|
|
403
375
|
}
|
|
404
376
|
const isFocusable22 = this.#focusables.has(target);
|
|
405
|
-
this.#
|
|
377
|
+
this.#settings.noMemory && !isFocusable22 ? this.#update(null) : isFocusable22 && this.#update(target);
|
|
406
378
|
};
|
|
407
379
|
#onKeyDown = (event) => {
|
|
408
380
|
if (!event.composedPath().includes(this.#container)) {
|
|
@@ -412,7 +384,7 @@ var RovingTabIndex = class {
|
|
|
412
384
|
if (altKey || ctrlKey || metaKey || shiftKey) {
|
|
413
385
|
return;
|
|
414
386
|
}
|
|
415
|
-
const { direction, typeahead, wrap } = this.#
|
|
387
|
+
const { direction, typeahead, wrap } = this.#settings;
|
|
416
388
|
const isBoth = !direction;
|
|
417
389
|
const isHorizontal = direction === "horizontal";
|
|
418
390
|
if (![
|
|
@@ -471,7 +443,7 @@ var RovingTabIndex = class {
|
|
|
471
443
|
const current = new Set(this.#getFocusables());
|
|
472
444
|
for (const focusable of this.#focusables) {
|
|
473
445
|
if (!current.has(focusable)) {
|
|
474
|
-
focusable.isConnected &&
|
|
446
|
+
focusable.isConnected && restoreAttributes([focusable]);
|
|
475
447
|
this.#focusables.delete(focusable);
|
|
476
448
|
this.#focusablesByFirstChar.forEach((focusables) => {
|
|
477
449
|
const index = focusables.indexOf(focusable);
|
|
@@ -479,14 +451,14 @@ var RovingTabIndex = class {
|
|
|
479
451
|
});
|
|
480
452
|
}
|
|
481
453
|
}
|
|
482
|
-
const { navigationOnly, noStart, typeahead } = this.#
|
|
454
|
+
const { navigationOnly, noStart, typeahead } = this.#settings;
|
|
483
455
|
for (const focusable of current) {
|
|
484
456
|
if (this.#focusables.has(focusable)) {
|
|
485
457
|
continue;
|
|
486
458
|
}
|
|
487
459
|
this.#focusables.add(focusable);
|
|
488
460
|
if (!navigationOnly) {
|
|
489
|
-
|
|
461
|
+
saveAttributes([focusable], ["tabindex"]);
|
|
490
462
|
focusable.setAttribute("tabindex", "-1");
|
|
491
463
|
}
|
|
492
464
|
if (!typeahead) {
|
|
@@ -499,7 +471,7 @@ var RovingTabIndex = class {
|
|
|
499
471
|
);
|
|
500
472
|
if (char) {
|
|
501
473
|
keys.add(char);
|
|
502
|
-
|
|
474
|
+
saveAttributes([focusable], ["aria-keyshortcuts"]);
|
|
503
475
|
addTokenToAttribute(focusable, "aria-keyshortcuts", char, {
|
|
504
476
|
caseInsensitive: true
|
|
505
477
|
});
|
|
@@ -523,14 +495,14 @@ var RovingTabIndex = class {
|
|
|
523
495
|
}
|
|
524
496
|
}
|
|
525
497
|
#createSelectorFilter() {
|
|
526
|
-
const { selector } = this.#
|
|
498
|
+
const { selector } = this.#settings;
|
|
527
499
|
return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
|
|
528
500
|
}
|
|
529
501
|
#getFocusables() {
|
|
530
502
|
return getFocusables(this.#container, {
|
|
531
503
|
composed: true,
|
|
532
504
|
filter: this.#selectorFilter,
|
|
533
|
-
skipNegativeTabIndexCheck: !this.#
|
|
505
|
+
skipNegativeTabIndexCheck: !this.#settings.navigationOnly,
|
|
534
506
|
skipVisibilityCheck: true
|
|
535
507
|
});
|
|
536
508
|
}
|
|
@@ -622,11 +594,11 @@ var Disclosure = class _Disclosure {
|
|
|
622
594
|
if (this.#isDestroyed) {
|
|
623
595
|
return;
|
|
624
596
|
}
|
|
625
|
-
if (!(details instanceof HTMLDetailsElement)) {
|
|
597
|
+
if (!(details instanceof HTMLDetailsElement) || !this.#bindings.has(details)) {
|
|
626
598
|
console.warn("Invalid <details> element");
|
|
627
599
|
return;
|
|
628
600
|
}
|
|
629
|
-
this.#
|
|
601
|
+
this.#toggle(details, false);
|
|
630
602
|
}
|
|
631
603
|
async destroy(force = false) {
|
|
632
604
|
if (this.#isDestroyed) {
|
|
@@ -663,11 +635,11 @@ var Disclosure = class _Disclosure {
|
|
|
663
635
|
if (this.#isDestroyed) {
|
|
664
636
|
return;
|
|
665
637
|
}
|
|
666
|
-
if (!(details instanceof HTMLDetailsElement)) {
|
|
638
|
+
if (!(details instanceof HTMLDetailsElement) || !this.#bindings.has(details)) {
|
|
667
639
|
console.warn("Invalid <details> element");
|
|
668
640
|
return;
|
|
669
641
|
}
|
|
670
|
-
this.#
|
|
642
|
+
this.#toggle(details, true);
|
|
671
643
|
}
|
|
672
644
|
#initialize() {
|
|
673
645
|
saveAttributes(this.#summaryElements, [
|
|
@@ -825,7 +797,7 @@ function waitAnimationFinish(animation) {
|
|
|
825
797
|
* WAI-ARIA compliant disclosure pattern implementation in TypeScript.
|
|
826
798
|
* Using the <details> and <summary> element.
|
|
827
799
|
*
|
|
828
|
-
* @version 1.3.
|
|
800
|
+
* @version 1.3.15
|
|
829
801
|
* @author Yusuke Kamiyamane
|
|
830
802
|
* @license MIT
|
|
831
803
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -833,24 +805,13 @@ function waitAnimationFinish(animation) {
|
|
|
833
805
|
*/
|
|
834
806
|
/*! Bundled license information:
|
|
835
807
|
|
|
836
|
-
@y14e/attributes-utils/dist/index.js:
|
|
837
|
-
(**
|
|
838
|
-
* Attributes Utils
|
|
839
|
-
*
|
|
840
|
-
* @version 1.1.2
|
|
841
|
-
* @author Yusuke Kamiyamane
|
|
842
|
-
* @license MIT
|
|
843
|
-
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
844
|
-
* @see {@link https://github.com/y14e/attributes-utils}
|
|
845
|
-
*)
|
|
846
|
-
|
|
847
808
|
@y14e/roving-tabindex/dist/index.js:
|
|
848
809
|
(**
|
|
849
810
|
* Roving Tabindex
|
|
850
811
|
* Lightweight roving tabindex utility with fully focus management.
|
|
851
812
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
852
813
|
*
|
|
853
|
-
* @version 3.0.
|
|
814
|
+
* @version 3.0.7
|
|
854
815
|
* @author Yusuke Kamiyamane
|
|
855
816
|
* @license MIT
|
|
856
817
|
* @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.15",
|
|
4
4
|
"description": "WAI-ARIA compliant disclosure pattern implementation in TypeScript",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -43,8 +43,7 @@
|
|
|
43
43
|
},
|
|
44
44
|
"homepage": "https://github.com/y14e/disclosure#readme",
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@y14e/
|
|
47
|
-
"@y14e/roving-tabindex": "^3.0.5",
|
|
46
|
+
"@y14e/roving-tabindex": "^3.0.7",
|
|
48
47
|
"bun-types": "latest",
|
|
49
48
|
"tsup": "^8.0.0",
|
|
50
49
|
"typescript": "^5.6.0",
|