@jinntec/fore 3.3.2 → 4.0.0

package/src/ui/fx-repeatitem.js

@@ -54,7 +54,10 @@ export class FxRepeatitem extends withDraggability(UIElement, true) {
     // Its children already get their context from the repeatitem via getInScopeContext().
     this.ref = `${this.parentNode.ref}`;
 
-    this.tabindex = 0;
+    this.setAttribute('role', 'listitem');
+    // `tabindex` (lowercase) is not a reflected IDL property - assigning it was a silent no-op.
+    // Use the actual attribute so repeat items are keyboard-focusable.
+    this.setAttribute('tabindex', '0');
   }
 
   disconnectedCallback() {

package/src/ui/fx-switch.js

@@ -21,20 +21,29 @@ class FxSwitch extends FxContainer {
     this.selectedCase = null;
     this.cases = null;
     this.visitedResetted = false;
+    this.tabTriggers = [];
   }
 
   connectedCallback() {
     if (super.connectedCallback) {
       super.connectedCallback();
     }
+    // Opt-in ARIA tabs pattern (role="tablist"/"tab"/"tabpanel", aria-selected, arrow-key
+    // navigation). Requires `fx-trigger` tab controls (each with an `fx-toggle` child targeting
+    // a sibling `fx-case`) to be direct children, so a valid tablist can be assembled - see
+    // ACCESSIBILITY.md. Plain fx-switch usage (bound switches, wizards, accordions built from
+    // interleaved trigger/case pairs) is unaffected.
+    this.tabsMode = this.getAttribute('appearance') === 'tabs';
+
     const style = `
        :host ::slotted(fx-case.selected-case){
         display: block;
     }
     `;
-    const html = `
-       <slot></slot>
-    `;
+    const html = this.tabsMode
+      ? `<div part="tablist" role="tablist"><slot name="tab"></slot></div>
+         <slot></slot>`
+      : `<slot></slot>`;
     this.shadowRoot.innerHTML = `
         <style>
             ${style}
@@ -44,6 +53,11 @@ class FxSwitch extends FxContainer {
     this.cases = [];
     this.formerCase = null;
     this.selectedCase = null;
+    this.tabTriggers = [];
+
+    if (this.tabsMode) {
+      this.addEventListener('keydown', e => this._handleTabKeydown(e));
+    }
   }
 
   async refresh(force) {
@@ -61,9 +75,104 @@ class FxSwitch extends FxContainer {
       this.toggle(this.selectedCase);
     }
 
+    if (this.tabsMode) {
+      this._setupTabs();
+    }
+
     Fore.refreshChildren(this.selectedCase, force);
   }
 
+  /**
+   * Discovers direct-child `fx-trigger`/`fx-toggle` pairs that target this switch's cases and
+   * wires them up as an ARIA tab strip. Runs discovery once (mirroring the `this.cases` caching
+   * above); subsequent calls just re-sync the selected state.
+   */
+  _setupTabs() {
+    if (this.tabTriggers.length > 0) {
+      this._syncTabSelection();
+      return;
+    }
+
+    const triggers = Array.from(this.querySelectorAll(':scope > fx-trigger'));
+    this.tabTriggers = triggers
+      .map(trigger => {
+        const toggle = trigger.querySelector(':scope > fx-toggle[case]');
+        if (!toggle) return null;
+        const targetCase = this.cases.find(c => c.id === toggle.getAttribute('case'));
+        if (!targetCase) return null;
+        const widget = (trigger.getWidget && trigger.getWidget()) || trigger.firstElementChild;
+        if (!widget) return null;
+        return { trigger, targetCase, widget };
+      })
+      .filter(Boolean);
+
+    if (this.tabTriggers.length === 0) return;
+
+    this.tabTriggers.forEach(({ trigger, targetCase, widget }) => {
+      trigger.setAttribute('slot', 'tab');
+      targetCase.id = targetCase.id || `fx-case-${Fore.createUUID()}`;
+      widget.id = widget.id || `fx-tab-${Fore.createUUID()}`;
+      widget.setAttribute('role', 'tab');
+      widget.setAttribute('aria-controls', targetCase.id);
+
+      targetCase.setAttribute('role', 'tabpanel');
+      targetCase.setAttribute('aria-labelledby', widget.id);
+      if (!targetCase.hasAttribute('tabindex')) {
+        targetCase.setAttribute('tabindex', '0');
+      }
+    });
+
+    this._syncTabSelection();
+  }
+
+  /**
+   * Reflects the current `selectedCase` onto the tab strip: `aria-selected` plus a roving
+   * tabindex (selected tab is the only one reachable by Tab; arrow keys move between the rest).
+   */
+  _syncTabSelection() {
+    this.tabTriggers.forEach(({ targetCase, widget }) => {
+      const selected = targetCase === this.selectedCase;
+      widget.setAttribute('aria-selected', String(selected));
+      widget.setAttribute('tabindex', selected ? '0' : '-1');
+    });
+  }
+
+  /**
+   * Arrow-key navigation between tabs (Left/Right/Up/Down/Home/End), following the ARIA
+   * authoring practices "automatic activation" model - moving focus also selects the case.
+   */
+  async _handleTabKeydown(e) {
+    const { tabTriggers } = this;
+    if (tabTriggers.length === 0) return;
+
+    const idx = tabTriggers.findIndex(({ widget }) => widget === e.target);
+    if (idx === -1) return;
+
+    let newIdx;
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        newIdx = (idx + 1) % tabTriggers.length;
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        newIdx = (idx - 1 + tabTriggers.length) % tabTriggers.length;
+        break;
+      case 'Home':
+        newIdx = 0;
+        break;
+      case 'End':
+        newIdx = tabTriggers.length - 1;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    const { trigger, widget } = tabTriggers[newIdx];
+    await trigger.performActions();
+    widget.focus();
+  }
+
   _dispatchEvents() {
     if (this.selectedCase === this.formerCase) return;
     if (this.formerCase && this.formerCase !== this.selectedCase) {
@@ -150,6 +259,10 @@ class FxSwitch extends FxContainer {
     this._dispatchEvents();
     this.formerCase = this.selectedCase;
 
+    if (this.tabsMode) {
+      this._syncTabSelection();
+    }
+
     // Tell the owner form we might have new template expressions here
     this.getOwnerForm().scanForNewTemplateExpressionsNextRefresh();
     this.getOwnerForm().getModel().updateModel();

package/src/ui/fx-trigger.js

@@ -26,7 +26,7 @@ export class FxTrigger extends XfAbstractControl {
       if (!elements[0].getAttribute('tabindex')) {
         elements[0].setAttribute('tabindex', '0');
       }
-      if (elements[0].nodeName !== 'BUTTON') {
+      if (elements[0].nodeName !== 'BUTTON' && !elements[0].getAttribute('role')) {
         elements[0].setAttribute('role', 'button');
       }
 
@@ -98,11 +98,16 @@ export class FxTrigger extends XfAbstractControl {
       repeatedItem.click();
     }
 
-    // Update all child variables, but only once
-    this.querySelectorAll('fx-var').forEach(variableElement => variableElement.refresh());
-
     for (let i = 0; i < this.children.length; i += 1) {
       const child = this.children[i];
+      // XForms 2.0: action variables are evaluated in sequence between sibling
+      // actions — a variable after an action sees that action's effects. Variables
+      // nested inside an fx-action child are evaluated by fx-action.perform().
+      if (child.localName === 'fx-var') {
+        child.refresh();
+        // eslint-disable-next-line no-continue
+        continue;
+      }
       if (typeof child.execute === 'function') {
         if (e) {
           // We are handling the event. Stop it from going further

package/src/ui/fx-upload.js

@@ -39,6 +39,7 @@ export default class FxUpload extends XfAbstractControl {
       },
     };
   }
+
   connectedCallback() {
     this.updateEvent = 'change';
     this.accept = this.hasAttribute('accept') ? this.getAttribute('accept') : '';
@@ -68,7 +69,7 @@ export default class FxUpload extends XfAbstractControl {
     });
 
     // console.log('widget ', this.widget);
-    let listenOn = this.widget; // default: usually listening on widget
+    const listenOn = this.widget; // default: usually listening on widget
 
     // ### convenience marker event
     if (this.debounceDelay) {
@@ -137,7 +138,7 @@ export default class FxUpload extends XfAbstractControl {
       const readMethod = isTextFile ? 'readAsText' : 'readAsDataURL';
 
       reader.onload = () => {
-        const result = reader.result;
+        const { result } = reader;
         // If it's a binary file, return only the Base64 content without the MIME prefix
         if (!isTextFile) {
           const base64Content = result.split(',')[1]; // Remove MIME prefix
@@ -163,6 +164,10 @@ export default class FxUpload extends XfAbstractControl {
    * @param val the new value to be set
    */
   setValue(val) {
+    const model = this.getModel();
+    const undoManager = model?.getEffectiveUndoManager();
+    undoManager?.beginCapture();
+
     this.value = val;
     const modelitem = this.getModelItem();
 
@@ -189,6 +194,7 @@ export default class FxUpload extends XfAbstractControl {
 
     if (modelitem?.readonly) {
       console.warn('attempt to change readonly node', modelitem);
+      undoManager?.discard();
       return; // do nothing when modelItem is readonly
     }
 
@@ -200,7 +206,6 @@ export default class FxUpload extends XfAbstractControl {
       this.modelItem.boundControls.push(this);
     }
 */
-    const model = this.getModel();
     Fore.dispatch(this, 'value-changed', {
       path: this.modelItem.path,
       value: this.modelItem.value,
@@ -208,8 +213,9 @@ export default class FxUpload extends XfAbstractControl {
       instanceId: this.modelItem.instanceId,
       foreId: this.getOwnerForm().id,
     });
-    this.getModel().updateModel();
+    model.updateModel();
     this.getOwnerForm().refresh(true);
+    undoManager?.commit(modelitem?.node);
 
     // console.log('data', this.getOwnerForm().getModel().getDefaultInstanceData());
   }

package/src/ui/repeat-base.js

@@ -16,6 +16,7 @@
  */
 import { Fore } from '../fore.js';
 import { evaluateXPath } from '../xpath-evaluation.js';
+import { DependencyNotifyingDomFacade } from '../DependencyNotifyingDomFacade.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { withDraggability } from '../withDraggability.js';
 import { UIElement } from './UIElement.js';
@@ -179,6 +180,7 @@ export class RepeatBase extends withDraggability(UIElement, false) {
   }
 
   disconnectedCallback() {
+    if (super.disconnectedCallback) super.disconnectedCallback();
     this.getOwnerForm().removeEventListener('deleted', this.handleDelete);
     this.getOwnerForm().removeEventListener('insert', this.handleInsert);
   }
@@ -217,6 +219,7 @@ export class RepeatBase extends withDraggability(UIElement, false) {
 
     this.getOwnerForm().addToBatchedNotifications(newRepeatItem);
   }
+
   /**
    * @abstract
    *
@@ -253,17 +256,19 @@ export class RepeatBase extends withDraggability(UIElement, false) {
       });
     }
 
-    /*
-              this.touchedPaths = new Set();
-              const instance = XPathUtil.resolveInstance(this, this.ref);
-              const depTrackDomfacade = new DependencyNotifyingDomFacade((node) => {
-                  this.touchedPaths.add(XPathUtil.getPath(node, instance));
-              });
-              const rawNodeset = evaluateXPath(this.ref, inscope, this, {}, {}, depTrackDomfacade );
-        */
-    const rawNodeset = evaluateXPath(this.ref, inscope, this);
-
-    // console.log('Touched!', this.ref, [...this.touchedPaths].join(', '));
+    let touchedNodes = null;
+    let domFacade = null;
+    if (this._refNeedsDependencyTracking()) {
+      touchedNodes = new Set();
+      domFacade = new DependencyNotifyingDomFacade(node => touchedNodes.add(node));
+    }
+
+    const rawNodeset = evaluateXPath(this.ref, inscope, this, {}, {}, domFacade);
+
+    if (touchedNodes) {
+      this._trackRefDependencies(touchedNodes);
+    }
+
     if (rawNodeset.length === 1 && Array.isArray(rawNodeset[0])) {
       // This XPath likely returned an XPath array. Just collapse to that array
       this.nodeset = rawNodeset[0];
@@ -447,7 +452,10 @@ export class RepeatBase extends withDraggability(UIElement, false) {
       if (mi.path.startsWith(`${parentBaseInChildStyle}_`)) return;
 
       // Inject _op immediately after the parent base segment
-      mi.path = `${parentBaseInChildStyle}_${op}${mi.path.slice(parentBaseInChildStyle.length)}`;
+      this.getModel()._setModelItemPath(
+        mi,
+        `${parentBaseInChildStyle}_${op}${mi.path.slice(parentBaseInChildStyle.length)}`,
+      );
     };
 
     if (parentNode.attachObserver) {

package/src/withDraggability.js

@@ -177,6 +177,10 @@ export const withDraggability = (superclass, isAlsoDraggable) =>
 				this.replaceChildren(draggedItem);
 			}
 */
+        // NOTE: this branch (fx-droptarget) reorders live DOM/UI elements directly, not
+        // instance data - there is nothing here for UndoManager's instance-data snapshots
+        // to capture, so it is intentionally not wrapped with undo capture (see the
+        // dataNode branch below for the case that IS undoable).
         event.preventDefault();
         this.getOwnerForm().getModel().updateModel();
         this.getOwnerForm().refresh(true);
@@ -187,6 +191,10 @@ export const withDraggability = (superclass, isAlsoDraggable) =>
         return;
       }
 
+      const model = this.getOwnerForm().getModel();
+      const undoManager = model.getEffectiveUndoManager();
+      undoManager.beginCapture();
+
       if (this.localName === 'fx-repeat') {
         // We are sure we'll handle this event!
         event.preventDefault();
@@ -217,7 +225,8 @@ export const withDraggability = (superclass, isAlsoDraggable) =>
       }
 
       // Note: full refresh needed since multiple model items may be affected.
-      this.getOwnerForm().getModel().updateModel();
+      model.updateModel();
       this.getOwnerForm().refresh(true);
+      undoManager.commit(dataNode);
     }
   };

package/src/xpath-evaluation.js

@@ -1360,7 +1360,7 @@ export function evaluateXPath(
       return fxEvaluateXPath(
         expr0,
         contextNode,
-        __jsonDomFacade,
+        domFacade ? domFacade.withInner(__jsonDomFacade) : __jsonDomFacade,
         { ...variablesInScope, ...variables },
         fxEvaluateXPath.ALL_RESULTS_TYPE,
         {
@@ -1781,14 +1781,20 @@ export function evaluateXPathToString(xpath, contextNode, formElement, domFacade
     // JSON context, non-lookup => evaluate via JSON facade
     if (_isJsonNode(contextNode) && !_looksLikeLookupExpr(expr0)) {
       const variablesInScope = getVariablesInScope(formElement);
-      const res = fxEvaluateXPathToString(expr0, contextNode, __jsonDomFacade, variablesInScope, {
-        currentContext: { formElement },
-        functionNameResolver,
-        moduleImports: { xf: XFORMS_NAMESPACE_URI },
-        namespaceResolver: null,
-        language: Language.XPATH_3_1_LANGUAGE,
-        xmlSerializer: new XMLSerializer(),
-      });
+      const res = fxEvaluateXPathToString(
+        expr0,
+        contextNode,
+        domFacade ? domFacade.withInner(__jsonDomFacade) : __jsonDomFacade,
+        variablesInScope,
+        {
+          currentContext: { formElement },
+          functionNameResolver,
+          moduleImports: { xf: XFORMS_NAMESPACE_URI },
+          namespaceResolver: null,
+          language: Language.XPATH_3_1_LANGUAGE,
+          xmlSerializer: new XMLSerializer(),
+        },
+      );
       return stringify(res);
     }
 
@@ -1906,7 +1912,7 @@ export function evaluateXPathToStrings(xpath, contextNode, formElement, domFacad
       const res = fxEvaluateXPathToStrings(
         expr0,
         contextNode,
-        __jsonDomFacade,
+        domFacade ? domFacade.withInner(__jsonDomFacade) : __jsonDomFacade,
         getVariablesInScope(formElement),
         {
           currentContext: { formElement },
@@ -1986,14 +1992,20 @@ export function evaluateXPathToNumber(xpath, contextNode, formElement, domFacade
 
     if (_isJsonNode(contextNode) && !_looksLikeLookupExpr(expr0)) {
       const variablesInScope = getVariablesInScope(formElement);
-      return fxEvaluateXPathToNumber(expr0, contextNode, __jsonDomFacade, variablesInScope, {
-        currentContext: { formElement },
-        functionNameResolver,
-        moduleImports: { xf: XFORMS_NAMESPACE_URI },
-        namespaceResolver: null,
-        language: Language.XPATH_3_1_LANGUAGE,
-        xmlSerializer: new XMLSerializer(),
-      });
+      return fxEvaluateXPathToNumber(
+        expr0,
+        contextNode,
+        domFacade ? domFacade.withInner(__jsonDomFacade) : __jsonDomFacade,
+        variablesInScope,
+        {
+          currentContext: { formElement },
+          functionNameResolver,
+          moduleImports: { xf: XFORMS_NAMESPACE_URI },
+          namespaceResolver: null,
+          language: Language.XPATH_3_1_LANGUAGE,
+          xmlSerializer: new XMLSerializer(),
+        },
+      );
     }
 
     if (_looksLikeLookupExpr(expr0)) {

package/src/xpath-path.js

@@ -14,11 +14,130 @@ function shortenPath(path) {
   return tmp1.substring(tmp1.indexOf('/'), tmp.length);
 }
 
+// --- fast native path computation -------------------------------------------------
+//
+// fontoxpath's `path()` function is correct but calling it once per node has real fixed
+// overhead (compiling/interpreting the query, building a dynamic context, walking the
+// domFacade) that dominates in practice over the tree walk itself. getPath()/getDocPath()
+// are called once per node during bind-graph construction (fx-bind.js's _buildBindGraph())
+// AND once per node inside any `iterate` action (fx-setattribute.js, fx-setvalue.js) - so a
+// large sibling list (eg. an 800-row genericode codelist) previously meant 800+ separate
+// fontoxpath `path()` evaluations, each re-scanning preceding siblings to compute the index
+// -- measured at several seconds for UNTDID 1001 (802 Row elements) in
+// demo/codelists/codelist-editor.html.
+//
+// nativeDocPath() below replicates the exact string format `path()` produces (post
+// shortenPath) using plain DOM traversal - same asymptotic sibling-counting cost as
+// fontoxpath's own implementation, but without the XPath-engine overhead per call. It
+// returns `null` for anything it isn't confident matches fontoxpath's behavior exactly (eg.
+// exotic node types); callers fall back to the original fontoxpath-based path in that case,
+// so correctness never depends on this function handling every possible node shape.
+
+/**
+ * Identity used to count preceding siblings the way fn:path() does: same element name
+ * *and* namespace, or same text()/comment()/processing-instruction(target) kind. Two
+ * same-localName elements in different namespaces are (correctly) not siblings of the
+ * same "kind" here, matching fontoxpath indexing same-namespace elements independently.
+ * @param {Node} node
+ * @returns {string|null}
+ */
+function segmentKey(node) {
+  switch (node.nodeType) {
+    case Node.ELEMENT_NODE:
+      return `E|${node.namespaceURI || ''}|${node.localName || node.nodeName}`;
+    case Node.TEXT_NODE:
+    case Node.CDATA_SECTION_NODE:
+      return 'T';
+    case Node.COMMENT_NODE:
+      return 'C';
+    case Node.PROCESSING_INSTRUCTION_NODE:
+      return `P|${node.target}`;
+    default:
+      return null;
+  }
+}
+
+/**
+ * @param {Node} node
+ * @returns {string|null}
+ */
+function segmentLabel(node) {
+  switch (node.nodeType) {
+    case Node.ELEMENT_NODE:
+      return node.localName || node.nodeName;
+    case Node.TEXT_NODE:
+    case Node.CDATA_SECTION_NODE:
+      return 'text()';
+    case Node.COMMENT_NODE:
+      return 'comment()';
+    case Node.PROCESSING_INSTRUCTION_NODE:
+      return `processing-instruction(${node.target})`;
+    default:
+      return null;
+  }
+}
+
+/**
+ * 1-based index among preceding siblings sharing the same `segmentKey`.
+ * @param {Node} node
+ * @param {string} key
+ * @returns {number}
+ */
+function siblingIndex(node, key) {
+  let index = 1;
+  let sib = node.previousSibling;
+  while (sib) {
+    if (segmentKey(sib) === key) index += 1;
+    sib = sib.previousSibling;
+  }
+  return index;
+}
+
+/**
+ * @param {Node} node
+ * @returns {string|null} the fontoxpath-`path()`-equivalent doc path (eg. `/a[1]/b[2]`,
+ *   always starting with `/`), or `null` if this node shape isn't one this function is
+ *   confident about - the caller should fall back to the fontoxpath-based computation.
+ */
+function nativeDocPath(node) {
+  if (!node || node.nodeType === undefined) return null;
+
+  if (node.nodeType === Node.ATTRIBUTE_NODE) {
+    const owner = node.ownerElement;
+    if (!owner) return null;
+    const ownerPath = nativeDocPath(owner);
+    if (ownerPath === null) return null;
+    return `${ownerPath}/@${node.localName || node.name}`;
+  }
+
+  if (node.nodeType === Node.DOCUMENT_NODE) return '/';
+
+  // Build the segment chain from `node` up to (and including) the outermost ancestor
+  // that isn't a document node, then drop that outermost segment - matching the "cut-off
+  // root node ref" behavior of the original fontoxpath-based shortenPath().
+  const chain = [];
+  let current = node;
+  while (current && current.nodeType !== Node.DOCUMENT_NODE) {
+    const key = segmentKey(current);
+    const label = segmentLabel(current);
+    if (key === null || label === null) return null;
+    chain.push(`${label}[${siblingIndex(current, key)}]`);
+    current = current.parentNode;
+  }
+  chain.reverse();
+
+  if (chain.length > 1) chain.shift();
+  return chain.length ? `/${chain.join('/')}` : '/';
+}
+
 /**
  * @param {Node} node
  * @returns string
  */
 export function getDocPath(node) {
+  const native = nativeDocPath(node);
+  if (native !== null) return native;
+
   const path = fx.evaluateXPathToString('path()', node);
   // Path is like `$default/x[1]/y[1]`
   const shortened = shortenPath(path);
@@ -101,6 +220,9 @@ export function getPath(node, instanceId = 'default') {
 }
 
 function getXmlPath(node, instanceId) {
+  const native = nativeDocPath(node);
+  if (native !== null) return `$${instanceId}${native}`;
+
   const path = fx.evaluateXPathToString('path()', node);
   // Path is like `$default/x[1]/y[1]`
   const shortened = shortenPath(path);