@eifi1/ui-kit 0.5.0 → 0.5.1

package/src/components/month-picker.tsx

@@ -5,6 +5,8 @@ import { cn } from "../lib/cn";
 import { monthKey, pad } from "../lib/dates";
 import { FieldLabel, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER } from "./ui";
 import { Popover } from "./popover";
+import { splitTriggerAria } from "./trigger-aria";
+import type { TriggerAria } from "./trigger-aria";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
 
 /**
@@ -156,6 +158,7 @@ function MonthFieldTrigger({
   disabled,
   invalid,
   className,
+  aria,
 }: {
   open: boolean;
   toggle: () => void;
@@ -163,6 +166,8 @@ function MonthFieldTrigger({
   triggerText: string;
   hasValue: boolean;
   labelledBy: string;
+  /** The caller's naming attributes — see `trigger-aria.ts`. */
+  aria: TriggerAria;
   valueId: string;
   panelId: string;
   padded: boolean;
@@ -191,8 +196,11 @@ function MonthFieldTrigger({
       aria-haspopup="dialog"
       aria-controls={panelId}
       aria-expanded={open}
-      aria-invalid={invalid || undefined}
-      aria-labelledby={labelledBy}
+      id={aria.id}
+      aria-invalid={invalid || aria["aria-invalid"] === true || aria["aria-invalid"] === "true" || undefined}
+      aria-labelledby={aria["aria-label"] && !aria["aria-labelledby"] ? undefined : labelledBy}
+      aria-label={aria["aria-label"]}
+      aria-describedby={aria["aria-describedby"]}
       className={cn(
         FIELD_TRIGGER,
         "pe-9",
@@ -488,6 +496,7 @@ export function MonthPicker({
     : (placeholder ?? "");
 
   const id = useId();
+  const [aria, wrapperRest] = splitTriggerAria(rest);
   const labelId = `${id}-label`;
   const valueId = `${id}-value`;
   const panelId = `${id}-panel`;
@@ -495,7 +504,7 @@ export function MonthPicker({
   const named = typeof label === "string";
 
   return (
-    <div {...rest} className={cn("relative", className)}>
+    <div {...wrapperRest} className={cn("relative", className)}>
       {label !== undefined && <FieldLabel>{label}</FieldLabel>}
       {/* The hidden twin the trigger is named by — see DateField. `sr-only-fixed`,
           and inside this `relative` root either way. */}
@@ -515,7 +524,16 @@ export function MonthPicker({
             triggerRef={ref}
             triggerText={triggerText}
             hasValue={selected != null}
-            labelledBy={named ? `${labelId} ${valueId}` : valueId}
+            // As DatePicker: a caller's reference first; an `id` without a label of our
+            // own references the trigger itself, so an external <label htmlFor> names it.
+            labelledBy={[
+              aria["aria-labelledby"],
+              named ? labelId : !aria["aria-labelledby"] && aria.id ? aria.id : undefined,
+              valueId,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            aria={aria}
             valueId={valueId}
             panelId={panelId}
             padded={label !== undefined}

package/src/components/popover.tsx

@@ -19,7 +19,10 @@ export interface PopoverLabels {
 // Exported since the kit grew one label tree (`UiKitLabels`, src/i18n): the complete
 // English reference a translator works from has to be able to name every namespace.
 export const DEFAULT_POPOVER_LABELS: PopoverLabels = {
-  panel: "Popover",
+  // "Pop-up", not "Popover": the panel's accessible name is read to USERS, and
+  // "popover" is a developer's word for it (reported by keksdose, 0.5.0). Only a
+  // bare Popover falls back to this — the kit's own pickers name their panels.
+  panel: "Pop-up",
 };
 
 /**

package/src/components/trigger-aria.ts

@@ -0,0 +1,42 @@
+// Internal — not re-exported from the barrel. Shared by the pickers whose trigger is
+// a `role="combobox"` button inside a wrapper: DatePicker, DateRangePicker, MonthPicker.
+
+/**
+ * The attributes that NAME or DESCRIBE a field, which belong on its trigger — the
+ * element a `<label htmlFor>`, a form library's control slot or an error message has
+ * to reach. They used to land on the wrapper `<div>` with the rest of the caller's
+ * props, so an external label named nothing and a form library's `aria-describedby`
+ * pointed a screen reader at an element with no role (kastlan, 0.5.0).
+ */
+export interface TriggerAria {
+  id?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
+}
+
+/** Split a field's props into what its trigger takes and what its wrapper takes. */
+export function splitTriggerAria<T extends TriggerAria>(
+  props: T,
+): [TriggerAria, Omit<T, keyof TriggerAria>] {
+  const {
+    id,
+    "aria-label": label,
+    "aria-labelledby": labelledBy,
+    "aria-describedby": describedBy,
+    "aria-invalid": invalid,
+    ...rest
+  } = props;
+  return [
+    {
+      id,
+      "aria-label": label,
+      "aria-labelledby": labelledBy,
+      "aria-describedby": describedBy,
+      "aria-invalid": invalid,
+    },
+    rest,
+  ];
+}
+

package/src/components/ui.tsx

@@ -968,9 +968,17 @@ export function CardFooter({ className, ...props }: CardFooterProps) {
 /** A `<span>`'s props plus the words a reader hears — see {@link CardHeaderProps}.
  *  The ring is drawn with a border, so there is nothing inside it to put children in. */
 export interface SpinnerProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
-  /** What the spinner means, for a screen reader. Default: `common.loading` from the
-   *  {@link UiKitProvider}, else "Loading…". */
-  label?: string;
+  /**
+   * What the spinner means, for a screen reader. Default: `common.loading` from the
+   * {@link UiKitProvider}, else "Loading…".
+   *
+   * `null` makes it DECORATIVE — no role, no text, hidden from assistive tech. Use it
+   * whenever words are already there: beside visible "Loading…" text (otherwise it is
+   * announced twice), inside a labelled button (otherwise its text joins the button's
+   * name), or inside a live region of the app's own (otherwise that region and this
+   * one both announce).
+   */
+  label?: string | null;
 }
 
 /**
@@ -984,22 +992,25 @@ export interface SpinnerProps extends Omit<ComponentPropsWithoutRef<"span">, "ch
  * ignore a name on one.
  *
  * `relative` so the `sr-only` text has a local containing block (see
- * sr-only-containment.test). The role goes BEFORE the spread: a caller showing the
- * spinner next to text that already says "Loading" can pass `aria-hidden` or its own
- * `role` and have it win.
+ * sr-only-containment.test). Where the words are already on screen, pass
+ * `label={null}`: announcing is right for a spinner standing alone and wrong for one
+ * beside text, inside a button, or inside the app's own live region.
  */
 export function Spinner({ className, label, ...rest }: SpinnerProps) {
-  const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { loading: label });
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS, {
+    loading: label ?? undefined,
+  });
+  const ring = cn(
+    "relative inline-block h-5 w-5 animate-spin rounded-full border-2 border-[var(--border)] border-t-[var(--text-primary)]",
+    className,
+  );
+  if (label === null) return <span aria-hidden {...rest} className={ring} />;
   return (
-    <span
-      role="status"
-      {...rest}
-      className={cn(
-        "relative inline-block h-5 w-5 animate-spin rounded-full border-2 border-[var(--border)] border-t-[var(--text-primary)]",
-        className,
-      )}
-    >
-      <span className="sr-only">{common.loading}</span>
+    <span role="status" {...rest} className={ring}>
+      {/* The trailing space is a separator for the case the caller forgot `label={null}`
+          inside a button: a name is the concatenation of its text, and without it the
+          spinner's word ran straight into the button's — "Loadingconfirm". */}
+      <span className="sr-only">{common.loading} </span>
     </span>
   );
 }