@tensor_1/react 2.46.0 → 2.48.0

package/dist/components/TimePicker.d.ts

@@ -0,0 +1,80 @@
+import * as react from 'react';
+import { AriaAttributes, CSSProperties } from 'react';
+import { Placement } from '../overlay-position.js';
+
+/** Every word `TimePicker` renders or announces. */
+interface TimePickerLabels {
+    /** The list button's name while no time is set. */
+    open: string;
+    /** The list button's name with a time set; `{time}` is the time as the field shows it. */
+    openSelected: string;
+    /** The list of times (the popover's and the listbox's name). */
+    list: string;
+    /** Shown when the typed text is not a time; `{example}` is a time in the field's own shape. */
+    invalidTime: string;
+    /** Shown when the typed time is before `min`; `{min}`. */
+    tooEarly: string;
+    /** Shown when the typed time is after `max`; `{max}`. */
+    tooLate: string;
+    /** Shown when the typed time is outside an overnight range (`min` after `max`); `{min}`, `{max}`. */
+    outside: string;
+}
+declare const DEFAULT_TIME_PICKER_LABELS: TimePickerLabels;
+/** Why typed text was refused: not a time, or a time before `min` / after `max`. */
+type TimeInputProblem = 'format' | 'early' | 'late' | 'outside';
+interface TimePickerProps {
+    /** The time as `HH:mm` (24-hour), or `null` for none. */
+    value: string | null;
+    onValueChange: (value: string | null) => void;
+    /** Minutes the arrow keys step the minutes by, and between the times in the list. Default 15. */
+    minuteStep?: number;
+    /**
+     * First and last time that can be chosen (`HH:mm`, inclusive). A `min` after `max` (22:00 to
+     * 06:00) is an overnight range: it wraps round midnight, in the keys, the list and the check.
+     */
+    min?: string;
+    max?: string;
+    /**
+     * The locale that writes the time: 14:30 in `de`, 2:30 PM in `en-US`. Default: `UixLabelsProvider`
+     * `dateFormat.locale`, then the viewer's.
+     */
+    locale?: string;
+    /** `true` writes 2:30 PM, `false` 14:30, whatever the locale. */
+    hour12?: boolean;
+    placeholder?: string;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    /** Submits the `HH:mm` value under this name (a hidden input), whatever the field shows. */
+    name?: string;
+    /** Lands on the text input, so a `<label htmlFor>` or `<Field>` names it. */
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    'aria-required'?: AriaAttributes['aria-required'];
+    /** Where the list opens. Default `'bottom-start'`; it flips and shifts to stay on screen. */
+    placement?: Placement;
+    /** Told when typed text is refused, and `null` once the field is fine again. */
+    onInputProblem?: (problem: TimeInputProblem | null) => void;
+    onOpenChange?: (open: boolean) => void;
+    /** Translatable words; English defaults in {@link DEFAULT_TIME_PICKER_LABELS}. */
+    labels?: Partial<TimePickerLabels>;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A time of day as a form field (HAR-1835), beside `DatePicker`: a text input that shows the time
+ * in the locale's shape (14:30 in German, 2:30 PM in en-US) and reads a typed one (`1430`, `9`,
+ * `2:30 pm`) on Enter and when focus leaves it; a clock button opens the times at `minuteStep` in a
+ * list. ArrowUp / ArrowDown step the part the caret is in (the hour, or the minutes by
+ * `minuteStep`), PageUp / PageDown step the hour, Alt+ArrowDown opens the list. Text that is not a
+ * time, or a time outside `min` / `max`, marks the field invalid, says why and leaves `value` alone.
+ * The value is `HH:mm`, what `<input type="time">` holds.
+ */
+declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+export { DEFAULT_TIME_PICKER_LABELS, type TimeInputProblem, TimePicker, type TimePickerLabels, type TimePickerProps };

package/dist/components/TimePicker.js

@@ -0,0 +1,347 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { ClockIcon } from "../icons/components.js";
+import { useUixLabels } from "../labels-context.js";
+import {
+  formatTimeKey,
+  isOvernightRange,
+  isTimeOutOfRange,
+  isValidTimeKey,
+  parseTimeInput,
+  stepTime,
+  timePartEnds,
+  timeSlots,
+  timeToMinutes
+} from "../time-field-model.js";
+import { useFieldPopover } from "./DateFieldParts.js";
+import { Popover } from "./Popover.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const DEFAULT_TIME_PICKER_LABELS = {
+  open: "Choose time",
+  openSelected: "Change time, {time}",
+  list: "Times",
+  invalidTime: "Enter a time like {example}.",
+  tooEarly: "Choose {min} or later.",
+  tooLate: "Choose {max} or earlier.",
+  outside: "Choose a time from {min} to {max}."
+};
+const TimePicker = forwardRef(function TimePicker2({
+  value,
+  onValueChange,
+  minuteStep = 15,
+  min,
+  max,
+  locale: localeProp,
+  hour12,
+  placeholder,
+  size = "md",
+  disabled,
+  readOnly,
+  required,
+  invalid,
+  name,
+  id: idProp,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  placement = "bottom-start",
+  onInputProblem,
+  onOpenChange,
+  labels: labelOverrides,
+  className,
+  style
+}, forwardedRef) {
+  const uid = useId();
+  const id = idProp ?? `${uid}-input`;
+  const popoverId = `${uid}-times`;
+  const listId = `${uid}-list`;
+  const errorId = `${uid}-error`;
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_TIME_PICKER_LABELS, ...uixLabels.timePicker, ...labelOverrides };
+  const locale = localeProp ?? uixLabels.dateFormat?.locale;
+  const anchorRef = useRef(null);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => inputRef.current);
+  const step = Math.max(1, Math.round(minuteStep));
+  const current = isValidTimeKey(value) ? value : null;
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const shownLocale = locale ?? (mounted ? void 0 : "en-GB");
+  const shownHour12 = hour12 ?? (locale || mounted ? void 0 : false);
+  const format = (time) => formatTimeKey(time, shownLocale, shownHour12);
+  const [text, setText] = useState(() => current ? format(current) : "");
+  const [problem, setProblemState] = useState(null);
+  const reported = useRef(null);
+  const setProblem = (next) => {
+    if (next !== reported.current) {
+      reported.current = next;
+      onInputProblem?.(next);
+    }
+    setProblemState(next);
+  };
+  useEffect(() => {
+    setText(current ? format(current) : "");
+    setProblem(null);
+  }, [current, locale, hour12, mounted]);
+  const { open, show, hide, triggerProps } = useFieldPopover(popoverId, () => inputRef.current?.focus({ preventScroll: true }), onOpenChange);
+  const locked = !!disabled || !!readOnly;
+  const commit = () => {
+    const typed = text.trim();
+    if (!typed) {
+      setProblem(null);
+      if (text) setText("");
+      if (value !== null) onValueChange(null);
+      return true;
+    }
+    if (current && typed === format(current)) {
+      setProblem(null);
+      return true;
+    }
+    const parsed = parseTimeInput(typed, locale);
+    if (!parsed) {
+      setProblem("format");
+      return false;
+    }
+    if (isTimeOutOfRange(parsed, min, max)) {
+      setProblem(isOvernightRange(min, max) ? "outside" : min && isValidTimeKey(min) && parsed < min ? "early" : "late");
+      return false;
+    }
+    setProblem(null);
+    setText(format(parsed));
+    if (parsed !== value) onValueChange(parsed);
+    return true;
+  };
+  const choose = (time) => {
+    setProblem(null);
+    setText(format(time));
+    if (time !== value) onValueChange(time);
+  };
+  const onInputKeyDown = (event) => {
+    if (locked || event.nativeEvent.isComposing || event.keyCode === 229) return;
+    const { key, altKey } = event;
+    if (key === "ArrowDown" && altKey) {
+      event.preventDefault();
+      show();
+      return;
+    }
+    if (key === "ArrowUp" || key === "ArrowDown" || key === "PageUp" || key === "PageDown") {
+      event.preventDefault();
+      const base = parseTimeInput(text, locale) ?? current;
+      const input = event.currentTarget;
+      const caret = input.selectionStart ?? 0;
+      const ends = base && input.value === format(base) ? timePartEnds(base, shownLocale, shownHour12) : null;
+      const hourEnd = ends?.hour ?? /^\s*\d{1,2}/.exec(input.value)?.[0].length ?? 0;
+      const onHour = key === "PageUp" || key === "PageDown" || !!base && caret <= hourEnd;
+      const sign = key === "ArrowUp" || key === "PageUp" ? 1 : -1;
+      let next;
+      if (!base) next = stepTime(null, 0, min, max);
+      else if (onHour) next = stepTime(base, sign * 60, min, max);
+      else {
+        const minutes = timeToMinutes(base);
+        const snapped = sign > 0 ? Math.floor(minutes / step) * step + step : Math.ceil(minutes / step) * step - step;
+        next = stepTime(base, snapped - minutes, min, max);
+      }
+      choose(next);
+      requestAnimationFrame(() => {
+        const el = inputRef.current;
+        if (!el || el.ownerDocument.activeElement !== el) return;
+        const moved = timePartEnds(next, shownLocale, shownHour12);
+        const at = moved ? onHour ? moved.hour : moved.minute : el.value.length;
+        try {
+          el.setSelectionRange(at, at);
+        } catch {
+        }
+      });
+      return;
+    }
+    if (key === "Enter" && text.trim() !== (current ? format(current) : "")) {
+      event.preventDefault();
+      commit();
+    }
+  };
+  const pick = (time) => {
+    choose(time);
+    hide(false);
+    inputRef.current?.focus({ preventScroll: true });
+  };
+  const describedBy = [ariaDescribedBy, problem ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+  const isInvalid = !!invalid || !!problem || ariaInvalid === true || ariaInvalid === "true";
+  const example = format(min && isValidTimeKey(min) && min > "14:30" ? min : "14:30");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: anchorRef,
+      className: cx("uix-date-picker", "uix-time-picker", size === "sm" && "uix-date-picker--sm", className),
+      style,
+      onKeyDown: (event) => {
+        if (event.key !== "Escape" || !open) return;
+        event.stopPropagation();
+        event.preventDefault();
+        hide(false);
+        inputRef.current?.focus({ preventScroll: true });
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "uix-date-picker__control", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id,
+              type: "text",
+              autoComplete: "off",
+              spellCheck: false,
+              className: cx("uix-input", size === "sm" && "uix-input--sm", "uix-date-picker__input", "uix-time-picker__input"),
+              value: text,
+              placeholder: placeholder ?? example,
+              disabled,
+              readOnly,
+              required,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-describedby": describedBy,
+              "aria-invalid": isInvalid || void 0,
+              "aria-required": ariaRequired,
+              onChange: (event) => {
+                setText(event.target.value);
+                if (problem) setProblem(null);
+              },
+              onBlur: () => {
+                if (!locked) commit();
+              },
+              onKeyDown: onInputKeyDown
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "uix-date-picker__toggle",
+              disabled: locked,
+              "aria-label": current ? fillLabel(labels.openSelected, { time: format(current) }) : labels.open,
+              ...triggerProps,
+              children: /* @__PURE__ */ jsx(ClockIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current ?? "", disabled }),
+        problem && /* @__PURE__ */ jsx("span", { id: errorId, className: "uix-field__error uix-date-picker__error", role: "alert", children: problem === "format" ? fillLabel(labels.invalidTime, { example }) : problem === "outside" ? fillLabel(labels.outside, { min: format(min ?? ""), max: format(max ?? "") }) : problem === "early" ? fillLabel(labels.tooEarly, { min: format(min ?? "") }) : fillLabel(labels.tooLate, { max: format(max ?? "") }) }),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            id: popoverId,
+            anchor: anchorRef,
+            placement,
+            className: "uix-time-picker__popover",
+            role: "dialog",
+            "aria-label": labels.list,
+            capHeight: true,
+            closeWhenAnchorHidden: true,
+            children: open && /* @__PURE__ */ jsx(
+              TimeList,
+              {
+                ref: listRef,
+                id: listId,
+                value: current,
+                step,
+                min,
+                max,
+                label: labels.list,
+                format,
+                onPick: pick
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+TimePicker.displayName = "TimePicker";
+const TimeList = forwardRef(function TimeList2({ id, value, step, min, max, label, format, onPick }, ref) {
+  const slots = useMemo(() => timeSlots(step, min, max), [step, min, max]);
+  const nearest = () => {
+    if (!slots.length) return -1;
+    if (!value) return 0;
+    const exact = slots.indexOf(value);
+    if (exact >= 0) return exact;
+    const at = slots.findIndex((slot) => slot > value);
+    return at < 0 ? slots.length - 1 : Math.max(0, at - 1);
+  };
+  const [active, setActive] = useState(nearest);
+  const listRef = useRef(null);
+  useImperativeHandle(ref, () => listRef.current);
+  const optionId = (index) => `${id}-${index}`;
+  useEffect(() => {
+    listRef.current?.focus({ preventScroll: true });
+  }, []);
+  const placed = useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    const list = listRef.current;
+    const el = list?.ownerDocument.getElementById(optionId(active));
+    if (!list || !el) return;
+    const top = el.offsetTop;
+    const bottom = top + el.offsetHeight;
+    if (!placed.current) {
+      placed.current = true;
+      list.scrollTop = top - (list.clientHeight - el.offsetHeight) / 2;
+      return;
+    }
+    if (top < list.scrollTop) list.scrollTop = top;
+    else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+  }, [active]);
+  const perHour = Math.max(1, Math.round(60 / step));
+  const onKeyDown = (event) => {
+    const last = slots.length - 1;
+    const moves = { ArrowDown: 1, ArrowUp: -1, PageDown: perHour, PageUp: -perHour };
+    if (event.key in moves) {
+      event.preventDefault();
+      setActive((index) => Math.max(0, Math.min(last, index + moves[event.key])));
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      setActive(event.key === "Home" ? 0 : last);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const slot = slots[active];
+      if (slot) onPick(slot);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      id,
+      role: "listbox",
+      tabIndex: 0,
+      "aria-label": label,
+      className: "uix-listbox uix-time-picker__list",
+      "aria-activedescendant": active >= 0 ? optionId(active) : void 0,
+      onKeyDown,
+      children: slots.map((slot, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: optionId(index),
+          role: "option",
+          className: "uix-listbox__option",
+          "aria-selected": slot === value,
+          "data-active": index === active || void 0,
+          onPointerMove: () => {
+            if (index !== active) setActive(index);
+          },
+          onClick: () => onPick(slot),
+          children: /* @__PURE__ */ jsx("span", { className: "uix-listbox__label", children: format(slot) })
+        },
+        slot
+      ))
+    }
+  );
+});
+export {
+  DEFAULT_TIME_PICKER_LABELS,
+  TimePicker
+};

package/dist/components/Toast.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
+import { XIcon } from "../icons/components.js";
 import { toast as defaultToast } from "../toast-store.js";
 const ToasterContext = createContext(null);
 function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }) {
@@ -44,7 +45,7 @@ function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLa
           message && /* @__PURE__ */ jsx("div", { className: "uix-toast__msg", children: message })
         ] }),
         action != null && /* @__PURE__ */ jsx("div", { className: "uix-toast__action-slot", children: action }),
-        onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-toast__close", onClick: handleClose, "aria-label": dismissLabel, children: "\xD7" })
+        onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-toast__close", onClick: handleClose, "aria-label": dismissLabel, children: /* @__PURE__ */ jsx(XIcon, {}) })
       ]
     }
   );
@@ -124,7 +125,7 @@ function useToastTimers(store, visible, paused) {
         timer = { version: record.version, remaining: record.duration, start: now };
         map.set(record.id, timer);
       }
-      if (paused) {
+      if (paused && record.pauseOnHover !== false) {
         if (timer.handle != null) {
           clearTimeout(timer.handle);
           timer.handle = void 0;

package/dist/components/Tooltip.d.ts

@@ -16,10 +16,11 @@ interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'>
     placement?: Placement;
     /**
      * The trigger's keyboard shortcut, in `KbdCombo` key names, e.g. `['Mod', 'K']` (HAR-2031):
-     * shown with `Kbd` after the text, and set as the trigger's `aria-keyshortcuts` for the
-     * viewer's platform. Default: the `shortcut` of a `Button` child, so a Tooltip around a Button
-     * with a shortcut shows one bubble with the label and the keys. The kit only shows it: the
-     * product binds the key.
+     * shown with `Kbd` after the text. Screen readers hear it once, in the trigger's description
+     * after the text ("Keyboard shortcuts, Shift+?"), the same rule as a `Button` with `shortcut`
+     * (HAR-2416). Default: the `shortcut` of a `Button` child, so a Tooltip around a Button with a
+     * shortcut shows one bubble with the label and the keys. The kit only shows it: the product
+     * binds the key.
      */
     shortcut?: KeyShortcut;
     children?: ReactNode;
@@ -31,6 +32,9 @@ interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'>
  * (flip/shift), shown on hover and keyboard focus, dismissed on blur or Escape
  * (document-level, per WCAG 1.4.13), and hoverable: the bubble stays open while
  * the pointer is over it (UIX-A11Y-1).
+ *
+ * While the bubble is open it takes the first Escape (HAR-2415), also on a combobox-style trigger
+ * whose list is open (a Select, a date field): one Escape closes the bubble, the next one the list.
  */
 declare function Tooltip({ label, content, placement, shortcut, className, children, ...props }: TooltipProps): react.JSX.Element;
 

package/dist/components/Tooltip.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
-import { KbdCombo, ariaKeyShortcuts, isKeyShortcut, useKbdPlatform } from "./Kbd.js";
+import { KbdCombo, isKeyShortcut, spokenKeys, useKbdPlatform } from "./Kbd.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 function Tooltip({ label, content, placement = "top", shortcut, className, children, ...props }) {
   const triggerRef = useRef(null);
   const bubbleRef = useRef(null);
@@ -14,7 +15,6 @@ function Tooltip({ label, content, placement = "top", shortcut, className, child
   const childShortcut = isValidElement(children) ? children.props.shortcut : void 0;
   const own = shortcut ?? (isKeyShortcut(childShortcut) ? childShortcut : void 0);
   const keys = own && own.length > 0 ? own : null;
-  const keyshortcuts = keys ? ariaKeyShortcuts(keys, platform) : void 0;
   useAnchoredPosition(triggerRef, bubbleRef, { open, placement, offset: 6 });
   const cancelClose = () => {
     if (closeTimer.current != null) {
@@ -48,13 +48,16 @@ function Tooltip({ label, content, placement = "top", shortcut, className, child
     cancelClose();
     closeTimer.current = window.setTimeout(hide, 100);
   };
-  useEffect(() => {
-    if (!open) return;
+  useIsomorphicLayoutEffect(() => {
+    if (!open) return void 0;
     const onKey = (e) => {
-      if (e.key === "Escape") hide();
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      e.stopPropagation();
+      hide();
     };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
+    document.addEventListener("keydown", onKey, true);
+    return () => document.removeEventListener("keydown", onKey, true);
   }, [open]);
   useEffect(() => () => {
     if (closeTimer.current != null) clearTimeout(closeTimer.current);
@@ -67,30 +70,27 @@ function Tooltip({ label, content, placement = "top", shortcut, className, child
     }
   }, []);
   const bubbleAttr = { popover: "manual" };
+  const text = content ?? label;
+  const description = keys ? [text != null ? `${id}-text` : null, `${id}-keys`].filter(Boolean).join(" ") : id;
   const single = isValidElement(children);
   const child = single ? cloneElement(children, {
-    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" "),
-    ...keyshortcuts ? { "aria-keyshortcuts": keyshortcuts } : {}
+    "aria-describedby": [children.props["aria-describedby"], description].filter(Boolean).join(" ")
   }) : children;
   return /* @__PURE__ */ jsxs(
     "span",
     {
       ref: triggerRef,
       className: cx("uix-tooltip", className),
-      "aria-describedby": single ? void 0 : id,
-      "aria-keyshortcuts": single ? void 0 : keyshortcuts,
+      "aria-describedby": single ? void 0 : description,
       tabIndex: single ? void 0 : 0,
       onMouseEnter: show,
       onMouseLeave: scheduleHide,
       onFocus: show,
       onBlur: hide,
-      onKeyDown: (e) => {
-        if (e.key === "Escape") hide();
-      },
       ...props,
       children: [
         child,
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "span",
           {
             ref: bubbleRef,
@@ -100,10 +100,13 @@ function Tooltip({ label, content, placement = "top", shortcut, className, child
             onMouseEnter: cancelClose,
             onMouseLeave: scheduleHide,
             ...bubbleAttr,
-            children: [
-              content ?? label,
-              keys && /* @__PURE__ */ jsx("span", { className: "uix-tooltip__shortcut", children: /* @__PURE__ */ jsx(KbdCombo, { keys: [...keys], platform }) })
-            ]
+            children: keys ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              text != null && /* @__PURE__ */ jsx("span", { id: `${id}-text`, children: text }),
+              /* @__PURE__ */ jsxs("span", { className: "uix-tooltip__shortcut", children: [
+                /* @__PURE__ */ jsx("span", { id: `${id}-keys`, className: "uix-visually-hidden", children: spokenKeys(keys, platform) }),
+                /* @__PURE__ */ jsx(KbdCombo, { keys: [...keys], platform, "aria-hidden": "true" })
+              ] })
+            ] }) : text
           }
         )
       ]

package/dist/components/Tree.d.ts

@@ -6,6 +6,12 @@ interface TreeNodeData {
     label: ReactNode;
     /** Plain-text label for keyboard typeahead when `label` is not a string (UIX-A11Y-2). */
     typeaheadLabel?: string;
+    /**
+     * The row's accessible name when `label` is rich (an avatar, a name and a meta line) and only
+     * part of it should be spoken, e.g. the person's name (HAR-1828). By default a row is named by
+     * its own `label`, never by its children.
+     */
+    ariaLabel?: string;
     icon?: ReactNode;
     children?: TreeNodeData[];
     /**
@@ -39,6 +45,8 @@ interface TreeNodeProps {
     rowToggles?: boolean;
     /** Ids of nodes whose children are loading (`aria-busy`). */
     busy?: ReadonlySet<string>;
+    /** Scopes the ids that name each row by its own label (HAR-1828). Set by `Tree`. */
+    treeId?: string;
 }
 interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' | 'onChange'> {
     nodes: TreeNodeData[];

package/dist/components/Tree.js

@@ -15,13 +15,16 @@ const LOADING = "::uix-loading";
 const FAILED = "::uix-error";
 const syntheticOf = (id) => id.endsWith(LOADING) ? { parent: id.slice(0, -LOADING.length), kind: "loading" } : id.endsWith(FAILED) ? { parent: id.slice(0, -FAILED.length), kind: "error" } : null;
 const Ring = () => /* @__PURE__ */ jsx("span", { className: "uix-spinner uix-spinner--sm", "aria-hidden": "true" });
-function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle, onSelect, onFocusNode, level = 1, rowToggles = true, busy }) {
+const labelId = (treeId, nodeId) => `${treeId}-label-${encodeURIComponent(nodeId)}`;
+const rowName = (treeId, node) => node.ariaLabel ? { "aria-label": node.ariaLabel } : { "aria-labelledby": labelId(treeId, node.id) };
+function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle, onSelect, onFocusNode, level = 1, rowToggles = true, busy, treeId = "uix-tree" }) {
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
   const isExpanded = expanded.has(node.id);
   return /* @__PURE__ */ jsxs(
     "li",
     {
       role: "treeitem",
+      ...rowName(treeId, node),
       "aria-level": level,
       "aria-expanded": hasChildren ? isExpanded : void 0,
       "aria-selected": selectable && !syntheticOf(node.id) ? selected === node.id : void 0,
@@ -61,7 +64,7 @@ function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle,
             )
           ) : /* @__PURE__ */ jsx("span", { className: "uix-tree__toggle" }),
           node.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: node.icon }),
-          /* @__PURE__ */ jsx("span", { className: "uix-tree__label", children: node.label })
+          /* @__PURE__ */ jsx("span", { id: labelId(treeId, node.id), className: "uix-tree__label", children: node.label })
         ] }),
         hasChildren && isExpanded && /* @__PURE__ */ jsx("ul", { role: "group", className: "uix-tree__group", children: node.children.map((child) => /* @__PURE__ */ jsx(
           TreeNode,
@@ -76,7 +79,8 @@ function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle,
             onFocusNode,
             level: level + 1,
             rowToggles,
-            busy
+            busy,
+            treeId
           },
           child.id
         )) })
@@ -317,7 +321,8 @@ function Tree({
       onFocusNode: setFocusedId,
       level: 1,
       rowToggles,
-      busy: loading
+      busy: loading,
+      treeId
     },
     node.id
   )) });
@@ -418,6 +423,7 @@ function VirtualTreeView({
             "li",
             {
               role: "treeitem",
+              ...rowName(treeId, f.node),
               "aria-level": f.level,
               "aria-setsize": f.setsize,
               "aria-posinset": f.posinset,
@@ -458,7 +464,7 @@ function VirtualTreeView({
                   )
                 ) : /* @__PURE__ */ jsx("span", { className: "uix-tree__toggle" }),
                 f.node.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: f.node.icon }),
-                /* @__PURE__ */ jsx("span", { className: "uix-tree__label", children: f.node.label })
+                /* @__PURE__ */ jsx("span", { id: labelId(treeId, f.node.id), className: "uix-tree__label", children: f.node.label })
               ] })
             },
             f.node.id