@y14e/disclosure-css 1.3.8 → 1.3.9
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 +68 -107
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +68 -107
- package/package.json +2 -3
package/README.md
CHANGED
|
@@ -10,14 +10,14 @@ npm i @y14e/disclosure-css
|
|
|
10
10
|
|
|
11
11
|
```ts
|
|
12
12
|
// npm
|
|
13
|
-
import Disclosure from '@y14e/disclosure-css@1.3.
|
|
13
|
+
import Disclosure from '@y14e/disclosure-css@1.3.9';
|
|
14
14
|
|
|
15
15
|
// CDNs
|
|
16
|
-
import Disclosure from 'https://esm.sh/@y14e/disclosure-css@1.3.
|
|
16
|
+
import Disclosure from 'https://esm.sh/@y14e/disclosure-css@1.3.9';
|
|
17
17
|
// or
|
|
18
|
-
import Disclosure from 'https://cdn.jsdelivr.net/npm/@y14e/disclosure-css@1.3.
|
|
18
|
+
import Disclosure from 'https://cdn.jsdelivr.net/npm/@y14e/disclosure-css@1.3.9/+esm';
|
|
19
19
|
// or
|
|
20
|
-
import Disclosure from 'https://esm.unpkg.com/@y14e/disclosure-css@1.3.
|
|
20
|
+
import Disclosure from 'https://esm.unpkg.com/@y14e/disclosure-css@1.3.9';
|
|
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
|
}
|
|
@@ -676,7 +648,7 @@ function isFocusable2(element) {
|
|
|
676
648
|
* WAI-ARIA compliant disclosure pattern implementation in TypeScript.
|
|
677
649
|
* Using the <details> and <summary> element.
|
|
678
650
|
*
|
|
679
|
-
* @version 1.3.
|
|
651
|
+
* @version 1.3.9
|
|
680
652
|
* @author Yusuke Kamiyamane
|
|
681
653
|
* @license MIT
|
|
682
654
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -684,24 +656,13 @@ function isFocusable2(element) {
|
|
|
684
656
|
*/
|
|
685
657
|
/*! Bundled license information:
|
|
686
658
|
|
|
687
|
-
@y14e/attributes-utils/dist/index.js:
|
|
688
|
-
(**
|
|
689
|
-
* Attributes Utils
|
|
690
|
-
*
|
|
691
|
-
* @version 1.1.2
|
|
692
|
-
* @author Yusuke Kamiyamane
|
|
693
|
-
* @license MIT
|
|
694
|
-
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
695
|
-
* @see {@link https://github.com/y14e/attributes-utils}
|
|
696
|
-
*)
|
|
697
|
-
|
|
698
659
|
@y14e/roving-tabindex/dist/index.js:
|
|
699
660
|
(**
|
|
700
661
|
* Roving Tabindex
|
|
701
662
|
* Lightweight roving tabindex utility with fully focus management.
|
|
702
663
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
703
664
|
*
|
|
704
|
-
* @version 3.0.
|
|
665
|
+
* @version 3.0.7
|
|
705
666
|
* @author Yusuke Kamiyamane
|
|
706
667
|
* @license MIT
|
|
707
668
|
* @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
|
}
|
|
@@ -674,7 +646,7 @@ function isFocusable2(element) {
|
|
|
674
646
|
* WAI-ARIA compliant disclosure pattern implementation in TypeScript.
|
|
675
647
|
* Using the <details> and <summary> element.
|
|
676
648
|
*
|
|
677
|
-
* @version 1.3.
|
|
649
|
+
* @version 1.3.9
|
|
678
650
|
* @author Yusuke Kamiyamane
|
|
679
651
|
* @license MIT
|
|
680
652
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -682,24 +654,13 @@ function isFocusable2(element) {
|
|
|
682
654
|
*/
|
|
683
655
|
/*! Bundled license information:
|
|
684
656
|
|
|
685
|
-
@y14e/attributes-utils/dist/index.js:
|
|
686
|
-
(**
|
|
687
|
-
* Attributes Utils
|
|
688
|
-
*
|
|
689
|
-
* @version 1.1.2
|
|
690
|
-
* @author Yusuke Kamiyamane
|
|
691
|
-
* @license MIT
|
|
692
|
-
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
693
|
-
* @see {@link https://github.com/y14e/attributes-utils}
|
|
694
|
-
*)
|
|
695
|
-
|
|
696
657
|
@y14e/roving-tabindex/dist/index.js:
|
|
697
658
|
(**
|
|
698
659
|
* Roving Tabindex
|
|
699
660
|
* Lightweight roving tabindex utility with fully focus management.
|
|
700
661
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
701
662
|
*
|
|
702
|
-
* @version 3.0.
|
|
663
|
+
* @version 3.0.7
|
|
703
664
|
* @author Yusuke Kamiyamane
|
|
704
665
|
* @license MIT
|
|
705
666
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@y14e/disclosure-css",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.9",
|
|
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-css#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"
|