@jsenv/navi 0.29.481 → 0.29.482

package/dist/dev/jsenv_navi.js

@@ -43058,6 +43058,14 @@ const useParallelGuard = (max) => {
  * `getAssociatedLabels` in control_hooks.jsx. Both channels carry the same
  * values and land on the same setters, so a control reachable through both is
  * simply told twice.
+ *
+ * The link also runs the other way, for a control whose role is on its root
+ * (`nameOn: "root"`, a wheel): a label[for] can only point at its host, an
+ * aria-hidden carrier, and names nothing. That control says so in the state it
+ * publishes; its label then drops `for` and publishes its own id under the
+ * control's id instead, and the control names its root with the ids it finds
+ * there (aria-labelledby). A label[for] kept as well would name the carrier
+ * too, and a lookup by label would find two elements.
  */
 
 const stateByControlId = new Map();
@@ -43110,6 +43118,68 @@ const subscribeToControlState = (controlId, callback) => {
   };
 };
 
+const labelIdSetByControlId = new Map();
+const labelCallbackSetByControlId = new Map();
+
+const notifyLabelIds = (controlId) => {
+  const callbackSet = labelCallbackSetByControlId.get(controlId);
+  if (!callbackSet) {
+    return;
+  }
+  const labelIds = readLabelIds(controlId);
+  for (const callback of callbackSet) {
+    callback(labelIds);
+  }
+};
+// One string ("label_a label_b"), the shape aria-labelledby takes, and equal
+// from one call to the next while nothing changed.
+const readLabelIds = (controlId) => {
+  const labelIdSet = labelIdSetByControlId.get(controlId);
+  return labelIdSet ? Array.from(labelIdSet).join(" ") : undefined;
+};
+
+/**
+ * Publishes `labelId` as a label of the control identified by `controlId`.
+ * Returns the teardown.
+ */
+const publishLabelToControl = (controlId, labelId) => {
+  let labelIdSet = labelIdSetByControlId.get(controlId);
+  if (!labelIdSet) {
+    labelIdSet = new Set();
+    labelIdSetByControlId.set(controlId, labelIdSet);
+  }
+  labelIdSet.add(labelId);
+  notifyLabelIds(controlId);
+  return () => {
+    labelIdSet.delete(labelId);
+    if (labelIdSet.size === 0) {
+      labelIdSetByControlId.delete(controlId);
+    }
+    notifyLabelIds(controlId);
+  };
+};
+
+/**
+ * Subscribes to the ids of the labels published for `controlId`. The callback
+ * is called right away (with `undefined` when there is none), then on every
+ * change. Returns the teardown.
+ */
+const subscribeToControlLabels = (controlId, callback) => {
+  let callbackSet = labelCallbackSetByControlId.get(controlId);
+  if (!callbackSet) {
+    callbackSet = new Set();
+    labelCallbackSetByControlId.set(controlId, callbackSet);
+  }
+  callbackSet.add(callback);
+  callback(readLabelIds(controlId));
+  return () => {
+    callbackSet.delete(callback);
+    if (callbackSet.size === 0) {
+      labelCallbackSetByControlId.delete(controlId);
+    }
+  };
+};
+
 const FormContext = createContext();
 
 /**
@@ -47522,17 +47592,11 @@ const useControlProps = (props, {
           };
         }
         if (defaultAction === "activate") {
-          // activating the control (e.g. space on a button/range)
           return {
             name: `keydown to activate`,
             prevented: () => e.preventDefault(),
             allowed: () => {
               triggerUIAction(e);
-              if (controlType === "button" && e.key === " ") {
-                // prevent browser dispatching click
-                // it could lead to duplicates as we explicitely handled the space to click here
-                e.preventDefault();
-              }
             }
           };
         }
@@ -47669,7 +47733,15 @@ const useControlProps = (props, {
           runWhenActionSucceeded(completion, deferredCommand);
         };
         return {
-          keyDown: keyDownDefault,
+          keyDown: e => {
+            if (getKeyboardEventDefaultAction(e) === "activate") {
+              // The browser presses the button itself — Enter clicks on
+              // keydown, Space on keyup — and the click reaction below answers
+              // that press, once: ui action, action and command together.
+              return null;
+            }
+            return keyDownDefault(e);
+          },
           mouseDown: e => {
             if (actsOnMouseDown) {
               return {
@@ -47688,7 +47760,9 @@ const useControlProps = (props, {
             return null;
           },
           click: e => {
-            if (actsOnMouseDown) {
+            // A click no mousedown came before (the keyboard, a label) is a
+            // press the mousedown reaction never saw.
+            if (actsOnMouseDown && e.detail !== 0) {
               return null;
             }
             return {
@@ -48932,7 +49006,8 @@ const useInteractiveProps = (props, {
       const controlState = {
         disabled: disabledResolved,
         readOnly,
-        required: requiredResolved
+        required: requiredResolved,
+        nameOn
       };
       for (const label of getAssociatedLabels(element)) {
         label.dispatchEvent(new CustomEvent("navi_control_state", {
@@ -48953,6 +49028,22 @@ const useInteractiveProps = (props, {
         unpublishControlStateToLabels(publishedIdRef.current);
       };
     }, []);
+    // Named on its root, the control is named by its labels' ids: they drop
+    // their `for` for it (see control_label_state.js). A name the caller gives
+    // wins.
+    const [labelledBy, setLabelledBy] = useState();
+    const {
+      id
+    } = props;
+    useLayoutEffect(() => {
+      if (nameOn !== "root" || !id) {
+        return undefined;
+      }
+      return subscribeToControlLabels(id, setLabelledBy);
+    }, [id]);
+    if (labelledBy && controlRootProps["aria-label"] === undefined && controlRootProps["aria-labelledby"] === undefined) {
+      controlRootProps["aria-labelledby"] = labelledBy;
+    }
   }
   {
     const isCheckable = isCheckableInput(uiStateController.controlType, props.type);
@@ -60123,6 +60214,7 @@ const Label = props => {
   const [readOnly, setReadOnly] = useState(false);
   const [required, setRequired] = useState(false);
   const [connected, setConnected] = useState(false);
+  const [namesControlRoot, setNamesControlRoot] = useState(false);
   // Set htmlFor only when we know the correct target id:
   //   - caller explicitly provided one (even undefined to opt out)
   //   - a parent Field provided one via ControlIdContext
@@ -60149,8 +60241,37 @@ const Label = props => {
       setDisabled(Boolean(controlState?.disabled));
       setReadOnly(Boolean(controlState?.readOnly));
       setRequired(Boolean(controlState?.required));
+      setNamesControlRoot(controlState?.nameOn === "root");
     });
   }, [htmlFor]);
+  // A control whose role is on its root (a wheel) is named by this label's id
+  // rather than by `for`, which can only point at its aria-hidden host (see
+  // control_label_state.js).
+  const labelId = props.id;
+  useLayoutEffect(() => {
+    if (!htmlFor || !namesControlRoot) {
+      return undefined;
+    }
+    return publishLabelToControl(htmlFor, labelId);
+  }, [htmlFor, namesControlRoot, labelId]);
+  // …and without `for`, the press that focuses the control is this label's
+  // to answer. A press on something interactive inside the label stays that
+  // thing's, as the browser does for a label[for].
+  const onClickFocusingControlRoot = e => {
+    props.onClick?.(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    const interactive = e.target.closest("a[href], button, input, select, textarea, [tabindex]");
+    if (interactive && e.currentTarget.contains(interactive)) {
+      return;
+    }
+    const host = document.getElementById(htmlFor);
+    const controlRoot = host && findControlRoot(host);
+    if (controlRoot) {
+      moveFocusTo(controlRoot);
+    }
+  };
   const [messageProps, remainingProps] = extractMessageAndRemainingProps({
     ...props,
     requiredIndicator: undefined
@@ -60167,6 +60288,8 @@ const Label = props => {
       ":read-only": readOnly
     },
     ...remainingProps,
+    htmlFor: namesControlRoot ? undefined : htmlFor,
+    onClick: namesControlRoot ? onClickFocusingControlRoot : props.onClick,
     onnavi_control_state: e => {
       setConnected(true);
       setDisabled(e.detail.disabled);
@@ -67508,10 +67631,12 @@ const TimeHour = ({
       children: String(children)
     });
   }
+  const dateTime = formatClock(hours * 3600);
   if (format === "timestring") {
     const totalMinutes = Math.round(hours * 60);
     const date = new Date(1970, 0, 1, Math.floor(totalMinutes / 60), totalMinutes % 60, 0);
     return jsx(TimeText, {
+      dateTime: dateTime,
       ...props,
       children: formatTime(date, {
         lang
@@ -67524,6 +67649,7 @@ const TimeHour = ({
     forceUnit
   });
   return jsx(TimeText, {
+    dateTime: dateTime,
     ...props,
     children: text
   });