@godxjp/ui 18.13.0 → 18.13.1

package/dist/components/data-entry/form-field.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Label } from "../data-entry/label.js";
 import { cn } from "../../lib/utils.js";
-import { mergeAriaIds } from "../../lib/field-a11y.js";
+import { FieldNameContext, mergeAriaIds } from "../../lib/field-a11y.js";
 import { useFormLayout } from "./form.js";
 const toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
 const FOCUSABLE_SELECTOR = 'input:not([type="hidden"]), select, textarea, button, [tabindex]:not([tabindex="-1"])';
@@ -39,6 +39,10 @@ function FormField({
       "FormField expects a single React element child to receive aria-describedby/aria-errormessage; the helper text and error message will not be associated with the control. Pass plain text via `staticText` instead of `children` for a read-only value row."
     );
   }
+  const fieldNameContext = React.useMemo(
+    () => ({ labelId, label: typeof label === "string" ? label : void 0 }),
+    [labelId, label]
+  );
   const childProps = React.isValidElement(children) ? children.props : void 0;
   const mergeIds = mergeAriaIds;
   const childWithA11y = isStatic ? (
@@ -112,7 +116,7 @@ function FormField({
           labelAddon
         ] }),
         /* @__PURE__ */ jsxs("div", { "data-slot": "form-field-control", className: "ui-form-field-control", children: [
-          childWithA11y,
+          isStatic ? childWithA11y : /* @__PURE__ */ jsx(FieldNameContext.Provider, { value: fieldNameContext, children: childWithA11y }),
           helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-xs", children: helper }) : null,
           error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error }) : null
         ] })

package/dist/components/data-entry/input.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { useFieldNameFallback } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 const inputBaseClass = [
   "ui-control border-input bg-background w-full min-w-0 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
@@ -27,6 +28,10 @@ const Input = React.forwardRef(
     ...props
   }, ref) => {
     const { t } = useTranslation();
+    const nameFallback = useFieldNameFallback({
+      "aria-label": props["aria-label"],
+      "aria-labelledby": props["aria-labelledby"]
+    });
     const innerRef = React.useRef(null);
     const setRefs = React.useCallback(
       (node) => {
@@ -71,7 +76,8 @@ const Input = React.forwardRef(
           defaultValue,
           onChange,
           className: cn(inputBaseClass, className),
-          ...props
+          ...props,
+          ...nameFallback
         }
       );
     }
@@ -112,7 +118,8 @@ const Input = React.forwardRef(
             (showClear || trailingIcon != null) && "pe-9",
             className
           ),
-          ...props
+          ...props,
+          ...nameFallback
         }
       ),
       trailing != null ? /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 end-2 inline-flex items-center", children: trailing }) : null

package/dist/components/data-entry/search-select.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronsUpDown, Loader2, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { useFieldNameFallback } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { controlOpenRingClass } from "../../lib/control-styles.js";
 import { Button } from "../general/button.js";
@@ -49,6 +50,12 @@ function SearchSelect({
   "aria-required": ariaRequired
 }) {
   const { t } = useTranslation();
+  const nameFallback = useFieldNameFallback({
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby
+  });
+  const triggerAriaLabel = ariaLabel ?? nameFallback["aria-label"];
+  const triggerAriaLabelledby = ariaLabelledby ?? nameFallback["aria-labelledby"];
   const reactId = React.useId();
   const listId = `${reactId}-listbox`;
   const optionDomId = (optionValue) => `${reactId}-opt-${optionValue}`;
@@ -238,8 +245,8 @@ function SearchSelect({
               size,
               "aria-expanded": open,
               "aria-controls": open ? listId : void 0,
-              "aria-label": ariaLabel,
-              "aria-labelledby": ariaLabelledby,
+              "aria-label": triggerAriaLabel,
+              "aria-labelledby": triggerAriaLabelledby,
               "aria-describedby": ariaDescribedby,
               "aria-errormessage": ariaErrorMessage,
               "aria-invalid": ariaInvalid,
@@ -272,8 +279,8 @@ function SearchSelect({
           /* @__PURE__ */ jsx(
             PopoverContent,
             {
-              "aria-label": ariaLabelledby ? void 0 : ariaLabel ?? resolvedPlaceholder,
-              "aria-labelledby": ariaLabelledby,
+              "aria-label": triggerAriaLabelledby ? void 0 : triggerAriaLabel ?? resolvedPlaceholder,
+              "aria-labelledby": triggerAriaLabelledby,
               align: "start",
               sideOffset: 4,
               collisionPadding: 12,

package/dist/components/data-entry/select.js

@@ -5,7 +5,12 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { ChevronDown, ChevronUp, X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { controlTriggerClass } from "../../lib/control-styles.js";
-import { mergeAriaIds, omitFieldA11y, pickFieldA11y } from "../../lib/field-a11y.js";
+import {
+  mergeAriaIds,
+  omitFieldA11y,
+  pickFieldA11y,
+  useFieldNameFallback
+} from "../../lib/field-a11y.js";
 import { SearchSelect } from "./search-select.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 function isDataSelect(props) {
@@ -32,13 +37,24 @@ function SelectValue(props) {
 const SelectTrigger = React.forwardRef(({ className, children, size = "md", showIndicator = true, ...props }, ref) => {
   const field = React.useContext(SelectFieldA11yContext);
   const ownsName = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
-  const fieldA11y = field ? {
-    id: props.id ?? field.id,
-    ...ownsName ? {} : { "aria-label": field["aria-label"], "aria-labelledby": field["aria-labelledby"] },
-    "aria-describedby": mergeAriaIds(props["aria-describedby"], field["aria-describedby"]),
-    "aria-errormessage": mergeAriaIds(props["aria-errormessage"], field["aria-errormessage"]),
-    "aria-required": props["aria-required"] ?? field["aria-required"],
-    "aria-invalid": props["aria-invalid"] ?? field["aria-invalid"]
+  const fieldOwnsName = field?.["aria-label"] !== void 0 || field?.["aria-labelledby"] !== void 0;
+  const nameFallback = useFieldNameFallback({
+    "aria-label": ownsName ? props["aria-label"] : field?.["aria-label"],
+    "aria-labelledby": ownsName ? props["aria-labelledby"] : field?.["aria-labelledby"]
+  });
+  const fieldA11y = field || nameFallback["aria-labelledby"] !== void 0 ? {
+    id: props.id ?? field?.id,
+    ...ownsName ? {} : fieldOwnsName ? {
+      "aria-label": field?.["aria-label"],
+      "aria-labelledby": field?.["aria-labelledby"]
+    } : nameFallback,
+    "aria-describedby": mergeAriaIds(props["aria-describedby"], field?.["aria-describedby"]),
+    "aria-errormessage": mergeAriaIds(
+      props["aria-errormessage"],
+      field?.["aria-errormessage"]
+    ),
+    "aria-required": props["aria-required"] ?? field?.["aria-required"],
+    "aria-invalid": props["aria-invalid"] ?? field?.["aria-invalid"]
   } : void 0;
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Trigger,

package/dist/components/layout/flex.js

@@ -1,4 +1,6 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
+import { mergeAriaIds } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { flexGapClass } from "../../lib/variants.js";
 function Flex({
@@ -13,6 +15,20 @@ function Flex({
   children,
   ...props
 }) {
+  let domProps = props;
+  if (props.role === void 0 && (props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0)) {
+    const {
+      "aria-required": _ariaRequired,
+      "aria-invalid": _ariaInvalid,
+      "aria-errormessage": ariaErrorMessage,
+      ...allowed
+    } = props;
+    domProps = {
+      ...allowed,
+      role: "group",
+      "aria-describedby": mergeAriaIds(props["aria-describedby"], ariaErrorMessage)
+    };
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -23,7 +39,7 @@ function Flex({
       "data-hide-below": hideBelow,
       "data-hide-from": hideFrom,
       className: cn("ui-flex", flexGapClass[gap], className),
-      ...props,
+      ...domProps,
       children
     }
   );

package/dist/lib/field-a11y.d.ts

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import * as React from "react";
 /**
  * The accessible-name / description / validation contract that {@link FormField} injects onto its
  * single control child (via `cloneElement`). EVERY form-capable `@godxjp/ui` component accepts
@@ -53,6 +53,34 @@ export declare function omitFieldA11y<T extends FieldA11yProps>(props: T): Omit<
  * both — `aria-labelledby` takes precedence and the redundant `aria-label` only adds noise).
  */
 export declare function resolveFieldA11y(props: FieldA11yProps, intrinsicAriaLabel?: string): FieldA11yProps;
+/**
+ * The FormField label made reachable by NESTED controls (gh#303).
+ *
+ * `cloneElement` can only wire the field-a11y contract onto FormField's single direct child. When
+ * that child is a layout wrapper (a `Flex` holding a range from/to pair, a 年/月 input+select
+ * combo), the naming attributes stop on the wrapper `div` and every control inside is left with no
+ * accessible name at all (axe: `label` on the inputs, `button-name` on select/combobox triggers).
+ *
+ * FormField therefore also publishes its label through this context, and each control's semantic
+ * focus target picks it up as a LAST-RESORT name via {@link useFieldNameFallback}: a control that
+ * already has a name — its own `aria-label`/`aria-labelledby`, or the one FormField cloned onto it
+ * as the direct child — keeps it untouched. Multiple nested controls then all announce the field's
+ * label; a consumer wanting distinct names (e.g. "開始日" / "終了日") sets `aria-label` per
+ * control, which always wins.
+ */
+export interface FieldNameContextValue {
+    /** DOM id of FormField's visible label element (the `aria-labelledby` target). */
+    labelId: string;
+    /** The label's plain-text content, when it is a string (belt-and-suspenders `aria-label`). */
+    label?: string;
+}
+export declare const FieldNameContext: React.Context<FieldNameContextValue | null>;
+/**
+ * Resolve the last-resort accessible name for a control's semantic focus target (see
+ * {@link FieldNameContext}). Returns `{}` — never clobbering anything — unless the control is
+ * inside a FormField AND still nameless after its own props and the cloned contract are applied.
+ */
+export declare function useFieldNameFallback(name: Pick<FieldA11yProps, "aria-label" | "aria-labelledby">): Pick<FieldA11yProps, "aria-label" | "aria-labelledby">;
 /**
  * The field-a11y attributes valid on a **group container** (`role="group"`), used by composite
  * controls that have no single labelable focus target — CheckboxGroup, and the two-input range

package/dist/lib/field-a11y.js

@@ -1,3 +1,5 @@
+"use client";
+import * as React from "react";
 const FIELD_A11Y_KEYS = [
   "aria-label",
   "aria-labelledby",
@@ -34,6 +36,17 @@ function resolveFieldA11y(props, intrinsicAriaLabel) {
   }
   return picked;
 }
+const FieldNameContext = React.createContext(null);
+function useFieldNameFallback(name) {
+  const field = React.useContext(FieldNameContext);
+  if (!field || name["aria-label"] !== void 0 || name["aria-labelledby"] !== void 0) {
+    return {};
+  }
+  return {
+    "aria-labelledby": field.labelId,
+    ...field.label !== void 0 ? { "aria-label": field.label } : {}
+  };
+}
 function pickGroupFieldA11y(props) {
   const describedBy = mergeAriaIds(props["aria-describedby"], props["aria-errormessage"]);
   return {
@@ -42,9 +55,11 @@ function pickGroupFieldA11y(props) {
   };
 }
 export {
+  FieldNameContext,
   mergeAriaIds,
   omitFieldA11y,
   pickFieldA11y,
   pickGroupFieldA11y,
-  resolveFieldA11y
+  resolveFieldA11y,
+  useFieldNameFallback
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.13.0",
-  "godxUiMcp": "18.13.0",
+  "version": "18.13.1",
+  "godxUiMcp": "18.13.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",