@umituz/web-design-system 4.29.0 → 4.29.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "4.29.0",
+  "version": "4.29.1",
   "private": false,
   "type": "module",
   "description": "Web Design System - Tailwind v4 authored, precompiled CSS shipped. Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications.",

package/src/__tests__/components.smoke.test.tsx

@@ -1787,3 +1787,20 @@ describe('RatingStars (4.29)', () => {
     expect(half).toBeTruthy();
   });
 });
+
+import { FormField } from '../presentation/molecules/FormField';
+
+describe('FormField auto id (4.29.1)', () => {
+  it('links the label to a generated control id when none is given', () => {
+    render(<FormField label="Reference" inputProps={{ placeholder: 'x' }} />);
+    const control = screen.getByLabelText('Reference') as HTMLInputElement;
+    expect(control.id).toBeTruthy();
+    expect(control.getAttribute('aria-invalid')).toBe('false');
+  });
+
+  it('describes the control through helper text ids', () => {
+    render(<FormField label="Memo" helperText="Optional note" inputProps={{}} />);
+    const control = screen.getByLabelText('Memo') as HTMLInputElement;
+    expect((control.getAttribute('aria-describedby') ?? '').length).toBeGreaterThan(0);
+  });
+});

package/src/presentation/molecules/FormField.tsx

@@ -3,7 +3,7 @@
  * @description Label + Input combination (Responsive)
  */
 
-import { forwardRef } from 'react';
+import { forwardRef, useId } from 'react';
 import { cn, getSpaceY } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 import { Input } from '../atoms/Input';
@@ -21,7 +21,8 @@ export interface FormFieldProps extends BaseProps {
 
 export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
   ({ label, error, helperText, required, id, className, inputProps, fullWidth = true, ...props }, ref) => {
-    const fieldId = id || inputProps?.id || inputProps?.name;
+    const autoId = useId();
+    const fieldId = id || inputProps?.id || inputProps?.name || autoId;
     const errorId = error ? `${fieldId}-error` : undefined;
     const helperId = helperText ? `${fieldId}-helper` : undefined;
 
@@ -38,7 +39,7 @@ export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
           ref={ref}
           id={fieldId}
           aria-invalid={!!error}
-          aria-describedby={cn(errorId, helperId)}
+          aria-describedby={cn(errorId, helperId) || undefined}
           error={!!error}
           {...inputProps}
         />