@jinntec/fore 3.3.1 → 4.0.0

package/src/fx-submission.js

@@ -152,7 +152,9 @@ export class FxSubmission extends ForeElementMixin {
 
     const instance = this.getInstance();
     if (!instance) {
-      Fore.dispatch(this, 'warn', { message: `instance not found ${instance?.getAttribute?.('id')}` });
+      Fore.dispatch(this, 'warn', {
+        message: `instance not found ${instance?.getAttribute?.('id')}`,
+      });
     }
     const instType = instance.getAttribute('type');
 
@@ -244,8 +246,8 @@ export class FxSubmission extends ForeElementMixin {
 
       if (!response.ok || response.status > 400) {
         console.info(
-            `%csubmit-error #${this.id}`,
-            'background:red; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+          `%csubmit-error #${this.id}`,
+          'background:red; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
         );
 
         Fore.dispatch(this, 'submit-error', {
@@ -322,13 +324,14 @@ export class FxSubmission extends ForeElementMixin {
     // If no payload was passed, derive it from instance default context/nodeset
     if (payload == null && instanceEl) {
       payload =
-          (typeof instanceEl.getDefaultContext === 'function' && instanceEl.getDefaultContext()) ||
-          instanceEl.nodeset ||
-          null;
+        (typeof instanceEl.getDefaultContext === 'function' && instanceEl.getDefaultContext()) ||
+        instanceEl.nodeset ||
+        null;
     }
 
     // Decide JSON vs XML by instance type (NOT by ref expression)
-    const isJsonInstance = instanceEl?.getAttribute?.('type') === 'json' || instanceEl?.type === 'json';
+    const isJsonInstance =
+      instanceEl?.getAttribute?.('type') === 'json' || instanceEl?.type === 'json';
 
     if (isJsonInstance) {
       // Convert JSON lens nodes to plain JS before stringify
@@ -346,8 +349,7 @@ export class FxSubmission extends ForeElementMixin {
     try {
       if (payload && payload.nodeType) {
         // Document => serialize documentElement, Node => serialize node
-        const node =
-            payload.nodeType === Node.DOCUMENT_NODE ? payload.documentElement : payload;
+        const node = payload.nodeType === Node.DOCUMENT_NODE ? payload.documentElement : payload;
         return new XMLSerializer().serializeToString(node);
       }
     } catch (_e) {
@@ -410,11 +412,11 @@ export class FxSubmission extends ForeElementMixin {
     const val = node.value;
 
     if (
-        val === null ||
-        val === undefined ||
-        typeof val === 'string' ||
-        typeof val === 'number' ||
-        typeof val === 'boolean'
+      val === null ||
+      val === undefined ||
+      typeof val === 'string' ||
+      typeof val === 'number' ||
+      typeof val === 'boolean'
     ) {
       return val ?? null;
     }
@@ -445,7 +447,6 @@ export class FxSubmission extends ForeElementMixin {
 
       return result;
     }
-1
     // Fallback: last-resort scalar conversion
     try {
       if (typeof node.get === 'function') {
@@ -529,14 +530,14 @@ export class FxSubmission extends ForeElementMixin {
 
       if (this.targetref) {
         const [theTarget] = evaluateXPath(
-            this.targetref,
-            targetInstance.instanceData.firstElementChild,
-            this,
+          this.targetref,
+          targetInstance.instanceData.firstElementChild,
+          this,
         );
 
         if (
-            this.responseMediatype === 'application/xml' ||
-            this.responseMediatype === 'text/html'
+          this.responseMediatype === 'application/xml' ||
+          this.responseMediatype === 'text/html'
         ) {
           const clone = data.firstElementChild;
           const parent = theTarget.parentNode;
@@ -550,9 +551,9 @@ export class FxSubmission extends ForeElementMixin {
         }
       } else if (this.into) {
         const [theTarget] = evaluateXPath(
-            this.into,
-            targetInstance.instanceData.firstElementChild,
-            this,
+          this.into,
+          targetInstance.instanceData.firstElementChild,
+          this,
         );
         if (data?.nodeType === Node.DOCUMENT_NODE) {
           theTarget.appendChild(data.firstElementChild);
@@ -571,9 +572,9 @@ export class FxSubmission extends ForeElementMixin {
 
         // ✅ treat instance replacement as a structural change
         const fore =
-            (typeof this.getOwnerForm === 'function' && this.getOwnerForm()) ||
-            this.closest('fx-fore') ||
-            this.getModel()?.parentNode;
+          (typeof this.getOwnerForm === 'function' && this.getOwnerForm()) ||
+          this.closest('fx-fore') ||
+          this.getModel()?.parentNode;
 
         if (fore) {
           fore.someInstanceDataStructureChanged = true;
@@ -589,10 +590,11 @@ export class FxSubmission extends ForeElementMixin {
     }
 
     if (this.replace === 'download') {
-      const target = this._getProperty('target');
+      let target = this._getProperty('target');
       if (!target) {
         throw new Error(`${this.id} needs to specify "target" attribute`);
       }
+      target = this.evaluateAttributeTemplateExpression(target, this);
       const downloadLink = document.createElement('a');
       downloadLink.setAttribute('download', target);
       downloadLink.setAttribute('href', `data:${contentType},${encodeURIComponent(data)}`);
@@ -602,7 +604,10 @@ export class FxSubmission extends ForeElementMixin {
     }
 
     if (this.replace === 'all') {
-      const target = this._getProperty('target');
+      let target = this._getProperty('target');
+      if (target) {
+        target = this.evaluateAttributeTemplateExpression(target, this);
+      }
       if (target && target === '_blank') {
         const win = window.open('', '_blank');
         win.document.write(`<pre>${data}</pre>`);
@@ -617,7 +622,10 @@ export class FxSubmission extends ForeElementMixin {
     }
 
     if (this.replace === 'target') {
-      const target = this._getProperty('target');
+      let target = this._getProperty('target');
+      if (target) {
+        target = this.evaluateAttributeTemplateExpression(target, this);
+      }
       const targetNode = document.querySelector(target);
       if (targetNode) {
         if (contentType && contentType.startsWith('text/html')) {

package/src/fx-var.js

@@ -17,7 +17,6 @@ export class FxVariable extends ForeElementMixin {
     this.name = '';
     this.valueQuery = '';
     this.value = null;
-    this.precedingVariables = [];
     // Re-entrancy guard for variable evaluation
     this._isRefreshing = false;
     // Cached typed value (Fonto sequence wrapper)
@@ -41,10 +40,11 @@ export class FxVariable extends ForeElementMixin {
 
       const inscope = getInScopeContext(this, this.valueQuery);
 
-      // Evaluate using the preceding variables snapshot (do NOT pull live variables here)
-      const values = evaluateXPath(this.valueQuery, inscope, this, this.precedingVariables);
+      // Evaluate with the lexically scoped variables (preceding vars only), values read live
+      const values = evaluateXPath(this.valueQuery, inscope, this, this._precedingVariables());
 
       // Cache typed value for other computations to consume without triggering evaluation
+      this._rawValues = values;
       this._value = typedValueFactory(values, domFacade);
       this.value = this._value;
     } finally {
@@ -52,28 +52,64 @@ export class FxVariable extends ForeElementMixin {
     }
   }
 
+  /**
+   * Runs one evaluation point for this variable and reports whether its value changed.
+   *
+   * Comparison is shallow over the raw result sequence: node items by identity,
+   * atomic items by value. A node-valued variable whose nodes mutated content but kept
+   * identity is NOT flagged — variables hold node references, and consumers read the
+   * current content through them.
+   *
+   * @returns {boolean} true when the raw result sequence differs from the previous one
+   */
+  refreshAndReportChange() {
+    const before = this._rawValues;
+    this.refresh();
+    const after = this._rawValues;
+    if (before === after) return false;
+    if (!Array.isArray(before) || !Array.isArray(after)) return true;
+    if (before.length !== after.length) return true;
+    return before.some((item, i) => item !== after[i]);
+  }
+
+  /**
+   * Variables visible to this var per lexical scoping: the entries of the Map cloned at
+   * registration time (preceding vars only), with values read live at the evaluation point.
+   * The var itself is excluded — a variable is not visible to its own value expression.
+   *
+   * @returns {Object<string, *>}
+   * @private
+   */
+  _precedingVariables() {
+    const variables = {};
+    if (!this.inScopeVariables) return variables;
+    for (const [name, variableOrValue] of this.inScopeVariables) {
+      // eslint-disable-next-line no-continue
+      if (!variableOrValue || variableOrValue === this) continue;
+      if (variableOrValue.nodeType) {
+        // eslint-disable-next-line no-continue
+        if (variableOrValue._isRefreshing) continue;
+        variables[name] = variableOrValue._value ?? variableOrValue.value ?? null;
+      } else {
+        variables[name] = variableOrValue;
+      }
+    }
+    return variables;
+  }
+
   /**
    * @param {Map<string, FxVariable>} inScopeVariables
    */
   setInScopeVariables(inScopeVariables) {
     if (inScopeVariables.has(this.name)) {
       console.error(`The variable ${this.name} is declared more than once`);
-      Fore.dispatch(this, 'xforms-binding-error', {});
+      Fore.dispatch(this, 'binding-error', {});
       return;
     }
     inScopeVariables.set(this.name, this);
     // Clone the preceding variables to make sure we are not going to get access to variables we
     // should not get access to
     this.inScopeVariables = new Map(inScopeVariables);
-
-    // Set precedingVariables based on inScopeVariables
-    this.precedingVariables = Array.from(inScopeVariables.entries()).map(([name, variable]) => {
-      // IMPORTANT: do not trigger evaluation while taking the snapshot
-      if (variable && variable._isRefreshing) {
-        return { name, value: null };
-      }
-      return { name, value: variable?._value ?? variable?.value ?? null };
-    });
   }
 }
 if (!customElements.get('fx-var')) {

package/src/getInScopeContext.js

@@ -69,7 +69,7 @@ function _getInitialContext(node, ref) {
 export default function getInScopeContext(node, ref) {
   // console.log('getInScopeContext', ref, node);
 
-  //todo: check for multi-step pathes
+  // todo: check for multi-step pathes
   const parentElement = _getElement(node);
   // console.log('getInScopeContext parent', parentElement);
 

package/src/json/JSONDomFacade.js

@@ -81,4 +81,4 @@ export class JSONDomFacade {
   getAttribute() {
     return null;
   }
-}
+}

package/src/json/JSONLens.js

@@ -39,7 +39,7 @@ export class JSONLens {
   }
 
   insert(value, keyOrIndex = null) {
-    const  target = this.get();
+    const target = this.get();
 
     if (Array.isArray(target)) {
       if (keyOrIndex === null || keyOrIndex >= target.length) {
@@ -62,6 +62,6 @@ export class JSONLens {
   }
 
   pathString() {
-    return '/' + this.path.map(k => (typeof k === 'number' ? `[${k}]` : k)).join('/');
+    return `/${this.path.map(k => (typeof k === 'number' ? `[${k}]` : k)).join('/')}`;
   }
 }

package/src/ui/UIElement.js

@@ -43,10 +43,14 @@ export class UIElement extends ForeElementMixin {
 
   disconnectedCallback() {
     if (this.modelItem && typeof this.modelItem.removeObserver === 'function') {
-      console.log(`[UIElement] Removing observer for ref="${this.ref}"`);
       this.modelItem.removeObserver(this);
     }
 
+    this._refTrackedModelItems.forEach(modelItems => {
+      modelItems.forEach(mi => mi.removeObserver(this));
+    });
+    this._refTrackedModelItems.clear();
+
     for (const removeEventListener of this._removeEventListeners) {
       removeEventListener();
     }
@@ -96,6 +100,15 @@ export class UIElement extends ForeElementMixin {
   }
 */
 
+  /**
+   * Mirrors relevant/nonrelevant into the `inert` primitive so a nonrelevant control is
+   * unreachable by keyboard/AT even if CSS visibility rules ever change. CSS already hides
+   * nonrelevant elements (display:none), so this is a semantic backstop, not the primary mechanism.
+   */
+  _reflectRelevantInert(enabled) {
+    this.inert = !enabled;
+  }
+
   attachObserver() {
     const modelItem = this.getModelItem();
     if (!modelItem || typeof modelItem.addObserver !== 'function') return;
@@ -120,7 +133,7 @@ export class UIElement extends ForeElementMixin {
    * @param {import('../modelitem.js').ModelItem} modelItem - The ModelItem that changed
    */
 
-/*
+  /*
   update(modelItem) {
     if (this.isBound()) {
       // console.log('[UIElement] update()', modelItem);
@@ -146,16 +159,13 @@ export class UIElement extends ForeElementMixin {
   //   throw new Error('You have to implement the method init!');
   // }
 
-  async refresh(force) {
-    console.log(`🔄 [UIElement] refresh() called for ref="${this.ref}"`);
-  }
+  async refresh(force) {}
 
   async refreshChildren(force) {
     await Fore.refreshChildren(this, force);
   }
 
   activate() {
-    console.log('UIElement.activate() called');
     this.removeAttribute('on-demand');
     this.style.display = '';
     if (this.isBound()) {
@@ -198,12 +208,12 @@ export class UIElement extends ForeElementMixin {
     icon.style.cursor = 'pointer';
     icon.style.marginLeft = '0.5em';
 
-    icon.addEventListener('click', e => {
+    icon.addEventListener('click', async e => {
       e.stopPropagation();
       this.setAttribute('on-demand', 'true');
       this.style.display = 'none';
       document.dispatchEvent(new CustomEvent('update-control-menu'));
-      Fore.dispatch(this, 'hide-control', {});
+      await Fore.dispatch(this, 'hide-control', {});
     });
 
     this.appendChild(icon);

package/src/ui/abstract-control.js

@@ -31,6 +31,8 @@ function isDifferent(oldNodeValue, oldControlValue, newControlValue) {
  * is a general base class for control elements.
  *
  */
+const NATIVE_FORM_TAGS = new Set(['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON']);
+
 export default class AbstractControl extends UIElement {
   constructor() {
     super();
@@ -50,6 +52,31 @@ export default class AbstractControl extends UIElement {
     throw new Error('You have to implement the method getWidget!');
   }
 
+  /**
+   * Native form elements (input/select/textarea/button) already expose required/readonly/disabled
+   * to assistive tech via their native attributes - mirroring those into aria-* would be redundant
+   * ARIA. Non-native widgets (custom elements used as `.widget`) have no such native mapping, so
+   * they need the explicit aria-* attributes.
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _isNativeFormWidget(widget) {
+    return !!widget && NATIVE_FORM_TAGS.has(widget.tagName);
+  }
+
+  /**
+   * Appends `id` to the widget's aria-describedby without clobbering any existing references
+   * (e.g. a hint that already contributed its id).
+   */
+  _addDescribedBy(id) {
+    if (!id) return;
+    const widget = this.getWidget?.() || this.widget;
+    if (!widget) return;
+    const existing = (widget.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+    if (!existing.includes(id)) {
+      widget.setAttribute('aria-describedby', [...existing, id].join(' '));
+    }
+  }
+
   /**
    * (re)apply all modelItem state properties to this control. model -> UI
    */
@@ -232,6 +259,9 @@ export default class AbstractControl extends UIElement {
     if (!this.modelItem.required) {
       this.widget.removeAttribute('required');
       this.removeAttribute('required');
+      if (!this._isNativeFormWidget(this.widget)) {
+        this.widget.removeAttribute('aria-required');
+      }
       if (wasRequired !== this.modelItem.required) {
         this._dispatchEvent('optional');
       }
@@ -250,6 +280,9 @@ export default class AbstractControl extends UIElement {
     }
     this.widget.setAttribute('required', '');
     this.setAttribute('required', '');
+    if (!this._isNativeFormWidget(this.widget)) {
+      this.widget.setAttribute('aria-required', 'true');
+    }
     if (wasRequired !== this.modelItem.required) {
       this._dispatchEvent('required');
     }
@@ -325,10 +358,16 @@ export default class AbstractControl extends UIElement {
       if (effectiveReadonly) {
         this.widget.setAttribute('readonly', '');
         this.setAttribute('readonly', '');
+        if (!this._isNativeFormWidget(this.widget)) {
+          this.widget.setAttribute('aria-readonly', 'true');
+        }
         this._dispatchEvent('readonly');
       } else {
         this.widget.removeAttribute('readonly');
         this.removeAttribute('readonly');
+        if (!this._isNativeFormWidget(this.widget)) {
+          this.widget.removeAttribute('aria-readonly');
+        }
         this._dispatchEvent('readwrite');
       }
     }
@@ -346,7 +385,6 @@ export default class AbstractControl extends UIElement {
   }
 
   // todo - review alert handling altogether. There could be potentially multiple ones in model
-  // TODO: both required and handleValid set valid attrs and aria attrs. Duplicate code
   handleValid() {
     // console.log('mip valid', this.modelItem.required);
 
@@ -363,12 +401,10 @@ export default class AbstractControl extends UIElement {
         this._dispatchEvent('valid');
         this.setAttribute('valid', '');
         this.removeAttribute('invalid');
-        this.getWidget().setAttribute('aria-invalid', 'false');
         // also reset other dependent CSS classes
         this.classList.remove('isEmpty');
       } else {
         this.setAttribute('invalid', '');
-        this.getWidget().setAttribute('aria-invalid', 'true');
         this.removeAttribute('valid');
         // ### constraint is invalid - handle alerts
         /*
@@ -384,10 +420,15 @@ export default class AbstractControl extends UIElement {
             alerts.forEach(modelAlert => {
               const newAlert = document.createElement('fx-alert');
               // const newAlert = document.createElement('span');
+              newAlert.id = newAlert.id || `fx-alert-${Fore.createUUID()}`;
               newAlert.innerHTML = modelAlert;
               this.appendChild(newAlert);
+              this._addDescribedBy(newAlert.id);
               // newAlert.style.display = 'block';
             });
+          } else {
+            controlAlert.id = controlAlert.id || `fx-alert-${Fore.createUUID()}`;
+            this._addDescribedBy(controlAlert.id);
           }
         }
 
@@ -425,6 +466,7 @@ export default class AbstractControl extends UIElement {
       this.setAttribute('nonrelevant', '');
       this.removeAttribute('relevant');
     }
+    this._reflectRelevantInert(newEnabled);
 
     // Dispatch only on actual change
     if (wasEnabled !== newEnabled) {

package/src/ui/fx-alert.js

@@ -7,6 +7,10 @@ export class FxAlert extends AbstractControl {
   }
 
   connectedCallback() {
+    this.setAttribute('role', 'alert');
+    this.setAttribute('aria-live', 'assertive');
+    this.setAttribute('aria-atomic', 'true');
+
     const style = `
       :host {
         height: auto;

package/src/ui/fx-case.js

@@ -93,7 +93,7 @@ export class FxCase extends FxContainer {
       ownerForm.addToBatchedNotifications(target);
       ownerForm.refresh(false);
     });
-    this.addEventListener('deselect', (event) => {
+    this.addEventListener('deselect', event => {
       const ownerForm = this.getOwnerForm();
       ownerForm.addToBatchedNotifications(event.target);
     });

package/src/ui/fx-container.js

@@ -113,6 +113,7 @@ export class FxContainer extends UIElement {
       // console.log('container is not relevant');
       this.removeAttribute('relevant', '');
       this.setAttribute('nonrelevant', '');
+      this._reflectRelevantInert(false);
       this.dispatchEvent(new CustomEvent('disabled', {}));
       return;
     }
@@ -122,10 +123,12 @@ export class FxContainer extends UIElement {
         // this.style.display = 'block';
         this.removeAttribute('nonrelevant', '');
         this.setAttribute('relevant', '');
+        this._reflectRelevantInert(true);
         this.dispatchEvent(new CustomEvent('enabled', {}));
       } else {
         this.removeAttribute('relevant', '');
         this.setAttribute('nonrelevant', '');
+        this._reflectRelevantInert(false);
         this.dispatchEvent(new CustomEvent('disabled', {}));
       }
     }