@y14e/disclosure 1.3.14 → 1.3.16
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 +78 -117
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +78 -117
- 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.16';
|
|
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.16';
|
|
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.16/+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.16';
|
|
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));
|
|
@@ -278,6 +251,16 @@ function getComposedChildren(node) {
|
|
|
278
251
|
}
|
|
279
252
|
return getChildren(node);
|
|
280
253
|
}
|
|
254
|
+
function focusElement(element) {
|
|
255
|
+
"focus" in element && typeof element.focus === "function" && element.focus();
|
|
256
|
+
}
|
|
257
|
+
function getActiveElement() {
|
|
258
|
+
let current = document.activeElement;
|
|
259
|
+
while (current?.shadowRoot?.activeElement) {
|
|
260
|
+
current = current.shadowRoot.activeElement;
|
|
261
|
+
}
|
|
262
|
+
return current;
|
|
263
|
+
}
|
|
281
264
|
function getChildren(node) {
|
|
282
265
|
const elements = [];
|
|
283
266
|
for (let child = node.firstElementChild; child; child = child.nextElementSibling) {
|
|
@@ -307,60 +290,12 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
307
290
|
return () => {
|
|
308
291
|
};
|
|
309
292
|
}
|
|
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);
|
|
293
|
+
const roving = new RovingTabIndex(container, options);
|
|
359
294
|
return () => roving.destroy();
|
|
360
295
|
}
|
|
361
296
|
var RovingTabIndex = class {
|
|
362
297
|
#container;
|
|
363
|
-
#
|
|
298
|
+
#settings;
|
|
364
299
|
#focusables = /* @__PURE__ */ new Set();
|
|
365
300
|
#focusablesByFirstChar = /* @__PURE__ */ new Map();
|
|
366
301
|
#selectorFilter;
|
|
@@ -368,7 +303,54 @@ var RovingTabIndex = class {
|
|
|
368
303
|
#isDestroyed = false;
|
|
369
304
|
constructor(container, options = {}) {
|
|
370
305
|
this.#container = container;
|
|
371
|
-
|
|
306
|
+
let {
|
|
307
|
+
direction,
|
|
308
|
+
navigationOnly = false,
|
|
309
|
+
noMemory = false,
|
|
310
|
+
noStart = false,
|
|
311
|
+
selector,
|
|
312
|
+
typeahead = false,
|
|
313
|
+
wrap = false
|
|
314
|
+
} = options;
|
|
315
|
+
if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
|
|
316
|
+
console.warn("Invalid direction option. Fallback: both (undefined).");
|
|
317
|
+
direction = void 0;
|
|
318
|
+
}
|
|
319
|
+
if (typeof navigationOnly !== "boolean") {
|
|
320
|
+
console.warn("Invalid navigationOnly option. Fallback: false.");
|
|
321
|
+
navigationOnly = false;
|
|
322
|
+
}
|
|
323
|
+
if (typeof noMemory !== "boolean") {
|
|
324
|
+
console.warn("Invalid noMemory option. Fallback: false.");
|
|
325
|
+
noMemory = false;
|
|
326
|
+
}
|
|
327
|
+
if (typeof noStart !== "boolean") {
|
|
328
|
+
console.warn("Invalid noStart option. Fallback: false.");
|
|
329
|
+
noStart = false;
|
|
330
|
+
}
|
|
331
|
+
if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
|
|
332
|
+
console.warn(
|
|
333
|
+
"Invalid selector. Fallback: all focusable elements (undefined)."
|
|
334
|
+
);
|
|
335
|
+
selector = void 0;
|
|
336
|
+
}
|
|
337
|
+
if (typeof typeahead !== "boolean") {
|
|
338
|
+
console.warn("Invalid typeahead option. Fallback: false.");
|
|
339
|
+
typeahead = false;
|
|
340
|
+
}
|
|
341
|
+
if (typeof wrap !== "boolean") {
|
|
342
|
+
console.warn("Invalid wrap option. Fallback: false.");
|
|
343
|
+
wrap = false;
|
|
344
|
+
}
|
|
345
|
+
this.#settings = {
|
|
346
|
+
navigationOnly,
|
|
347
|
+
noMemory,
|
|
348
|
+
noStart,
|
|
349
|
+
typeahead,
|
|
350
|
+
wrap
|
|
351
|
+
};
|
|
352
|
+
direction && Object.assign(this.#settings, { direction });
|
|
353
|
+
selector && Object.assign(this.#settings, { selector });
|
|
372
354
|
this.#selectorFilter = this.#createSelectorFilter();
|
|
373
355
|
this.#initialize();
|
|
374
356
|
}
|
|
@@ -379,7 +361,7 @@ var RovingTabIndex = class {
|
|
|
379
361
|
this.#isDestroyed = true;
|
|
380
362
|
this.#controller?.abort();
|
|
381
363
|
this.#controller = null;
|
|
382
|
-
|
|
364
|
+
restoreAttributes([...this.#focusables]);
|
|
383
365
|
this.#focusables.clear();
|
|
384
366
|
this.#focusablesByFirstChar.clear();
|
|
385
367
|
this.#container.removeAttribute("data-roving-tabindex-initialized");
|
|
@@ -404,7 +386,7 @@ var RovingTabIndex = class {
|
|
|
404
386
|
return;
|
|
405
387
|
}
|
|
406
388
|
const isFocusable22 = this.#focusables.has(target);
|
|
407
|
-
this.#
|
|
389
|
+
this.#settings.noMemory && !isFocusable22 ? this.#update(null) : isFocusable22 && this.#update(target);
|
|
408
390
|
};
|
|
409
391
|
#onKeyDown = (event) => {
|
|
410
392
|
if (!event.composedPath().includes(this.#container)) {
|
|
@@ -414,7 +396,7 @@ var RovingTabIndex = class {
|
|
|
414
396
|
if (altKey || ctrlKey || metaKey || shiftKey) {
|
|
415
397
|
return;
|
|
416
398
|
}
|
|
417
|
-
const { direction, typeahead, wrap } = this.#
|
|
399
|
+
const { direction, typeahead, wrap } = this.#settings;
|
|
418
400
|
const isBoth = !direction;
|
|
419
401
|
const isHorizontal = direction === "horizontal";
|
|
420
402
|
if (![
|
|
@@ -473,7 +455,7 @@ var RovingTabIndex = class {
|
|
|
473
455
|
const current = new Set(this.#getFocusables());
|
|
474
456
|
for (const focusable of this.#focusables) {
|
|
475
457
|
if (!current.has(focusable)) {
|
|
476
|
-
focusable.isConnected &&
|
|
458
|
+
focusable.isConnected && restoreAttributes([focusable]);
|
|
477
459
|
this.#focusables.delete(focusable);
|
|
478
460
|
this.#focusablesByFirstChar.forEach((focusables) => {
|
|
479
461
|
const index = focusables.indexOf(focusable);
|
|
@@ -481,14 +463,14 @@ var RovingTabIndex = class {
|
|
|
481
463
|
});
|
|
482
464
|
}
|
|
483
465
|
}
|
|
484
|
-
const { navigationOnly, noStart, typeahead } = this.#
|
|
466
|
+
const { navigationOnly, noStart, typeahead } = this.#settings;
|
|
485
467
|
for (const focusable of current) {
|
|
486
468
|
if (this.#focusables.has(focusable)) {
|
|
487
469
|
continue;
|
|
488
470
|
}
|
|
489
471
|
this.#focusables.add(focusable);
|
|
490
472
|
if (!navigationOnly) {
|
|
491
|
-
|
|
473
|
+
saveAttributes([focusable], ["tabindex"]);
|
|
492
474
|
focusable.setAttribute("tabindex", "-1");
|
|
493
475
|
}
|
|
494
476
|
if (!typeahead) {
|
|
@@ -501,7 +483,7 @@ var RovingTabIndex = class {
|
|
|
501
483
|
);
|
|
502
484
|
if (char) {
|
|
503
485
|
keys.add(char);
|
|
504
|
-
|
|
486
|
+
saveAttributes([focusable], ["aria-keyshortcuts"]);
|
|
505
487
|
addTokenToAttribute(focusable, "aria-keyshortcuts", char, {
|
|
506
488
|
caseInsensitive: true
|
|
507
489
|
});
|
|
@@ -525,28 +507,18 @@ var RovingTabIndex = class {
|
|
|
525
507
|
}
|
|
526
508
|
}
|
|
527
509
|
#createSelectorFilter() {
|
|
528
|
-
const { selector } = this.#
|
|
510
|
+
const { selector } = this.#settings;
|
|
529
511
|
return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
|
|
530
512
|
}
|
|
531
513
|
#getFocusables() {
|
|
532
514
|
return getFocusables(this.#container, {
|
|
533
515
|
composed: true,
|
|
534
516
|
filter: this.#selectorFilter,
|
|
535
|
-
skipNegativeTabIndexCheck: !this.#
|
|
517
|
+
skipNegativeTabIndexCheck: !this.#settings.navigationOnly,
|
|
536
518
|
skipVisibilityCheck: true
|
|
537
519
|
});
|
|
538
520
|
}
|
|
539
521
|
};
|
|
540
|
-
function focusElement(element) {
|
|
541
|
-
"focus" in element && typeof element.focus === "function" && element.focus();
|
|
542
|
-
}
|
|
543
|
-
function getActiveElement() {
|
|
544
|
-
let current = document.activeElement;
|
|
545
|
-
while (current?.shadowRoot?.activeElement) {
|
|
546
|
-
current = current.shadowRoot.activeElement;
|
|
547
|
-
}
|
|
548
|
-
return current;
|
|
549
|
-
}
|
|
550
522
|
|
|
551
523
|
// src/index.ts
|
|
552
524
|
var Disclosure = class _Disclosure {
|
|
@@ -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.16
|
|
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.8
|
|
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));
|
|
@@ -276,6 +249,16 @@ function getComposedChildren(node) {
|
|
|
276
249
|
}
|
|
277
250
|
return getChildren(node);
|
|
278
251
|
}
|
|
252
|
+
function focusElement(element) {
|
|
253
|
+
"focus" in element && typeof element.focus === "function" && element.focus();
|
|
254
|
+
}
|
|
255
|
+
function getActiveElement() {
|
|
256
|
+
let current = document.activeElement;
|
|
257
|
+
while (current?.shadowRoot?.activeElement) {
|
|
258
|
+
current = current.shadowRoot.activeElement;
|
|
259
|
+
}
|
|
260
|
+
return current;
|
|
261
|
+
}
|
|
279
262
|
function getChildren(node) {
|
|
280
263
|
const elements = [];
|
|
281
264
|
for (let child = node.firstElementChild; child; child = child.nextElementSibling) {
|
|
@@ -305,60 +288,12 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
305
288
|
return () => {
|
|
306
289
|
};
|
|
307
290
|
}
|
|
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);
|
|
291
|
+
const roving = new RovingTabIndex(container, options);
|
|
357
292
|
return () => roving.destroy();
|
|
358
293
|
}
|
|
359
294
|
var RovingTabIndex = class {
|
|
360
295
|
#container;
|
|
361
|
-
#
|
|
296
|
+
#settings;
|
|
362
297
|
#focusables = /* @__PURE__ */ new Set();
|
|
363
298
|
#focusablesByFirstChar = /* @__PURE__ */ new Map();
|
|
364
299
|
#selectorFilter;
|
|
@@ -366,7 +301,54 @@ var RovingTabIndex = class {
|
|
|
366
301
|
#isDestroyed = false;
|
|
367
302
|
constructor(container, options = {}) {
|
|
368
303
|
this.#container = container;
|
|
369
|
-
|
|
304
|
+
let {
|
|
305
|
+
direction,
|
|
306
|
+
navigationOnly = false,
|
|
307
|
+
noMemory = false,
|
|
308
|
+
noStart = false,
|
|
309
|
+
selector,
|
|
310
|
+
typeahead = false,
|
|
311
|
+
wrap = false
|
|
312
|
+
} = options;
|
|
313
|
+
if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
|
|
314
|
+
console.warn("Invalid direction option. Fallback: both (undefined).");
|
|
315
|
+
direction = void 0;
|
|
316
|
+
}
|
|
317
|
+
if (typeof navigationOnly !== "boolean") {
|
|
318
|
+
console.warn("Invalid navigationOnly option. Fallback: false.");
|
|
319
|
+
navigationOnly = false;
|
|
320
|
+
}
|
|
321
|
+
if (typeof noMemory !== "boolean") {
|
|
322
|
+
console.warn("Invalid noMemory option. Fallback: false.");
|
|
323
|
+
noMemory = false;
|
|
324
|
+
}
|
|
325
|
+
if (typeof noStart !== "boolean") {
|
|
326
|
+
console.warn("Invalid noStart option. Fallback: false.");
|
|
327
|
+
noStart = false;
|
|
328
|
+
}
|
|
329
|
+
if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
|
|
330
|
+
console.warn(
|
|
331
|
+
"Invalid selector. Fallback: all focusable elements (undefined)."
|
|
332
|
+
);
|
|
333
|
+
selector = void 0;
|
|
334
|
+
}
|
|
335
|
+
if (typeof typeahead !== "boolean") {
|
|
336
|
+
console.warn("Invalid typeahead option. Fallback: false.");
|
|
337
|
+
typeahead = false;
|
|
338
|
+
}
|
|
339
|
+
if (typeof wrap !== "boolean") {
|
|
340
|
+
console.warn("Invalid wrap option. Fallback: false.");
|
|
341
|
+
wrap = false;
|
|
342
|
+
}
|
|
343
|
+
this.#settings = {
|
|
344
|
+
navigationOnly,
|
|
345
|
+
noMemory,
|
|
346
|
+
noStart,
|
|
347
|
+
typeahead,
|
|
348
|
+
wrap
|
|
349
|
+
};
|
|
350
|
+
direction && Object.assign(this.#settings, { direction });
|
|
351
|
+
selector && Object.assign(this.#settings, { selector });
|
|
370
352
|
this.#selectorFilter = this.#createSelectorFilter();
|
|
371
353
|
this.#initialize();
|
|
372
354
|
}
|
|
@@ -377,7 +359,7 @@ var RovingTabIndex = class {
|
|
|
377
359
|
this.#isDestroyed = true;
|
|
378
360
|
this.#controller?.abort();
|
|
379
361
|
this.#controller = null;
|
|
380
|
-
|
|
362
|
+
restoreAttributes([...this.#focusables]);
|
|
381
363
|
this.#focusables.clear();
|
|
382
364
|
this.#focusablesByFirstChar.clear();
|
|
383
365
|
this.#container.removeAttribute("data-roving-tabindex-initialized");
|
|
@@ -402,7 +384,7 @@ var RovingTabIndex = class {
|
|
|
402
384
|
return;
|
|
403
385
|
}
|
|
404
386
|
const isFocusable22 = this.#focusables.has(target);
|
|
405
|
-
this.#
|
|
387
|
+
this.#settings.noMemory && !isFocusable22 ? this.#update(null) : isFocusable22 && this.#update(target);
|
|
406
388
|
};
|
|
407
389
|
#onKeyDown = (event) => {
|
|
408
390
|
if (!event.composedPath().includes(this.#container)) {
|
|
@@ -412,7 +394,7 @@ var RovingTabIndex = class {
|
|
|
412
394
|
if (altKey || ctrlKey || metaKey || shiftKey) {
|
|
413
395
|
return;
|
|
414
396
|
}
|
|
415
|
-
const { direction, typeahead, wrap } = this.#
|
|
397
|
+
const { direction, typeahead, wrap } = this.#settings;
|
|
416
398
|
const isBoth = !direction;
|
|
417
399
|
const isHorizontal = direction === "horizontal";
|
|
418
400
|
if (![
|
|
@@ -471,7 +453,7 @@ var RovingTabIndex = class {
|
|
|
471
453
|
const current = new Set(this.#getFocusables());
|
|
472
454
|
for (const focusable of this.#focusables) {
|
|
473
455
|
if (!current.has(focusable)) {
|
|
474
|
-
focusable.isConnected &&
|
|
456
|
+
focusable.isConnected && restoreAttributes([focusable]);
|
|
475
457
|
this.#focusables.delete(focusable);
|
|
476
458
|
this.#focusablesByFirstChar.forEach((focusables) => {
|
|
477
459
|
const index = focusables.indexOf(focusable);
|
|
@@ -479,14 +461,14 @@ var RovingTabIndex = class {
|
|
|
479
461
|
});
|
|
480
462
|
}
|
|
481
463
|
}
|
|
482
|
-
const { navigationOnly, noStart, typeahead } = this.#
|
|
464
|
+
const { navigationOnly, noStart, typeahead } = this.#settings;
|
|
483
465
|
for (const focusable of current) {
|
|
484
466
|
if (this.#focusables.has(focusable)) {
|
|
485
467
|
continue;
|
|
486
468
|
}
|
|
487
469
|
this.#focusables.add(focusable);
|
|
488
470
|
if (!navigationOnly) {
|
|
489
|
-
|
|
471
|
+
saveAttributes([focusable], ["tabindex"]);
|
|
490
472
|
focusable.setAttribute("tabindex", "-1");
|
|
491
473
|
}
|
|
492
474
|
if (!typeahead) {
|
|
@@ -499,7 +481,7 @@ var RovingTabIndex = class {
|
|
|
499
481
|
);
|
|
500
482
|
if (char) {
|
|
501
483
|
keys.add(char);
|
|
502
|
-
|
|
484
|
+
saveAttributes([focusable], ["aria-keyshortcuts"]);
|
|
503
485
|
addTokenToAttribute(focusable, "aria-keyshortcuts", char, {
|
|
504
486
|
caseInsensitive: true
|
|
505
487
|
});
|
|
@@ -523,28 +505,18 @@ var RovingTabIndex = class {
|
|
|
523
505
|
}
|
|
524
506
|
}
|
|
525
507
|
#createSelectorFilter() {
|
|
526
|
-
const { selector } = this.#
|
|
508
|
+
const { selector } = this.#settings;
|
|
527
509
|
return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
|
|
528
510
|
}
|
|
529
511
|
#getFocusables() {
|
|
530
512
|
return getFocusables(this.#container, {
|
|
531
513
|
composed: true,
|
|
532
514
|
filter: this.#selectorFilter,
|
|
533
|
-
skipNegativeTabIndexCheck: !this.#
|
|
515
|
+
skipNegativeTabIndexCheck: !this.#settings.navigationOnly,
|
|
534
516
|
skipVisibilityCheck: true
|
|
535
517
|
});
|
|
536
518
|
}
|
|
537
519
|
};
|
|
538
|
-
function focusElement(element) {
|
|
539
|
-
"focus" in element && typeof element.focus === "function" && element.focus();
|
|
540
|
-
}
|
|
541
|
-
function getActiveElement() {
|
|
542
|
-
let current = document.activeElement;
|
|
543
|
-
while (current?.shadowRoot?.activeElement) {
|
|
544
|
-
current = current.shadowRoot.activeElement;
|
|
545
|
-
}
|
|
546
|
-
return current;
|
|
547
|
-
}
|
|
548
520
|
|
|
549
521
|
// src/index.ts
|
|
550
522
|
var Disclosure = class _Disclosure {
|
|
@@ -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.16
|
|
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.8
|
|
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.16",
|
|
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.8",
|
|
48
47
|
"bun-types": "latest",
|
|
49
48
|
"tsup": "^8.0.0",
|
|
50
49
|
"typescript": "^5.6.0",
|