@y14e/tabs 1.3.8 → 1.3.11
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/dist/index.cjs +9 -8
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +9 -8
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -327,6 +327,7 @@ var Tabs = class _Tabs {
|
|
|
327
327
|
restoreAttributes([
|
|
328
328
|
...this.#listElements,
|
|
329
329
|
...this.#tabElements,
|
|
330
|
+
...this.#indicatorElements,
|
|
330
331
|
...this.#panelElements
|
|
331
332
|
]);
|
|
332
333
|
this.#listElements.length = 0;
|
|
@@ -341,7 +342,8 @@ var Tabs = class _Tabs {
|
|
|
341
342
|
saveAttributes(this.#listElements, [
|
|
342
343
|
"aria-hidden",
|
|
343
344
|
"aria-orientation",
|
|
344
|
-
"role"
|
|
345
|
+
"role",
|
|
346
|
+
"style"
|
|
345
347
|
]);
|
|
346
348
|
this.#listElements.forEach((list, i) => {
|
|
347
349
|
if (this.#settings.avoidDuplicates && i) {
|
|
@@ -356,6 +358,7 @@ var Tabs = class _Tabs {
|
|
|
356
358
|
"aria-controls",
|
|
357
359
|
"id",
|
|
358
360
|
"role",
|
|
361
|
+
"style",
|
|
359
362
|
"tabindex"
|
|
360
363
|
]);
|
|
361
364
|
this.#tabElements.forEach((tab, i) => {
|
|
@@ -389,9 +392,10 @@ var Tabs = class _Tabs {
|
|
|
389
392
|
}
|
|
390
393
|
addTokenToAttribute(panel, "aria-labelledby", tab.id);
|
|
391
394
|
tab.addEventListener("click", this.#onTabClick, { signal });
|
|
392
|
-
tab.addEventListener("
|
|
395
|
+
tab.addEventListener("focus", this.#onTabFocus, { signal });
|
|
393
396
|
tab.addEventListener("keydown", this.#onTabKeyDown, { signal });
|
|
394
397
|
});
|
|
398
|
+
saveAttributes(this.#indicatorElements, ["style"]);
|
|
395
399
|
this.#indicatorElements.forEach((indicator) => {
|
|
396
400
|
indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
|
|
397
401
|
const { style } = indicator;
|
|
@@ -418,15 +422,12 @@ var Tabs = class _Tabs {
|
|
|
418
422
|
}
|
|
419
423
|
this.activate(tab);
|
|
420
424
|
};
|
|
421
|
-
#
|
|
425
|
+
#onTabFocus = (event) => {
|
|
422
426
|
const tab = event.currentTarget;
|
|
423
427
|
if (!(tab instanceof HTMLElement)) {
|
|
424
428
|
return;
|
|
425
429
|
}
|
|
426
|
-
|
|
427
|
-
const active = getActiveElement();
|
|
428
|
-
active && "blur" in active && typeof active.blur === "function" && active.blur();
|
|
429
|
-
}
|
|
430
|
+
this.#isAvoidedTab(tab) && tab.blur();
|
|
430
431
|
};
|
|
431
432
|
#onTabKeyDown = (event) => {
|
|
432
433
|
const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
|
|
@@ -641,7 +642,7 @@ function isFocusable(element) {
|
|
|
641
642
|
* Tabs
|
|
642
643
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
643
644
|
*
|
|
644
|
-
* @version 1.3.
|
|
645
|
+
* @version 1.3.11
|
|
645
646
|
* @author Yusuke Kamiyamane
|
|
646
647
|
* @license MIT
|
|
647
648
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -325,6 +325,7 @@ var Tabs = class _Tabs {
|
|
|
325
325
|
restoreAttributes([
|
|
326
326
|
...this.#listElements,
|
|
327
327
|
...this.#tabElements,
|
|
328
|
+
...this.#indicatorElements,
|
|
328
329
|
...this.#panelElements
|
|
329
330
|
]);
|
|
330
331
|
this.#listElements.length = 0;
|
|
@@ -339,7 +340,8 @@ var Tabs = class _Tabs {
|
|
|
339
340
|
saveAttributes(this.#listElements, [
|
|
340
341
|
"aria-hidden",
|
|
341
342
|
"aria-orientation",
|
|
342
|
-
"role"
|
|
343
|
+
"role",
|
|
344
|
+
"style"
|
|
343
345
|
]);
|
|
344
346
|
this.#listElements.forEach((list, i) => {
|
|
345
347
|
if (this.#settings.avoidDuplicates && i) {
|
|
@@ -354,6 +356,7 @@ var Tabs = class _Tabs {
|
|
|
354
356
|
"aria-controls",
|
|
355
357
|
"id",
|
|
356
358
|
"role",
|
|
359
|
+
"style",
|
|
357
360
|
"tabindex"
|
|
358
361
|
]);
|
|
359
362
|
this.#tabElements.forEach((tab, i) => {
|
|
@@ -387,9 +390,10 @@ var Tabs = class _Tabs {
|
|
|
387
390
|
}
|
|
388
391
|
addTokenToAttribute(panel, "aria-labelledby", tab.id);
|
|
389
392
|
tab.addEventListener("click", this.#onTabClick, { signal });
|
|
390
|
-
tab.addEventListener("
|
|
393
|
+
tab.addEventListener("focus", this.#onTabFocus, { signal });
|
|
391
394
|
tab.addEventListener("keydown", this.#onTabKeyDown, { signal });
|
|
392
395
|
});
|
|
396
|
+
saveAttributes(this.#indicatorElements, ["style"]);
|
|
393
397
|
this.#indicatorElements.forEach((indicator) => {
|
|
394
398
|
indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
|
|
395
399
|
const { style } = indicator;
|
|
@@ -416,15 +420,12 @@ var Tabs = class _Tabs {
|
|
|
416
420
|
}
|
|
417
421
|
this.activate(tab);
|
|
418
422
|
};
|
|
419
|
-
#
|
|
423
|
+
#onTabFocus = (event) => {
|
|
420
424
|
const tab = event.currentTarget;
|
|
421
425
|
if (!(tab instanceof HTMLElement)) {
|
|
422
426
|
return;
|
|
423
427
|
}
|
|
424
|
-
|
|
425
|
-
const active = getActiveElement();
|
|
426
|
-
active && "blur" in active && typeof active.blur === "function" && active.blur();
|
|
427
|
-
}
|
|
428
|
+
this.#isAvoidedTab(tab) && tab.blur();
|
|
428
429
|
};
|
|
429
430
|
#onTabKeyDown = (event) => {
|
|
430
431
|
const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
|
|
@@ -639,7 +640,7 @@ function isFocusable(element) {
|
|
|
639
640
|
* Tabs
|
|
640
641
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
641
642
|
*
|
|
642
|
-
* @version 1.3.
|
|
643
|
+
* @version 1.3.11
|
|
643
644
|
* @author Yusuke Kamiyamane
|
|
644
645
|
* @license MIT
|
|
645
646
|
* @copyright Copyright (c) Yusuke Kamiyamane
|