@y14e/tabs 1.3.7 → 1.3.10
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 +15 -2
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +15 -2
- 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) {
|
|
@@ -354,8 +356,10 @@ var Tabs = class _Tabs {
|
|
|
354
356
|
});
|
|
355
357
|
saveAttributes(this.#tabElements, [
|
|
356
358
|
"aria-controls",
|
|
359
|
+
"aria-selected",
|
|
357
360
|
"id",
|
|
358
361
|
"role",
|
|
362
|
+
"style",
|
|
359
363
|
"tabindex"
|
|
360
364
|
]);
|
|
361
365
|
this.#tabElements.forEach((tab, i) => {
|
|
@@ -389,8 +393,10 @@ var Tabs = class _Tabs {
|
|
|
389
393
|
}
|
|
390
394
|
addTokenToAttribute(panel, "aria-labelledby", tab.id);
|
|
391
395
|
tab.addEventListener("click", this.#onTabClick, { signal });
|
|
396
|
+
tab.addEventListener("focus", this.#onTabFocus, { signal });
|
|
392
397
|
tab.addEventListener("keydown", this.#onTabKeyDown, { signal });
|
|
393
398
|
});
|
|
399
|
+
saveAttributes(this.#indicatorElements, ["style"]);
|
|
394
400
|
this.#indicatorElements.forEach((indicator) => {
|
|
395
401
|
indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
|
|
396
402
|
const { style } = indicator;
|
|
@@ -417,6 +423,13 @@ var Tabs = class _Tabs {
|
|
|
417
423
|
}
|
|
418
424
|
this.activate(tab);
|
|
419
425
|
};
|
|
426
|
+
#onTabFocus = (event) => {
|
|
427
|
+
const tab = event.currentTarget;
|
|
428
|
+
if (!(tab instanceof HTMLElement)) {
|
|
429
|
+
return;
|
|
430
|
+
}
|
|
431
|
+
this.#isAvoidedTab(tab) && tab.blur();
|
|
432
|
+
};
|
|
420
433
|
#onTabKeyDown = (event) => {
|
|
421
434
|
const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
|
|
422
435
|
if (altKey || ctrlKey || metaKey || shiftKey) {
|
|
@@ -630,7 +643,7 @@ function isFocusable(element) {
|
|
|
630
643
|
* Tabs
|
|
631
644
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
632
645
|
*
|
|
633
|
-
* @version 1.3.
|
|
646
|
+
* @version 1.3.10
|
|
634
647
|
* @author Yusuke Kamiyamane
|
|
635
648
|
* @license MIT
|
|
636
649
|
* @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) {
|
|
@@ -352,8 +354,10 @@ var Tabs = class _Tabs {
|
|
|
352
354
|
});
|
|
353
355
|
saveAttributes(this.#tabElements, [
|
|
354
356
|
"aria-controls",
|
|
357
|
+
"aria-selected",
|
|
355
358
|
"id",
|
|
356
359
|
"role",
|
|
360
|
+
"style",
|
|
357
361
|
"tabindex"
|
|
358
362
|
]);
|
|
359
363
|
this.#tabElements.forEach((tab, i) => {
|
|
@@ -387,8 +391,10 @@ var Tabs = class _Tabs {
|
|
|
387
391
|
}
|
|
388
392
|
addTokenToAttribute(panel, "aria-labelledby", tab.id);
|
|
389
393
|
tab.addEventListener("click", this.#onTabClick, { signal });
|
|
394
|
+
tab.addEventListener("focus", this.#onTabFocus, { signal });
|
|
390
395
|
tab.addEventListener("keydown", this.#onTabKeyDown, { signal });
|
|
391
396
|
});
|
|
397
|
+
saveAttributes(this.#indicatorElements, ["style"]);
|
|
392
398
|
this.#indicatorElements.forEach((indicator) => {
|
|
393
399
|
indicator.closest(this.#settings.selector.list)?.style.setProperty("position", "relative");
|
|
394
400
|
const { style } = indicator;
|
|
@@ -415,6 +421,13 @@ var Tabs = class _Tabs {
|
|
|
415
421
|
}
|
|
416
422
|
this.activate(tab);
|
|
417
423
|
};
|
|
424
|
+
#onTabFocus = (event) => {
|
|
425
|
+
const tab = event.currentTarget;
|
|
426
|
+
if (!(tab instanceof HTMLElement)) {
|
|
427
|
+
return;
|
|
428
|
+
}
|
|
429
|
+
this.#isAvoidedTab(tab) && tab.blur();
|
|
430
|
+
};
|
|
418
431
|
#onTabKeyDown = (event) => {
|
|
419
432
|
const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
|
|
420
433
|
if (altKey || ctrlKey || metaKey || shiftKey) {
|
|
@@ -628,7 +641,7 @@ function isFocusable(element) {
|
|
|
628
641
|
* Tabs
|
|
629
642
|
* WAI-ARIA compliant tabs pattern implementation in TypeScript.
|
|
630
643
|
*
|
|
631
|
-
* @version 1.3.
|
|
644
|
+
* @version 1.3.10
|
|
632
645
|
* @author Yusuke Kamiyamane
|
|
633
646
|
* @license MIT
|
|
634
647
|
* @copyright Copyright (c) Yusuke Kamiyamane
|