@eifi1/ui-kit 0.11.0 → 0.13.0

package/src/components/entity-combobox.tsx

@@ -105,6 +105,14 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
   debounceMs,
   loadErrorLabel,
   "aria-label": ariaLabel,
+  // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than
+  // the wrapper — see MultiEntityCombobox: `Field`'s render-prop spreads `{ id,
+  // aria-describedby, aria-invalid, aria-required }`, and on the role-less wrapper
+  // div the label's `htmlFor` named nothing and the hint described nothing.
+  id,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
   ...rest
 }: EntityComboboxProps<V, C>) {
   const core = useComboboxCore<V>({
@@ -115,7 +123,11 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
     minChars,
     debounceMs,
   });
-  const field = useComboboxFieldError(error, invalid);
+  const field = useComboboxFieldError(
+    error,
+    invalid || ariaInvalid === true || ariaInvalid === "true",
+    ariaDescribedBy,
+  );
   // The props are the per-instance overrides, the provider the app-wide ones; a
   // prop left `undefined` falls through to the provider rather than masking it.
   const labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS, {
@@ -125,7 +137,7 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
     create: createLabel,
   });
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-  const { open, results, resolve, setOpen } = core;
+  const { open, results, resolve, setOpen, rememberOption, query, triggerRef } = core;
   // One id per instance, generated here rather than in the core: `aria-controls` on
   // the trigger has to name the list while the list is still closed, so the id
   // belongs to whoever renders both ends of it.
@@ -134,7 +146,7 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
   // The clear value is "nothing selected" too, whichever one the caller picked.
   const chosen: V | null = value == null || value === clearValue ? null : (value as V);
   const selectedOption = chosen == null ? null : resolve(chosen);
-  const q = core.query.trim();
+  const q = query.trim();
   const showCreate =
     Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());
   const showClear = Boolean(clearable && chosen != null && !disabled);
@@ -142,7 +154,7 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
   const triggerText = selectedOption?.label ?? placeholder ?? "";
 
   const choose = (o: ComboOption<V>) => {
-    core.cacheRef.current.set(o.value, o);
+    rememberOption(o);
     onChange(o.value);
     // Back to the trigger, not to <body>: the panel that held focus is about to
     // unmount, and a keyboard user who just answered this field should be standing
@@ -151,13 +163,15 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
   };
 
   return (
-    // `rest` dresses the wrapper, which has no role; the accessible NAME goes on
-    // the trigger, which has one. Spread FIRST so the trigger's ARIA and the
+    // `rest` dresses the wrapper, which has no role; the accessible NAME — and the
+    // id, description, invalid and required state above — go on the trigger, which
+    // has one. Spread FIRST so the trigger's ARIA and the
     // handlers that open the panel cannot be clobbered from outside.
     <div {...rest} className={cn("relative", className)}>
       {label !== undefined && <FieldLabel>{label}</FieldLabel>}
       <button
-        ref={core.triggerRef}
+        ref={triggerRef}
+        id={id}
         type="button"
         // A combobox, not a button. The distinction is not pedantry: this control
         // carried `aria-invalid`, which `button` does not support, so a required
@@ -185,6 +199,7 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
         disabled={disabled}
         aria-invalid={field.isInvalid || undefined}
         aria-describedby={field.describedBy}
+        aria-required={ariaRequired}
         onClick={() => !disabled && setOpen((o) => !o)}
         // Down/Up opens the list from the closed trigger, per the APG. Enter and
         // Space already do it through the button's own click.
@@ -222,6 +237,9 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
           </span>
         </span>
         {showClear ? (
+          /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside
+              the trigger <button>, so it never holds focus and a key handler here could
+              never fire; the keys go to the trigger. A pointer shortcut only. */
           <span
             role="button"
             tabIndex={-1}