@y14e/tabs 2.0.0 → 2.0.1
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 +74 -135
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +74 -135
- package/package.json +2 -3
package/README.md
CHANGED
|
@@ -10,14 +10,14 @@ npm i @y14e/tabs
|
|
|
10
10
|
|
|
11
11
|
```ts
|
|
12
12
|
// npm
|
|
13
|
-
import Tabs from '@y14e/tabs@2.0.
|
|
13
|
+
import Tabs from '@y14e/tabs@2.0.1';
|
|
14
14
|
|
|
15
15
|
// CDNs
|
|
16
|
-
import Tabs from 'https://esm.sh/@y14e/tabs@2.0.
|
|
16
|
+
import Tabs from 'https://esm.sh/@y14e/tabs@2.0.1';
|
|
17
17
|
// or
|
|
18
|
-
import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.
|
|
18
|
+
import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@2.0.1/+esm';
|
|
19
19
|
// or
|
|
20
|
-
import Tabs from 'https://esm.unpkg.com/@y14e/tabs@2.0.
|
|
20
|
+
import Tabs from 'https://esm.unpkg.com/@y14e/tabs@2.0.1';
|
|
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
|
}
|
|
@@ -1145,7 +1095,7 @@ function isFocusable2(element) {
|
|
|
1145
1095
|
* Tabs
|
|
1146
1096
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
1147
1097
|
*
|
|
1148
|
-
* @version 2.0.
|
|
1098
|
+
* @version 2.0.1
|
|
1149
1099
|
* @author Yusuke Kamiyamane
|
|
1150
1100
|
* @license MIT
|
|
1151
1101
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1153,17 +1103,6 @@ function isFocusable2(element) {
|
|
|
1153
1103
|
*/
|
|
1154
1104
|
/*! Bundled license information:
|
|
1155
1105
|
|
|
1156
|
-
@y14e/attributes-utils/dist/index.js:
|
|
1157
|
-
(**
|
|
1158
|
-
* Attributes Utils
|
|
1159
|
-
*
|
|
1160
|
-
* @version 1.1.2
|
|
1161
|
-
* @author Yusuke Kamiyamane
|
|
1162
|
-
* @license MIT
|
|
1163
|
-
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
1164
|
-
* @see {@link https://github.com/y14e/attributes-utils}
|
|
1165
|
-
*)
|
|
1166
|
-
|
|
1167
1106
|
@y14e/button/dist/index.js:
|
|
1168
1107
|
(**
|
|
1169
1108
|
* Button
|
|
@@ -1181,7 +1120,7 @@ function isFocusable2(element) {
|
|
|
1181
1120
|
* Lightweight roving tabindex utility with fully focus management.
|
|
1182
1121
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
1183
1122
|
*
|
|
1184
|
-
* @version 3.0.
|
|
1123
|
+
* @version 3.0.7
|
|
1185
1124
|
* @author Yusuke Kamiyamane
|
|
1186
1125
|
* @license MIT
|
|
1187
1126
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.ts
CHANGED
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
|
}
|
|
@@ -1143,7 +1093,7 @@ function isFocusable2(element) {
|
|
|
1143
1093
|
* Tabs
|
|
1144
1094
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
1145
1095
|
*
|
|
1146
|
-
* @version 2.0.
|
|
1096
|
+
* @version 2.0.1
|
|
1147
1097
|
* @author Yusuke Kamiyamane
|
|
1148
1098
|
* @license MIT
|
|
1149
1099
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -1151,17 +1101,6 @@ function isFocusable2(element) {
|
|
|
1151
1101
|
*/
|
|
1152
1102
|
/*! Bundled license information:
|
|
1153
1103
|
|
|
1154
|
-
@y14e/attributes-utils/dist/index.js:
|
|
1155
|
-
(**
|
|
1156
|
-
* Attributes Utils
|
|
1157
|
-
*
|
|
1158
|
-
* @version 1.1.2
|
|
1159
|
-
* @author Yusuke Kamiyamane
|
|
1160
|
-
* @license MIT
|
|
1161
|
-
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
1162
|
-
* @see {@link https://github.com/y14e/attributes-utils}
|
|
1163
|
-
*)
|
|
1164
|
-
|
|
1165
1104
|
@y14e/button/dist/index.js:
|
|
1166
1105
|
(**
|
|
1167
1106
|
* Button
|
|
@@ -1179,7 +1118,7 @@ function isFocusable2(element) {
|
|
|
1179
1118
|
* Lightweight roving tabindex utility with fully focus management.
|
|
1180
1119
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
1181
1120
|
*
|
|
1182
|
-
* @version 3.0.
|
|
1121
|
+
* @version 3.0.7
|
|
1183
1122
|
* @author Yusuke Kamiyamane
|
|
1184
1123
|
* @license MIT
|
|
1185
1124
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@y14e/tabs",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -42,9 +42,8 @@
|
|
|
42
42
|
},
|
|
43
43
|
"homepage": "https://github.com/y14e/tabs#readme",
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@y14e/attributes-utils": "^1.1.2",
|
|
46
45
|
"@y14e/button": "^1.0.2",
|
|
47
|
-
"@y14e/roving-tabindex": "^3.0.
|
|
46
|
+
"@y14e/roving-tabindex": "^3.0.7",
|
|
48
47
|
"bun-types": "latest",
|
|
49
48
|
"tsup": "^8.0.0",
|
|
50
49
|
"typescript": "^5.6.0",
|