@y14e/disclosure-css 1.3.11 → 1.3.12
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.bundle.cjs +30 -24
- package/dist/index.bundle.js +30 -24
- package/dist/index.cjs +9 -9
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +9 -9
- package/package.json +2 -2
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.12';
|
|
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.12';
|
|
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.12/+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.12';
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## Usage
|
package/dist/index.bundle.cjs
CHANGED
|
@@ -294,8 +294,14 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
294
294
|
return () => {
|
|
295
295
|
};
|
|
296
296
|
}
|
|
297
|
-
|
|
298
|
-
|
|
297
|
+
try {
|
|
298
|
+
const roving = new RovingTabIndex(container, options);
|
|
299
|
+
return () => roving.destroy();
|
|
300
|
+
} catch (error) {
|
|
301
|
+
error instanceof Error && console.warn(error.message || error);
|
|
302
|
+
return () => {
|
|
303
|
+
};
|
|
304
|
+
}
|
|
299
305
|
}
|
|
300
306
|
var RovingTabIndex = class _RovingTabIndex {
|
|
301
307
|
static #initialized = /* @__PURE__ */ new Set();
|
|
@@ -371,28 +377,28 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
371
377
|
this.#focusablesByFirstChar.clear();
|
|
372
378
|
}
|
|
373
379
|
#initialize() {
|
|
374
|
-
this.#update(
|
|
380
|
+
this.#update(getActiveElement());
|
|
375
381
|
if (!(this.#container instanceof HTMLElement)) {
|
|
376
382
|
return;
|
|
377
383
|
}
|
|
378
384
|
this.#controller = new AbortController();
|
|
379
385
|
const { signal } = this.#controller;
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
});
|
|
384
|
-
this.#container.addEventListener("keydown", this.#onKeyDown, {
|
|
385
|
-
capture: true,
|
|
386
|
-
signal
|
|
387
|
-
});
|
|
386
|
+
document.addEventListener("focusin", this.#onFocusIn, { signal });
|
|
387
|
+
this.#settings.noMemory && document.addEventListener("focusout", this.#onFocusOut, { signal });
|
|
388
|
+
this.#container.addEventListener("keydown", this.#onKeyDown, { signal });
|
|
388
389
|
}
|
|
389
390
|
#onFocusIn = (event) => {
|
|
390
391
|
const { target } = event;
|
|
391
392
|
if (!(target instanceof Element)) {
|
|
392
393
|
return;
|
|
393
394
|
}
|
|
394
|
-
const
|
|
395
|
-
this.#settings.noMemory && !
|
|
395
|
+
const isFocusable2 = this.#focusables.has(target);
|
|
396
|
+
this.#settings.noMemory && !isFocusable2 ? this.#update() : isFocusable2 && this.#update(target);
|
|
397
|
+
};
|
|
398
|
+
#onFocusOut = (event) => {
|
|
399
|
+
if (!event.relatedTarget) {
|
|
400
|
+
this.#update();
|
|
401
|
+
}
|
|
396
402
|
};
|
|
397
403
|
#onKeyDown = (event) => {
|
|
398
404
|
const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
|
|
@@ -579,7 +585,7 @@ var Disclosure = class {
|
|
|
579
585
|
if (!summary || !content) {
|
|
580
586
|
return;
|
|
581
587
|
}
|
|
582
|
-
const binding = createBinding(details, summary, content);
|
|
588
|
+
const binding = this.#createBinding(details, summary, content);
|
|
583
589
|
this.#bindings.set(details, binding);
|
|
584
590
|
this.#bindings.set(summary, binding);
|
|
585
591
|
this.#bindings.set(content, binding);
|
|
@@ -625,7 +631,7 @@ var Disclosure = class {
|
|
|
625
631
|
"style",
|
|
626
632
|
"tabindex"
|
|
627
633
|
]);
|
|
628
|
-
this.#summaryElements.filter((summary) => !
|
|
634
|
+
this.#summaryElements.filter((summary) => !this.#isFocusable(summary)).forEach((summary) => {
|
|
629
635
|
summary.setAttribute("aria-disabled", "true");
|
|
630
636
|
summary.setAttribute("tabindex", "-1");
|
|
631
637
|
summary.style.setProperty("pointer-events", "none");
|
|
@@ -643,19 +649,19 @@ var Disclosure = class {
|
|
|
643
649
|
details.open = isOpen;
|
|
644
650
|
}
|
|
645
651
|
}
|
|
652
|
+
#createBinding(details, summary, content) {
|
|
653
|
+
return { details, summary, content };
|
|
654
|
+
}
|
|
655
|
+
#isFocusable(element) {
|
|
656
|
+
return element.tabIndex >= 0;
|
|
657
|
+
}
|
|
646
658
|
};
|
|
647
|
-
function createBinding(details, summary, content) {
|
|
648
|
-
return { details, summary, content };
|
|
649
|
-
}
|
|
650
|
-
function isFocusable2(element) {
|
|
651
|
-
return element.tabIndex >= 0;
|
|
652
|
-
}
|
|
653
659
|
/**
|
|
654
660
|
* Disclosure (CSS Animation)
|
|
655
661
|
* WAI-ARIA compliant disclosure pattern implementation in TypeScript.
|
|
656
662
|
* Using the <details> and <summary> element.
|
|
657
663
|
*
|
|
658
|
-
* @version 1.3.
|
|
664
|
+
* @version 1.3.12
|
|
659
665
|
* @author Yusuke Kamiyamane
|
|
660
666
|
* @license MIT
|
|
661
667
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -680,7 +686,7 @@ power-focusable/dist/index.js:
|
|
|
680
686
|
* High-precision focus management utility with full composed tree support.
|
|
681
687
|
* Handles complex focus rules including tabindex ordering, radio groups, inert.
|
|
682
688
|
*
|
|
683
|
-
* @version 4.3.
|
|
689
|
+
* @version 4.3.5
|
|
684
690
|
* @author Yusuke Kamiyamane
|
|
685
691
|
* @license MIT
|
|
686
692
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -693,7 +699,7 @@ power-focusable/dist/index.js:
|
|
|
693
699
|
* Lightweight roving tabindex utility with fully focus management.
|
|
694
700
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
695
701
|
*
|
|
696
|
-
* @version 3.
|
|
702
|
+
* @version 3.1.2
|
|
697
703
|
* @author Yusuke Kamiyamane
|
|
698
704
|
* @license MIT
|
|
699
705
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.bundle.js
CHANGED
|
@@ -292,8 +292,14 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
292
292
|
return () => {
|
|
293
293
|
};
|
|
294
294
|
}
|
|
295
|
-
|
|
296
|
-
|
|
295
|
+
try {
|
|
296
|
+
const roving = new RovingTabIndex(container, options);
|
|
297
|
+
return () => roving.destroy();
|
|
298
|
+
} catch (error) {
|
|
299
|
+
error instanceof Error && console.warn(error.message || error);
|
|
300
|
+
return () => {
|
|
301
|
+
};
|
|
302
|
+
}
|
|
297
303
|
}
|
|
298
304
|
var RovingTabIndex = class _RovingTabIndex {
|
|
299
305
|
static #initialized = /* @__PURE__ */ new Set();
|
|
@@ -369,28 +375,28 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
369
375
|
this.#focusablesByFirstChar.clear();
|
|
370
376
|
}
|
|
371
377
|
#initialize() {
|
|
372
|
-
this.#update(
|
|
378
|
+
this.#update(getActiveElement());
|
|
373
379
|
if (!(this.#container instanceof HTMLElement)) {
|
|
374
380
|
return;
|
|
375
381
|
}
|
|
376
382
|
this.#controller = new AbortController();
|
|
377
383
|
const { signal } = this.#controller;
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
});
|
|
382
|
-
this.#container.addEventListener("keydown", this.#onKeyDown, {
|
|
383
|
-
capture: true,
|
|
384
|
-
signal
|
|
385
|
-
});
|
|
384
|
+
document.addEventListener("focusin", this.#onFocusIn, { signal });
|
|
385
|
+
this.#settings.noMemory && document.addEventListener("focusout", this.#onFocusOut, { signal });
|
|
386
|
+
this.#container.addEventListener("keydown", this.#onKeyDown, { signal });
|
|
386
387
|
}
|
|
387
388
|
#onFocusIn = (event) => {
|
|
388
389
|
const { target } = event;
|
|
389
390
|
if (!(target instanceof Element)) {
|
|
390
391
|
return;
|
|
391
392
|
}
|
|
392
|
-
const
|
|
393
|
-
this.#settings.noMemory && !
|
|
393
|
+
const isFocusable2 = this.#focusables.has(target);
|
|
394
|
+
this.#settings.noMemory && !isFocusable2 ? this.#update() : isFocusable2 && this.#update(target);
|
|
395
|
+
};
|
|
396
|
+
#onFocusOut = (event) => {
|
|
397
|
+
if (!event.relatedTarget) {
|
|
398
|
+
this.#update();
|
|
399
|
+
}
|
|
394
400
|
};
|
|
395
401
|
#onKeyDown = (event) => {
|
|
396
402
|
const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
|
|
@@ -577,7 +583,7 @@ var Disclosure = class {
|
|
|
577
583
|
if (!summary || !content) {
|
|
578
584
|
return;
|
|
579
585
|
}
|
|
580
|
-
const binding = createBinding(details, summary, content);
|
|
586
|
+
const binding = this.#createBinding(details, summary, content);
|
|
581
587
|
this.#bindings.set(details, binding);
|
|
582
588
|
this.#bindings.set(summary, binding);
|
|
583
589
|
this.#bindings.set(content, binding);
|
|
@@ -623,7 +629,7 @@ var Disclosure = class {
|
|
|
623
629
|
"style",
|
|
624
630
|
"tabindex"
|
|
625
631
|
]);
|
|
626
|
-
this.#summaryElements.filter((summary) => !
|
|
632
|
+
this.#summaryElements.filter((summary) => !this.#isFocusable(summary)).forEach((summary) => {
|
|
627
633
|
summary.setAttribute("aria-disabled", "true");
|
|
628
634
|
summary.setAttribute("tabindex", "-1");
|
|
629
635
|
summary.style.setProperty("pointer-events", "none");
|
|
@@ -641,19 +647,19 @@ var Disclosure = class {
|
|
|
641
647
|
details.open = isOpen;
|
|
642
648
|
}
|
|
643
649
|
}
|
|
650
|
+
#createBinding(details, summary, content) {
|
|
651
|
+
return { details, summary, content };
|
|
652
|
+
}
|
|
653
|
+
#isFocusable(element) {
|
|
654
|
+
return element.tabIndex >= 0;
|
|
655
|
+
}
|
|
644
656
|
};
|
|
645
|
-
function createBinding(details, summary, content) {
|
|
646
|
-
return { details, summary, content };
|
|
647
|
-
}
|
|
648
|
-
function isFocusable2(element) {
|
|
649
|
-
return element.tabIndex >= 0;
|
|
650
|
-
}
|
|
651
657
|
/**
|
|
652
658
|
* Disclosure (CSS Animation)
|
|
653
659
|
* WAI-ARIA compliant disclosure pattern implementation in TypeScript.
|
|
654
660
|
* Using the <details> and <summary> element.
|
|
655
661
|
*
|
|
656
|
-
* @version 1.3.
|
|
662
|
+
* @version 1.3.12
|
|
657
663
|
* @author Yusuke Kamiyamane
|
|
658
664
|
* @license MIT
|
|
659
665
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -678,7 +684,7 @@ power-focusable/dist/index.js:
|
|
|
678
684
|
* High-precision focus management utility with full composed tree support.
|
|
679
685
|
* Handles complex focus rules including tabindex ordering, radio groups, inert.
|
|
680
686
|
*
|
|
681
|
-
* @version 4.3.
|
|
687
|
+
* @version 4.3.5
|
|
682
688
|
* @author Yusuke Kamiyamane
|
|
683
689
|
* @license MIT
|
|
684
690
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -691,7 +697,7 @@ power-focusable/dist/index.js:
|
|
|
691
697
|
* Lightweight roving tabindex utility with fully focus management.
|
|
692
698
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
693
699
|
*
|
|
694
|
-
* @version 3.
|
|
700
|
+
* @version 3.1.2
|
|
695
701
|
* @author Yusuke Kamiyamane
|
|
696
702
|
* @license MIT
|
|
697
703
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.cjs
CHANGED
|
@@ -55,7 +55,7 @@ var Disclosure = class {
|
|
|
55
55
|
if (!summary || !content) {
|
|
56
56
|
return;
|
|
57
57
|
}
|
|
58
|
-
const binding = createBinding(details, summary, content);
|
|
58
|
+
const binding = this.#createBinding(details, summary, content);
|
|
59
59
|
this.#bindings.set(details, binding);
|
|
60
60
|
this.#bindings.set(summary, binding);
|
|
61
61
|
this.#bindings.set(content, binding);
|
|
@@ -101,7 +101,7 @@ var Disclosure = class {
|
|
|
101
101
|
"style",
|
|
102
102
|
"tabindex"
|
|
103
103
|
]);
|
|
104
|
-
this.#summaryElements.filter((summary) => !isFocusable(summary)).forEach((summary) => {
|
|
104
|
+
this.#summaryElements.filter((summary) => !this.#isFocusable(summary)).forEach((summary) => {
|
|
105
105
|
summary.setAttribute("aria-disabled", "true");
|
|
106
106
|
summary.setAttribute("tabindex", "-1");
|
|
107
107
|
summary.style.setProperty("pointer-events", "none");
|
|
@@ -119,19 +119,19 @@ var Disclosure = class {
|
|
|
119
119
|
details.open = isOpen;
|
|
120
120
|
}
|
|
121
121
|
}
|
|
122
|
+
#createBinding(details, summary, content) {
|
|
123
|
+
return { details, summary, content };
|
|
124
|
+
}
|
|
125
|
+
#isFocusable(element) {
|
|
126
|
+
return element.tabIndex >= 0;
|
|
127
|
+
}
|
|
122
128
|
};
|
|
123
|
-
function createBinding(details, summary, content) {
|
|
124
|
-
return { details, summary, content };
|
|
125
|
-
}
|
|
126
|
-
function isFocusable(element) {
|
|
127
|
-
return element.tabIndex >= 0;
|
|
128
|
-
}
|
|
129
129
|
/**
|
|
130
130
|
* Disclosure (CSS Animation)
|
|
131
131
|
* WAI-ARIA compliant disclosure pattern implementation in TypeScript.
|
|
132
132
|
* Using the <details> and <summary> element.
|
|
133
133
|
*
|
|
134
|
-
* @version 1.3.
|
|
134
|
+
* @version 1.3.12
|
|
135
135
|
* @author Yusuke Kamiyamane
|
|
136
136
|
* @license MIT
|
|
137
137
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -53,7 +53,7 @@ var Disclosure = class {
|
|
|
53
53
|
if (!summary || !content) {
|
|
54
54
|
return;
|
|
55
55
|
}
|
|
56
|
-
const binding = createBinding(details, summary, content);
|
|
56
|
+
const binding = this.#createBinding(details, summary, content);
|
|
57
57
|
this.#bindings.set(details, binding);
|
|
58
58
|
this.#bindings.set(summary, binding);
|
|
59
59
|
this.#bindings.set(content, binding);
|
|
@@ -99,7 +99,7 @@ var Disclosure = class {
|
|
|
99
99
|
"style",
|
|
100
100
|
"tabindex"
|
|
101
101
|
]);
|
|
102
|
-
this.#summaryElements.filter((summary) => !isFocusable(summary)).forEach((summary) => {
|
|
102
|
+
this.#summaryElements.filter((summary) => !this.#isFocusable(summary)).forEach((summary) => {
|
|
103
103
|
summary.setAttribute("aria-disabled", "true");
|
|
104
104
|
summary.setAttribute("tabindex", "-1");
|
|
105
105
|
summary.style.setProperty("pointer-events", "none");
|
|
@@ -117,19 +117,19 @@ var Disclosure = class {
|
|
|
117
117
|
details.open = isOpen;
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
|
+
#createBinding(details, summary, content) {
|
|
121
|
+
return { details, summary, content };
|
|
122
|
+
}
|
|
123
|
+
#isFocusable(element) {
|
|
124
|
+
return element.tabIndex >= 0;
|
|
125
|
+
}
|
|
120
126
|
};
|
|
121
|
-
function createBinding(details, summary, content) {
|
|
122
|
-
return { details, summary, content };
|
|
123
|
-
}
|
|
124
|
-
function isFocusable(element) {
|
|
125
|
-
return element.tabIndex >= 0;
|
|
126
|
-
}
|
|
127
127
|
/**
|
|
128
128
|
* Disclosure (CSS Animation)
|
|
129
129
|
* WAI-ARIA compliant disclosure pattern implementation in TypeScript.
|
|
130
130
|
* Using the <details> and <summary> element.
|
|
131
131
|
*
|
|
132
|
-
* @version 1.3.
|
|
132
|
+
* @version 1.3.12
|
|
133
133
|
* @author Yusuke Kamiyamane
|
|
134
134
|
* @license MIT
|
|
135
135
|
* @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.12",
|
|
4
4
|
"description": "WAI-ARIA compliant disclosure pattern implementation in TypeScript",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -52,6 +52,6 @@
|
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@y14e/attributes-utils": "^1.1.2",
|
|
55
|
-
"@y14e/roving-tabindex": "^3.
|
|
55
|
+
"@y14e/roving-tabindex": "^3.1.2"
|
|
56
56
|
}
|
|
57
57
|
}
|