dtoro
d4d99a7473
Problem: the hexagonal refactor churns the backend tree for nine more phases; the UI delivery stack (web/ SPA, cmd/desktop Wails wrapper, compose/web image) must move to its own repo first so doc/layout rewrites land once on a backend-only tree. Change: - New repo git.hubris.network/dtoro/oikos-web (v0.33.0): web/, desktop/ (updateURL repointed to oikos-web releases), compose/, own CI (web + desktop jobs), own deploy script (CI-green gate, TOCTOU guard, version-tagged images, prune-to-3), own webhook receiver on :9798 + launchd unit, own compose project publishing the same 8091:80. - Cutover executed on mac-mini in order: oikos stack's web service stopped+removed, oikos-web project brought up on 8091; outer Caddy untouched (targets the published port) — serving + Authentik flow + /wails 404 quirk verified post-cutover. - Stripped from oikos: web/, cmd/desktop/, compose/web/, desktop CI workflow, ci.yml web job, Makefile ui/desktop/desktop-package/install targets, the compose web service, oikos-web from deploy.sh's fallback prune list; wails + go-keyring dropped from go.mod, vendor synced. - README / CONTRIBUTING / AGENTS.md / .agents dev+operations docs now point at the new repo; mbse + mascot design docs carry a path note. Risk: production SPA serving depends on the new pipeline now; rollback is versioned-image re-up of the old web service from a pre-split checkout (port 8091). Desktop builds installed before the split still check dtoro/oikos releases — one manual reinstall, noted in the oikos-web release notes. Verification: go vet, make test (race), make generate-check, golangci (no new findings; baseline down 400→365); post-cutover curls — localhost:8091 200, /wails/runtime.js 404, outer Caddy 302 Authentik.
83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
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,
|
|
};
|
|
}
|