@ideal-postcodes/address-finder/esm/announcer.js

Address Finder JS library backed by the Ideal Postcodes UK address search API

import debounce from "lodash/debounce";
/**
 * @hidden
 */
const update = (e, id) => {
    e.id = id;
    e.setAttribute("role", "status");
    e.setAttribute("aria-live", "polite");
    e.setAttribute("aria-atomic", "true");
    return e;
};
/**
 * Applies hidden styles to a container. This is used to hide elements visually
 * while keeping them accessible to screen readers.
 *
 * @param container - The container element to style.
 */
const setContainerFixStyle = (container) => {
    // Apply reset styles
    container.style.border = "0px";
    container.style.padding = "0px";
    // Apply hidden styles
    container.style.clipPath = "rect(0px,0px,0px,0px)";
    container.style.height = "1px";
    container.style.marginBottom = "-1px";
    container.style.marginRight = "-1px";
    container.style.overflow = "hidden";
    container.style.position = "absolute";
    container.style.whiteSpace = "nowrap";
    container.style.width = "1px";
};
/**
 * Generates a screen reader compatible live area for announcements
 *
 * @hidden
 */
export const announcer = ({ document, idA, idB }) => {
    const container = document.createElement("div");
    // Apply reset styles
    setContainerFixStyle(container);
    const a = update(document.createElement("div"), idA);
    const b = update(document.createElement("div"), idB);
    container.appendChild(a);
    container.appendChild(b);
    let A = true;
    const announce = debounce((message) => {
        const announcer = A ? a : b;
        const backup = A ? b : a;
        A = !A;
        announcer.textContent = message;
        backup.textContent = "";
    }, 1500, {});
    return { container, announce };
};