@astryxdesign/core 0.1.8-canary.3290b8a → 0.1.8-canary.351a2f5

package/dist/CheckboxList/CheckboxListItem.d.ts

@@ -22,6 +22,25 @@ export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
      * child components control their own text behavior).
      */
     label: ReactNode;
+    /**
+     * Plain-text accessible name for the checkbox when `label` is a ReactNode.
+     *
+     * A string `label` names the checkbox automatically. A rich (ReactNode)
+     * `label` cannot, so pass a concise string equivalent via the standard
+     * `aria-label` — otherwise the checkbox falls back to the generic name
+     * "Checkbox" and every rich-label item in a list announces identically to
+     * screen readers. Applied to the checkbox control, not the row.
+     *
+     * @example
+     * ```
+     * <CheckboxListItem
+     *   label={<span>Pro plan <Badge label="Recommended" /></span>}
+     *   aria-label="Pro plan"
+     *   value="pro"
+     * />
+     * ```
+     */
+    'aria-label'?: string;
     /**
      * Identity key for collection mode (REQUIRED inside CheckboxList).
      * Throws a runtime error if missing when used inside CheckboxList.
@@ -83,7 +102,7 @@ export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
  * />
  * ```
  */
-export declare function CheckboxListItem({ label, value, description, endContent, isDisabled: isItemDisabled, isLoading: isItemLoading, isChecked, onCheck, ref, xstyle, className, style, onClick: onClickProp, ...restProps }: CheckboxListItemProps): import("react").JSX.Element;
+export declare function CheckboxListItem({ label, 'aria-label': ariaLabel, value, description, endContent, isDisabled: isItemDisabled, isLoading: isItemLoading, isChecked, onCheck, ref, xstyle, className, style, onClick: onClickProp, ...restProps }: CheckboxListItemProps): import("react").JSX.Element;
 export declare namespace CheckboxListItem {
     var displayName: string;
 }

package/dist/CheckboxList/CheckboxListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,SAAS,EACb,EAAE,qBAAqB,+BA8GvB;yBA7He,gBAAgB"}
+{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAA0C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,SAAS,EACb,EAAE,qBAAqB,+BAsIvB;yBAtJe,gBAAgB"}

package/dist/CheckboxList/CheckboxListItem.js

@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/CheckboxList.stories.tsx
  * - /packages/cli/templates/blocks/components/CheckboxList/ (showcase blocks)
  */
-import { use } from 'react';
+import { use, useEffect, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars } from "../theme/tokens.stylex.js";
@@ -67,6 +67,7 @@ const styles = {
  */
 export function CheckboxListItem({
   label,
+  'aria-label': ariaLabel,
   value,
   description,
   endContent,
@@ -87,6 +88,21 @@ export function CheckboxListItem({
     throw new Error('CheckboxListItem requires a `value` prop when used inside CheckboxList with a value array.');
   }
 
+  // Accessible name for the (visually hidden) checkbox label. A string
+  // `label` names it directly; a rich label needs `aria-label`.
+  const checkboxLabel = ariaLabel ?? (typeof label === 'string' ? label : t('@astryx.checkboxList.item.checkbox'));
+
+  // Dev-time guardrail: a rich label without `aria-label` leaves the
+  // checkbox with the generic name "Checkbox". Warn once per item instance
+  // (in an effect) rather than on every render.
+  const warnedUnnamedCheckboxRef = useRef(false);
+  useEffect(() => {
+    if (typeof label !== 'string' && ariaLabel == null && !warnedUnnamedCheckboxRef.current) {
+      warnedUnnamedCheckboxRef.current = true;
+      console.warn('CheckboxListItem: `label` is a ReactNode, so the checkbox falls ' + 'back to the generic accessible name "Checkbox". Pass ' + '`aria-label` with a concise string equivalent of the visible ' + 'label so screen readers can tell items apart.');
+    }
+  }, [label, ariaLabel]);
+
   // Density from list context for checkbox sizing
   const listCtx = use(ListContext);
   const density = listCtx?.density ?? 'balanced';
@@ -144,7 +160,7 @@ export function CheckboxListItem({
     className: className,
     style: style,
     startContent: /*#__PURE__*/_jsx(CheckboxInput, {
-      label: typeof label === 'string' ? label : t('@astryx.checkboxList.item.checkbox'),
+      label: checkboxLabel,
       isLabelHidden: true,
       value: resolvedChecked,
       onChange: () => handleToggle(),