INIT

node_modules/bits-ui/dist/internal/date-time/announcer.js

@@ -0,0 +1,82 @@
+import { srOnlyStylesString } from "svelte-toolbelt";
+import { isBrowser, isHTMLElement } from "../is.js";
+/**
+ * Creates or gets an announcer element which is used to announce messages to screen readers.
+ * Within the date components, we use this to announce when the values of the individual segments
+ * change, as without it we get inconsistent behavior across screen readers.
+ */
+function initAnnouncer(doc) {
+    if (!isBrowser || !doc)
+        return null;
+    let el = doc.querySelector("[data-bits-announcer]");
+    /**
+     * Creates a log element for assertive or polite announcements.
+     */
+    const createLog = (kind) => {
+        const log = doc.createElement("div");
+        log.role = "log";
+        log.ariaLive = kind;
+        log.setAttribute("aria-relevant", "additions");
+        return log;
+    };
+    if (!isHTMLElement(el)) {
+        const div = doc.createElement("div");
+        div.style.cssText = srOnlyStylesString;
+        div.setAttribute("data-bits-announcer", "");
+        div.appendChild(createLog("assertive"));
+        div.appendChild(createLog("polite"));
+        el = div;
+        doc.body.insertBefore(el, doc.body.firstChild);
+    }
+    /**
+     * Retrieves the log element for assertive or polite announcements.
+     */
+    const getLog = (kind) => {
+        if (!isHTMLElement(el))
+            return null;
+        const log = el.querySelector(`[aria-live="${kind}"]`);
+        if (!isHTMLElement(log))
+            return null;
+        return log;
+    };
+    return {
+        getLog,
+    };
+}
+/**
+ * Creates an announcer object that can be used to make `aria-live` announcements to screen readers.
+ */
+export function getAnnouncer(doc) {
+    const announcer = initAnnouncer(doc);
+    /**
+     * Announces a message to screen readers using the specified kind of announcement.
+     */
+    function announce(value, kind = "assertive", timeout = 7500) {
+        if (!announcer || !isBrowser || !doc)
+            return;
+        const log = announcer.getLog(kind);
+        const content = doc.createElement("div");
+        if (typeof value === "number") {
+            value = value.toString();
+        }
+        else if (value === null) {
+            value = "Empty";
+        }
+        else {
+            value = value.trim();
+        }
+        content.innerText = value;
+        if (kind === "assertive") {
+            log?.replaceChildren(content);
+        }
+        else {
+            log?.appendChild(content);
+        }
+        return setTimeout(() => {
+            content.remove();
+        }, timeout);
+    }
+    return {
+        announce,
+    };
+}