@threadlabs/looma 0.14.5 → 0.14.6

package/components/shared/authoring.js

@@ -0,0 +1,46 @@
+// Warnings about authoring mistakes the controllers work around but cannot fix. They run in
+// development only: bundlers replace process.env.NODE_ENV, the convention Vue and React follow, and a
+// production build ("production") skips them. Without a bundler there is no process, and they run.
+export const DEV = (() => {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return true;
+  }
+})();
+
+// True when another element in the same document or shadow root has this element's id.
+export function duplicateId(element) {
+  return Boolean(element.id) && element.getRootNode().querySelectorAll(`[id="${CSS.escape(element.id)}"]`).length > 1;
+}
+
+// A Form Field's authoring problems, read before the field links its label and input.
+export function fieldProblems(label, input) {
+  const problems = [];
+  const target = label?.getAttribute("for");
+  if (label && !target && !label.contains(input)) {
+    problems.push(
+      "ui-form-field: the label has no for, so the field linked it to its input, which works only once JavaScript runs. Give the input an id and the label a matching for, or put the input inside the label, so the label works without JavaScript.",
+    );
+  }
+  if (duplicateId(input)) {
+    problems.push(
+      `ui-form-field: the input's id "${input.id}" is used by another element in the same document or shadow root, so its label and description can reach the wrong element. Give each input its own id.`,
+    );
+  }
+  if (target && input.getRootNode().querySelector(`#${CSS.escape(target)}`) !== input) {
+    problems.push(
+      `ui-form-field: the label's for="${target}" does not point at this field's input, so the label names another element or none. Set for to the input's id.`,
+    );
+  }
+  return problems;
+}
+
+// Each problem is said once per field, with the field, however often the controller re-links it.
+export function warnOnce(warned, problems, element) {
+  for (const problem of problems) {
+    if (warned.has(problem)) continue;
+    warned.add(problem);
+    console.warn(problem, element);
+  }
+}

package/components/ui-form-field/ui-form-field.js

@@ -1,3 +1,5 @@
+import { DEV, fieldProblems, warnOnce } from "../shared/authoring.js";
+
 let nextFieldId = 0;
 
 function id(prefix) {
@@ -14,6 +16,7 @@ export default function controller(host) {
   let activeInput = null;
   let owned = new Set();
   let queued = false;
+  const warned = new Set();
   const removeOwned = (input) => {
     if (!input || owned.size === 0) return;
     const remaining = descriptionIds(input).filter((value) => !owned.has(value));
@@ -32,6 +35,7 @@ export default function controller(host) {
       owned = new Set();
     }
     if (!input) return;
+    if (DEV) warnOnce(warned, fieldProblems(label, input), element);
     if (!input.id) input.id = id("form-field-input");
     if (label && !label.getAttribute("for")) label.setAttribute("for", input.id);
     const external = descriptionIds(input).filter((value) => !owned.has(value));

package/components/ui-input-group/ui-input-group.js

@@ -1,3 +1,5 @@
+import { DEV, duplicateId, warnOnce } from "../shared/authoring.js";
+
 let nextAffixId = 0;
 // An affix holding a control keeps it: its clicks are its own, and it is not hidden or described.
 const INTERACTIVE = "a[href], button, input, select, textarea, [tabindex], [contenteditable]";
@@ -6,6 +8,9 @@ function descriptionIds(input) {
   return (input.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
 }
 
+const affixProblem = (affix) =>
+  `ui-input-group: the affix id "${affix.id}" is used by another element in the same document or shadow root, so the input's description can read the wrong element. Give each affix its own id, or leave it off and the group adds one.`;
+
 // A text affix is hidden from assistive technology and linked to the input as its description
 // instead, so the input's name stays its label and the affix is read once, with the input. The
 // consumer's own aria-describedby (or a Form Field's) is kept. A press on an affix, or anywhere in
@@ -14,6 +19,7 @@ export default function controller(host) {
   const element = host.element;
   let owned = [];
   let described = null;
+  const warned = new Set();
   const wire = () => {
     const input = element.querySelector(".field input");
     const affixes = Array.from(element.querySelectorAll(":scope > .affix")).filter((affix) => {
@@ -23,6 +29,7 @@ export default function controller(host) {
       return text;
     });
     for (const affix of affixes) affix.id ||= `ui-input-group-affix-${(nextAffixId += 1)}`;
+    if (DEV) warnOnce(warned, affixes.filter(duplicateId).map(affixProblem), element);
     if (described && described !== input) {
       const rest = descriptionIds(described).filter((id) => !owned.includes(id));
       if (rest.length) described.setAttribute("aria-describedby", rest.join(" "));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.14.5",
+  "version": "0.14.6",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",