selfstore 1.8.19 → 1.8.20

package/dist/widgets.js

@@ -43,8 +43,13 @@ var baseStyles = `
 	--_radius: var(--selfstore-radius, 12px);
 	--_gap: var(--selfstore-gap, 0.6rem);
 	--_danger: var(--selfstore-danger, #dc2626);
-	--_ok: var(--selfstore-ok, #16a34a);
-	--_warn: var(--selfstore-warn, #d97706);
+	/* Severity colors are read as TEXT (see sev-* below), so they answer to the
+	   4.5:1 text threshold, not the 3:1 one for a graphic. The obvious green and
+	   amber of a palette sit at 3.3:1 and 3.2:1 on white and fail it: a status
+	   line is exactly the sentence someone needs to read. One step darker each
+	   clears it at 5.0:1 without changing which color anyone thinks they see. */
+	--_ok: var(--selfstore-ok, #15803d);
+	--_warn: var(--selfstore-warn, #b45309);
 }
 /* Status severity, as a text color the dot inherits (background: currentColor). */
 [part~='sev-ok'] { color: var(--_ok); }
@@ -155,6 +160,12 @@ span[part~='status-glyph'] {
 	animation: ss-spin 0.8s linear infinite;
 }
 @keyframes ss-spin { to { transform: rotate(360deg); } }
+/* An endless spin is the one motion here, and it runs during the wait someone
+   with vestibular trouble cannot escape. Keep the shape as the busy signal,
+   drop the rotation. */
+@media (prefers-reduced-motion: reduce) {
+	[part='spinner'] { animation: none; border-top-color: var(--_border); }
+}
 button[part~='button'] {
 	font: inherit;
 	padding: 0.45rem 0.9rem;
@@ -1019,7 +1030,7 @@ var SelfstoreConnectElement = class extends FlowWidget {
         h("div", { part: "title" }, this.t("connect.password.title")),
         h("div", { part: "hint" }, this.t("connect.password.hint")),
         field,
-        s.passwordError ? h("div", { part: "error-note" }, this.t("connect.password.wrong")) : null,
+        s.passwordError ? h("div", { part: "error-note", role: "alert" }, this.t("connect.password.wrong")) : null,
         h(
           "div",
           { part: "row" },
@@ -1632,7 +1643,9 @@ var SelfstoreShareElement = class extends FlowWidget {
     put(into, this.heading("title", "share.title"));
     if (s.stale) into.append(h("div", { part: "hint" }, this.t("share.stale")));
     if (s.error && !s.stale) {
-      into.append(h("div", { part: "error-note" }, this.errorText(s.error.labelKey)));
+      into.append(
+        h("div", { part: "error-note", role: "alert" }, this.errorText(s.error.labelKey))
+      );
     }
     if (this.#withCreate) {
       const missing = this.#levels.filter((l) => !s.links.some((k) => k.level === l));
@@ -2118,6 +2131,7 @@ var FR5 = {
   "status.action.reconnect": "Retrouver l'acc\xE8s",
   "status.action.unlock": "D\xE9verrouiller"
 };
+var GLYPH = { ok: "\u2713", warn: "!", danger: "!", info: "" };
 var SelfstoreStatusElement = class extends FlowWidget {
   static get observedAttributes() {
     return ["variant"];
@@ -2146,6 +2160,7 @@ var SelfstoreStatusElement = class extends FlowWidget {
   }
   connectedCallback() {
     super.connectedCallback();
+    if (!this.hasAttribute("role")) this.setAttribute("role", "status");
     if (this.hasAttribute("variant"))
       this.variant = this.getAttribute("variant");
     this.follow(this.hostOf());
@@ -2174,7 +2189,6 @@ var SelfstoreStatusElement = class extends FlowWidget {
       part: `status-dot sev-${status.severity}`,
       "aria-hidden": "true"
     });
-    const GLYPH = { ok: "\u2713", warn: "!", danger: "!", info: "" };
     const glyph = GLYPH[status.severity];
     const sign = glyph ? h("span", { part: `status-glyph sev-${status.severity}`, "aria-hidden": "true" }, glyph) : dot;
     if (this.#variant === "dot") {
@@ -2944,7 +2958,7 @@ var SelfstoreBackupsElement = class extends FlowWidget {
             this.rerender();
           }
         }),
-        taken ? h("div", { part: "error-note" }, this.t("backups.taken")) : clean ? h(
+        taken ? h("div", { part: "error-note", role: "alert" }, this.t("backups.taken")) : clean ? h(
           "div",
           { part: "sub" },
           this.ts("backups.willBe", { file: this.#manager?.fileNameFor(clean) ?? "" })
@@ -3002,7 +3016,7 @@ var SelfstoreBackupsElement = class extends FlowWidget {
             this.rerender();
           }
         }),
-        taken ? h("div", { part: "error-note" }, this.t("backups.taken")) : clean ? h(
+        taken ? h("div", { part: "error-note", role: "alert" }, this.t("backups.taken")) : clean ? h(
           "div",
           { part: "sub" },
           this.ts("backups.willBe", { file: this.#manager?.fileNameFor(clean) ?? "" })
@@ -3109,7 +3123,7 @@ var SelfstoreBackupsElement = class extends FlowWidget {
           this.t(`backups.replica.dest.${kind}`)
         )
       ),
-      snap.error ? h("div", { part: "error-note" }, this.t("error.generic")) : null,
+      snap.error ? h("div", { part: "error-note", role: "alert" }, this.t("error.generic")) : null,
       h(
         "button",
         {
@@ -3161,7 +3175,7 @@ var SelfstoreBackupsElement = class extends FlowWidget {
         c.password,
         (v) => c.password = v
       ),
-      snap.error ? h("div", { part: "error-note" }, this.t("error.generic")) : null,
+      snap.error ? h("div", { part: "error-note", role: "alert" }, this.t("error.generic")) : null,
       h(
         "div",
         { part: "row", style: "margin-top:0.45rem" },
@@ -3218,7 +3232,7 @@ var SelfstoreBackupsElement = class extends FlowWidget {
         c.secretAccessKey,
         (v) => c.secretAccessKey = v
       ),
-      snap.error ? h("div", { part: "error-note" }, this.t("error.generic")) : null,
+      snap.error ? h("div", { part: "error-note", role: "alert" }, this.t("error.generic")) : null,
       h(
         "div",
         { part: "row", style: "margin-top:0.45rem" },
@@ -3628,6 +3642,11 @@ var SelfstoreGateElement = class extends FlowWidget {
     if (deferrable !== null) this.deferrable = deferrable;
     this.wire();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("focusin", this.#keepFocus);
+    this.#focusBefore = null;
+  }
   host() {
     const s = this.#store;
     if (!s) return null;
@@ -3650,13 +3669,46 @@ var SelfstoreGateElement = class extends FlowWidget {
     if (!host.engine.state.ready) return false;
     return host.engine.state.status.action === "choose-destination";
   }
+  /** Where focus was when the gate took over, so it can be handed back. */
+  #focusBefore = null;
+  /** `aria-modal` tells assistive tech this is modal; it does NOT stop the Tab
+   *  key. Without this, a keyboard user tabs straight out of a screen whose
+   *  whole purpose is to block, and lands in the application behind it -
+   *  invisibly, since the gate still covers what they are now driving.
+   *
+   *  A guard rather than a cycle through the focusable elements: the gate
+   *  contains a `<selfstore-connect>` with its own shadow root, and walking
+   *  focusables across shadow boundaries is the kind of code that quietly
+   *  stops matching the DOM it walks. Anything landing outside comes straight
+   *  back to the card, which is correct whatever the widget grows inside. */
+  #pulling = false;
+  #keepFocus = (e) => {
+    if (!this.#open || this.#pulling) return;
+    if (e.composedPath().includes(this)) return;
+    const card = this.root.querySelector('[part~="gate-card"]');
+    if (!card) return;
+    this.#pulling = true;
+    try {
+      card.focus();
+    } finally {
+      this.#pulling = false;
+    }
+  };
   sync() {
     const open = this.shouldOpen();
     if (open === this.#open) return;
     this.#open = open;
     if (!open) this.#connect = null;
     super.rerender();
-    if (open) this.root.querySelector('[part~="gate-card"]')?.focus();
+    if (open) {
+      this.#focusBefore = document.activeElement ?? null;
+      document.addEventListener("focusin", this.#keepFocus);
+      this.root.querySelector('[part~="gate-card"]')?.focus();
+      return;
+    }
+    document.removeEventListener("focusin", this.#keepFocus);
+    this.#focusBefore?.focus?.();
+    this.#focusBefore = null;
   }
   /** Rebuilding the frame would re-append the child connect element, and a
    *  custom element that leaves the DOM and comes back rebuilds its flow: a
@@ -4529,21 +4581,62 @@ var SelfstoreAccountElement = class extends FlowWidget {
 };
 
 // src/entries/widgets.ts
+function register(prefix, tags) {
+  for (const [name, ctor] of Object.entries(tags)) {
+    const tag = `${prefix}-${name}`;
+    if (!customElements.get(tag)) customElements.define(tag, ctor);
+  }
+}
+function defineConnect(prefix = "selfstore") {
+  register(prefix, { connect: SelfstoreConnectElement });
+}
+function defineStatus(prefix = "selfstore") {
+  register(prefix, { status: SelfstoreStatusElement });
+}
+function defineShare(prefix = "selfstore") {
+  register(prefix, { share: SelfstoreShareElement });
+}
+function defineJoin(prefix = "selfstore") {
+  register(prefix, { join: SelfstoreJoinElement });
+}
+function defineBackups(prefix = "selfstore") {
+  register(prefix, { backups: SelfstoreBackupsElement });
+}
+function defineGate(prefix = "selfstore") {
+  register(prefix, { connect: SelfstoreConnectElement, gate: SelfstoreGateElement });
+}
+function defineDestination(prefix = "selfstore") {
+  register(prefix, {
+    connect: SelfstoreConnectElement,
+    status: SelfstoreStatusElement,
+    destination: SelfstoreDestinationElement
+  });
+}
+function defineStorage(prefix = "selfstore") {
+  defineGate(prefix);
+  defineDestination(prefix);
+  register(prefix, { storage: SelfstoreStorageElement });
+}
+function defineAccount(prefix = "selfstore") {
+  register(prefix, {
+    status: SelfstoreStatusElement,
+    account: SelfstoreAccountElement
+  });
+}
 function defineSelfstoreWidgets(prefix = "selfstore") {
-  const define = (name, ctor) => {
-    if (!customElements.get(name)) customElements.define(name, ctor);
-  };
-  define(`${prefix}-connect`, SelfstoreConnectElement);
-  define(`${prefix}-share`, SelfstoreShareElement);
-  define(`${prefix}-join`, SelfstoreJoinElement);
-  define(`${prefix}-status`, SelfstoreStatusElement);
-  define(`${prefix}-backups`, SelfstoreBackupsElement);
-  define(`${prefix}-gate`, SelfstoreGateElement);
-  define(`${prefix}-destination`, SelfstoreDestinationElement);
-  define(`${prefix}-storage`, SelfstoreStorageElement);
-  define(`${prefix}-account`, SelfstoreAccountElement);
+  register(prefix, {
+    connect: SelfstoreConnectElement,
+    share: SelfstoreShareElement,
+    join: SelfstoreJoinElement,
+    status: SelfstoreStatusElement,
+    backups: SelfstoreBackupsElement,
+    gate: SelfstoreGateElement,
+    destination: SelfstoreDestinationElement,
+    storage: SelfstoreStorageElement,
+    account: SelfstoreAccountElement
+  });
 }
 
-export { FlowWidget, SelfstoreAccountElement, SelfstoreBackupsElement, SelfstoreConnectElement, SelfstoreDestinationElement, SelfstoreGateElement, SelfstoreJoinElement, SelfstoreShareElement, SelfstoreStatusElement, SelfstoreStorageElement, defaultIcons, defineSelfstoreWidgets };
+export { FlowWidget, SelfstoreAccountElement, SelfstoreBackupsElement, SelfstoreConnectElement, SelfstoreDestinationElement, SelfstoreGateElement, SelfstoreJoinElement, SelfstoreShareElement, SelfstoreStatusElement, SelfstoreStorageElement, defaultIcons, defineAccount, defineBackups, defineConnect, defineDestination, defineGate, defineJoin, defineSelfstoreWidgets, defineShare, defineStatus, defineStorage };
 //# sourceMappingURL=widgets.js.map
 //# sourceMappingURL=widgets.js.map