@zag-js/live-region 1.40.0 → 1.41.0
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.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +20 -1
- package/dist/index.mjs +20 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -3,6 +3,7 @@ interface LiveRegionOptions {
|
|
|
3
3
|
document?: Document | undefined;
|
|
4
4
|
root?: HTMLElement | null | undefined;
|
|
5
5
|
delay?: number | undefined;
|
|
6
|
+
debug?: boolean | undefined;
|
|
6
7
|
}
|
|
7
8
|
type LiveRegion = ReturnType<typeof createLiveRegion>;
|
|
8
9
|
declare function createLiveRegion(opts?: Partial<LiveRegionOptions>): {
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ interface LiveRegionOptions {
|
|
|
3
3
|
document?: Document | undefined;
|
|
4
4
|
root?: HTMLElement | null | undefined;
|
|
5
5
|
delay?: number | undefined;
|
|
6
|
+
debug?: boolean | undefined;
|
|
6
7
|
}
|
|
7
8
|
type LiveRegion = ReturnType<typeof createLiveRegion>;
|
|
8
9
|
declare function createLiveRegion(opts?: Partial<LiveRegionOptions>): {
|
package/dist/index.js
CHANGED
|
@@ -24,10 +24,24 @@ __export(index_exports, {
|
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(index_exports);
|
|
26
26
|
var ID = "__live-region__";
|
|
27
|
+
var DEBUG_ID = "__live-region-debug__";
|
|
28
|
+
var DEBUG_STYLES = "position:fixed;inset-inline:0;bottom:0;z-index:2147483647;padding:12px 16px;background:black;color:white;font-size:14px;line-height:20px;text-align:center;pointer-events:none;";
|
|
27
29
|
function createLiveRegion(opts = {}) {
|
|
28
|
-
const { level = "polite", document: doc = document, root, delay: _delay = 0 } = opts;
|
|
30
|
+
const { level = "polite", document: doc = document, root, delay: _delay = 0, debug = false } = opts;
|
|
29
31
|
const win = doc.defaultView ?? window;
|
|
30
32
|
const parent = root ?? doc.body;
|
|
33
|
+
function getDebugRegion() {
|
|
34
|
+
if (!debug) return;
|
|
35
|
+
let region = doc.getElementById(DEBUG_ID);
|
|
36
|
+
if (region) return region;
|
|
37
|
+
region = doc.createElement("div");
|
|
38
|
+
region.id = DEBUG_ID;
|
|
39
|
+
region.dataset.liveAnnouncerDebug = "true";
|
|
40
|
+
region.setAttribute("aria-hidden", "true");
|
|
41
|
+
region.style.cssText = DEBUG_STYLES;
|
|
42
|
+
parent.appendChild(region);
|
|
43
|
+
return region;
|
|
44
|
+
}
|
|
31
45
|
function announce(message, delay) {
|
|
32
46
|
const oldRegion = doc.getElementById(ID);
|
|
33
47
|
oldRegion?.remove();
|
|
@@ -52,12 +66,17 @@ function createLiveRegion(opts = {}) {
|
|
|
52
66
|
});
|
|
53
67
|
parent.appendChild(region);
|
|
54
68
|
win.setTimeout(() => {
|
|
69
|
+
if (!region.isConnected) return;
|
|
55
70
|
region.textContent = message;
|
|
71
|
+
const debugRegion = getDebugRegion();
|
|
72
|
+
if (debugRegion) debugRegion.textContent = message;
|
|
56
73
|
}, delay);
|
|
57
74
|
}
|
|
58
75
|
function destroy() {
|
|
59
76
|
const oldRegion = doc.getElementById(ID);
|
|
60
77
|
oldRegion?.remove();
|
|
78
|
+
const debugRegion = doc.getElementById(DEBUG_ID);
|
|
79
|
+
debugRegion?.remove();
|
|
61
80
|
}
|
|
62
81
|
return {
|
|
63
82
|
announce,
|
package/dist/index.mjs
CHANGED
|
@@ -1,9 +1,23 @@
|
|
|
1
1
|
// src/index.ts
|
|
2
2
|
var ID = "__live-region__";
|
|
3
|
+
var DEBUG_ID = "__live-region-debug__";
|
|
4
|
+
var DEBUG_STYLES = "position:fixed;inset-inline:0;bottom:0;z-index:2147483647;padding:12px 16px;background:black;color:white;font-size:14px;line-height:20px;text-align:center;pointer-events:none;";
|
|
3
5
|
function createLiveRegion(opts = {}) {
|
|
4
|
-
const { level = "polite", document: doc = document, root, delay: _delay = 0 } = opts;
|
|
6
|
+
const { level = "polite", document: doc = document, root, delay: _delay = 0, debug = false } = opts;
|
|
5
7
|
const win = doc.defaultView ?? window;
|
|
6
8
|
const parent = root ?? doc.body;
|
|
9
|
+
function getDebugRegion() {
|
|
10
|
+
if (!debug) return;
|
|
11
|
+
let region = doc.getElementById(DEBUG_ID);
|
|
12
|
+
if (region) return region;
|
|
13
|
+
region = doc.createElement("div");
|
|
14
|
+
region.id = DEBUG_ID;
|
|
15
|
+
region.dataset.liveAnnouncerDebug = "true";
|
|
16
|
+
region.setAttribute("aria-hidden", "true");
|
|
17
|
+
region.style.cssText = DEBUG_STYLES;
|
|
18
|
+
parent.appendChild(region);
|
|
19
|
+
return region;
|
|
20
|
+
}
|
|
7
21
|
function announce(message, delay) {
|
|
8
22
|
const oldRegion = doc.getElementById(ID);
|
|
9
23
|
oldRegion?.remove();
|
|
@@ -28,12 +42,17 @@ function createLiveRegion(opts = {}) {
|
|
|
28
42
|
});
|
|
29
43
|
parent.appendChild(region);
|
|
30
44
|
win.setTimeout(() => {
|
|
45
|
+
if (!region.isConnected) return;
|
|
31
46
|
region.textContent = message;
|
|
47
|
+
const debugRegion = getDebugRegion();
|
|
48
|
+
if (debugRegion) debugRegion.textContent = message;
|
|
32
49
|
}, delay);
|
|
33
50
|
}
|
|
34
51
|
function destroy() {
|
|
35
52
|
const oldRegion = doc.getElementById(ID);
|
|
36
53
|
oldRegion?.remove();
|
|
54
|
+
const debugRegion = doc.getElementById(DEBUG_ID);
|
|
55
|
+
debugRegion?.remove();
|
|
37
56
|
}
|
|
38
57
|
return {
|
|
39
58
|
announce,
|