@rathnasgala2/template 3.2.0 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathnasgala2/template",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Deterministic Eleventy-backed static publication renderer for Galascribe portable repositories.",
   "type": "module",
   "license": "Apache-2.0",

package/src/core/internal/appearance/base-layer.js

@@ -671,7 +671,6 @@ export const GALA_BASE_COMPONENT_CSS = `
   }
   .g-reaction:hover:not(:disabled) { border-color: var(--gala-color-text); color: var(--gala-color-text); }
   .g-reaction:active:not(:disabled) { transform: scale(.96); }
-  .g-reaction:disabled { opacity: .55; cursor: default; }
   .g-reaction__icon { display: inline-grid; place-items: center; font-size: 1.1rem; line-height: 1; }
   .g-reaction__icon .g-icon { width: 1.15rem; height: 1.15rem; }
   .g-reaction__label { overflow-wrap: anywhere; }
@@ -706,12 +705,41 @@ export const GALA_BASE_COMPONENT_CSS = `
   }
   .g-composer__submit:hover:not(:disabled), .g-composer__signin:hover, .g-report button[type="submit"]:hover { filter: brightness(1.07) saturate(1.05); }
   .g-composer__submit:active:not(:disabled), .g-composer__signin:active { transform: scale(.97); }
-  .g-composer__submit:disabled { opacity: .55; cursor: default; box-shadow: none; }
   .g-composer__cancel, .g-report button[type="button"] {
     min-height: 2.75rem; padding: .6rem 1rem; border-radius: var(--gala-radius-pill); border: var(--gala-border-width) solid var(--gala-color-border); background: transparent; color: var(--gala-color-text);
     font-family: var(--gala-font-ui); font-weight: var(--gala-weight-ui); font-size: .9rem; cursor: pointer;
   }
   .g-composer__cancel:hover, .g-report button[type="button"]:hover { border-color: var(--gala-color-text); }
+  /* Interaction-button states. Enabled: full-strength tokens and a pointer.
+     Disabled (native or aria-disabled): muted surface and border tokens,
+     faint text, reduced opacity, a dashed border and not-allowed. Working
+     (aria-busy): enabled colours, a progress cursor and a spinner, never the
+     muted look. Themes may tint these tokens, never remove the rule. */
+  .g-reaction:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]),
+  .g-comments__more:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]),
+  .g-composer__cancel:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]),
+  .g-report button[type="button"]:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]),
+  .g-comment__action:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]),
+  .g-composer__submit:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]),
+  .g-composer__signin:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]),
+  .g-report button[type="submit"]:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
+    background: var(--gala-color-surface-raised); background-image: none; color: var(--gala-color-text-faint);
+    border: var(--gala-border-width) dashed var(--gala-color-border); box-shadow: none; filter: none; transform: none;
+    opacity: .6; cursor: not-allowed;
+  }
+  .g-interactions__signout:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { color: var(--gala-color-text-faint); text-decoration-style: dashed; opacity: .6; cursor: not-allowed; }
+  .g-reaction[aria-busy="true"], .g-comments__more[aria-busy="true"], .g-composer__cancel[aria-busy="true"], .g-comment__action[aria-busy="true"],
+  .g-composer__submit[aria-busy="true"], .g-composer__signin[aria-busy="true"], .g-report button[aria-busy="true"] { cursor: progress; }
+  .g-reaction[aria-busy="true"]::after, .g-comments__more[aria-busy="true"]::after, .g-comment__action[aria-busy="true"]::after,
+  .g-composer__submit[aria-busy="true"]::after, .g-report button[aria-busy="true"]::after {
+    content: ""; display: inline-block; flex: none; width: .9em; height: .9em; margin-left: .5em; border-radius: 50%;
+    border: 2px solid currentColor; border-right-color: transparent; vertical-align: -.1em; animation: g-busy-spin .8s linear infinite;
+  }
+  @keyframes g-busy-spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) {
+    .g-reaction[aria-busy="true"]::after, .g-comments__more[aria-busy="true"]::after, .g-comment__action[aria-busy="true"]::after,
+    .g-composer__submit[aria-busy="true"]::after, .g-report button[aria-busy="true"]::after { animation: none; border-right-color: currentColor; border-style: dotted; }
+  }
   .g-comment-list { display: grid; gap: var(--gala-space-4); min-width: 0; }
   .g-comment { display: grid; gap: var(--gala-space-2); min-width: 0; }
   .g-comment__head { display: flex; align-items: center; gap: var(--gala-space-3); min-width: 0; }

package/src/modules/interactions/browser/gala-interactions.js

@@ -253,9 +253,10 @@
   };
   const composers = new Set();
   let rootComposer = /** @type {Composer | null} */ (null);
-  let inline = /** @type {{composer: Composer, item: CommentItem} | null} */ (
-    null
-  );
+  let inline =
+    /** @type {{composer: Composer, item: CommentItem, trigger: HTMLElement | null} | null} */ (
+      null
+    );
   let loadToken = 0;
 
   // ------------------------------------------------------------------- helpers
@@ -295,6 +296,47 @@
     return node;
   }
 
+  /**
+   * One place for the disabled state: the native attribute (which blocks
+   * activation and focus) and `aria-disabled` together, so the base layer's
+   * `:disabled` / `[aria-disabled="true"]` rule and assistive technology agree.
+   *
+   * @param {HTMLElement} node
+   * @param {boolean} on
+   */
+  function setDisabled(node, on) {
+    /** @type {HTMLButtonElement} */ (node).disabled = on;
+    if (on) node.setAttribute('aria-disabled', 'true');
+    else node.removeAttribute('aria-disabled');
+  }
+
+  /**
+   * The working (pending) state: disabled for activation, but marked
+   * `aria-busy` so the base layer draws a spinner instead of the muted
+   * disabled look.
+   *
+   * @param {HTMLElement} node
+   * @param {boolean} on
+   */
+  function setBusy(node, on) {
+    setDisabled(node, on);
+    if (on) node.setAttribute('aria-busy', 'true');
+    else node.removeAttribute('aria-busy');
+  }
+
+  /**
+   * A trigger whose action is already in progress (its inline composer is
+   * open) stays focusable, so it is `aria-disabled` only, and ignores clicks.
+   *
+   * @param {HTMLElement | null} trigger
+   * @param {boolean} on
+   */
+  function holdTrigger(trigger, on) {
+    if (!trigger) return;
+    if (on) trigger.setAttribute('aria-disabled', 'true');
+    else trigger.removeAttribute('aria-disabled');
+  }
+
   let idCounter = 0;
   /**
    * @param {string} prefix
@@ -867,7 +909,7 @@
         continue;
       }
       node.hidden = false;
-      node.disabled = false;
+      setDisabled(node, false);
       setPressed(node, !!item.viewerActive);
       setCount(node, item.count, 'reactions');
     }
@@ -1267,7 +1309,7 @@
     let cursor = /** @type {string | null} */ (null);
     let first = true;
     more.addEventListener('click', async () => {
-      more.disabled = true;
+      setBusy(more, true);
       try {
         const query = new URLSearchParams({ parentId: comment.id });
         if (cursor) query.set('cursor', cursor);
@@ -1284,9 +1326,9 @@
           list.appendChild(renderComment(reply));
         cursor = page.nextCursor || null;
         if (!cursor) more.remove();
-        else more.disabled = false;
+        else setBusy(more, false);
       } catch (error) {
-        more.disabled = false;
+        setBusy(more, false);
         announce(failureMessage(error));
       }
     });
@@ -1307,9 +1349,10 @@
         MESSAGES.reply,
         MESSAGES.reply + ' to ' + name,
       );
-      reply.addEventListener('click', () =>
-        openInlineComposer(item, 'reply', reply),
-      );
+      reply.addEventListener('click', () => {
+        if (reply.getAttribute('aria-disabled') === 'true') return;
+        openInlineComposer(item, 'reply', reply);
+      });
       actions.appendChild(reply);
     }
     if (comment.viewer && comment.viewer.canEdit) {
@@ -1318,9 +1361,10 @@
         MESSAGES.edit,
         MESSAGES.edit + ' your comment',
       );
-      edit.addEventListener('click', () =>
-        openInlineComposer(item, 'edit', edit),
-      );
+      edit.addEventListener('click', () => {
+        if (edit.getAttribute('aria-disabled') === 'true') return;
+        openInlineComposer(item, 'edit', edit);
+      });
       actions.appendChild(edit);
     }
     if (comment.viewer && comment.viewer.canDelete) {
@@ -1376,8 +1420,8 @@
       }
     });
     yes.addEventListener('click', async () => {
-      yes.disabled = true;
-      no.disabled = true;
+      setBusy(yes, true);
+      setDisabled(no, true);
       try {
         await api(
           'DELETE',
@@ -1386,8 +1430,8 @@
         applyDeleted(item);
         announce(MESSAGES.deleted);
       } catch (error) {
-        yes.disabled = false;
-        no.disabled = false;
+        setBusy(yes, false);
+        setDisabled(no, false);
         announce(failureMessage(error));
       }
     });
@@ -1599,7 +1643,7 @@
         return;
       }
       composer.busy = true;
-      submit.disabled = true;
+      setDisabled(submit, true);
       submit.setAttribute('aria-busy', 'true');
       showError('');
       try {
@@ -1626,7 +1670,7 @@
         showError(failureMessage(failure));
       } finally {
         composer.busy = false;
-        submit.disabled = false;
+        setDisabled(submit, false);
         submit.removeAttribute('aria-busy');
       }
     });
@@ -1682,6 +1726,7 @@
   function closeInline() {
     if (inline) {
       inline.composer.close();
+      holdTrigger(inline.trigger, false);
       inline = null;
     }
   }
@@ -1697,6 +1742,7 @@
     const comment = item._comment;
     const done = (/** @type {any} */ result) => {
       /** @type {{composer: Composer}} */ (inline).composer.close();
+      holdTrigger(trigger, false);
       inline = null;
       if (mode === 'edit') {
         fillComment(item, result);
@@ -1713,12 +1759,14 @@
       body: mode === 'edit' ? comment.body || '' : presetBody || '',
       onDone: done,
       onCancel: () => {
+        holdTrigger(trigger, false);
         inline = null;
         if (trigger && trigger.isConnected) focusNode(trigger);
         else focusNode(item);
       },
     });
-    inline = { composer, item };
+    holdTrigger(trigger, true);
+    inline = { composer, item, trigger };
     const replies = item.querySelector(':scope > .g-comment__replies');
     if (replies) item.insertBefore(composer.element, replies);
     else item.appendChild(composer.element);
@@ -1805,7 +1853,7 @@
     });
     cancel.addEventListener('click', finish);
     send.addEventListener('click', async () => {
-      send.disabled = true;
+      setBusy(send, true);
       error.hidden = true;
       /** @type {{reasonCode: string, note?: string}} */
       const payload = { reasonCode: select.value };
@@ -1822,7 +1870,7 @@
         finish();
         announce(MESSAGES.reported);
       } catch (failure) {
-        send.disabled = false;
+        setBusy(send, false);
         error.textContent = failureMessage(failure);
         error.hidden = false;
       }
@@ -1959,7 +2007,7 @@
         showError(MESSAGES.appealTooLong);
         return;
       }
-      send.disabled = true;
+      setDisabled(send, true);
       send.setAttribute('aria-busy', 'true');
       showError('');
       try {
@@ -1991,7 +2039,7 @@
           );
           announce(message);
         } else {
-          send.disabled = false;
+          setDisabled(send, false);
           showError(message);
         }
       } finally {
@@ -2088,7 +2136,7 @@
 
   async function loadMore() {
     if (!live.nextCursor || !moreEl) return;
-    moreEl.disabled = true;
+    setBusy(moreEl, true);
     try {
       const query = new URLSearchParams({ cursor: live.nextCursor });
       const page = await api(
@@ -2099,7 +2147,7 @@
     } catch (error) {
       announce(failureMessage(error));
     } finally {
-      moreEl.disabled = false;
+      setBusy(moreEl, false);
     }
   }