@lumx/react 4.11.0-next.4 → 4.11.0-next.5

package/index.d.ts

@@ -1781,6 +1781,8 @@ interface InputLabelProps$1 extends HasClassName, HasTheme {
     children: JSXElement;
     /** Native htmlFor property. */
     htmlFor: string;
+    /** Native id property. */
+    id?: string;
     /** Whether the component is required or not. */
     isRequired?: boolean;
     /** ref to the root element */
@@ -1813,6 +1815,8 @@ interface TextFieldProps$1 extends HasClassName, HasTheme, HasAriaDisabled, HasD
     helperId?: string;
     /** Generated error id for accessibility attributes. */
     errorId?: string;
+    /** Generated label id for accessibility attributes (used to link the clear button to the field label). */
+    labelId?: string;
     /** Whether the component is required or not. */
     isRequired?: boolean;
     /** Whether the text field is displayed with valid style or not. */
@@ -1842,7 +1846,7 @@ interface TextFieldProps$1 extends HasClassName, HasTheme, HasAriaDisabled, HasD
     /** Ref to the component root. */
     ref?: CommonRef;
 }
-type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'isAnyDisabled' | 'isFocus';
+type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
 
 /**
  * Defines the props of the component.

package/index.js

@@ -7107,15 +7107,17 @@ const {
  * @param existingAriaDescribedBy Existing aria-describedby value to merge
  * @return Object containing helperId, errorId, and combined describedById
  */
-function generateAccessibilityIds(helper, error, generatedId, existingAriaDescribedBy) {
+function generateAccessibilityIds(helper, error, generatedId, existingAriaDescribedBy, label) {
   const helperId = helper ? `text-field-helper-${generatedId}` : undefined;
   const errorId = error ? `text-field-error-${generatedId}` : undefined;
+  const labelId = label ? `text-field-label-${generatedId}` : undefined;
   const describedByIds = [errorId, helperId, existingAriaDescribedBy].filter(Boolean);
   const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
   return {
     helperId,
     errorId,
-    describedById
+    describedById,
+    labelId
   };
 }
 
@@ -7148,6 +7150,7 @@ const TextField$1 = props => {
     textFieldRef,
     helperId,
     errorId,
+    labelId,
     theme,
     value,
     afterElement,
@@ -7179,6 +7182,7 @@ const TextField$1 = props => {
       className: element$K('header'),
       children: [label && InputLabel$1({
         ...labelProps,
+        id: labelId,
         htmlFor: textFieldId,
         className: element$K('label'),
         isRequired,
@@ -7213,6 +7217,7 @@ const TextField$1 = props => {
         icon: isValid ? mdiCheckCircle : mdiAlertCircle,
         size: Size.xxs
       }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/jsx(IconButton, {
+        "aria-describedby": labelId,
         ...clearButtonProps,
         className: element$K('input-clear'),
         icon: mdiCloseCircle,
@@ -7500,8 +7505,9 @@ const TextField = forwardRef((props, ref) => {
   const {
     helperId,
     errorId,
-    describedById
-  } = generateAccessibilityIds(helper, error, generatedTextFieldId, forwardedProps['aria-describedby']);
+    describedById,
+    labelId
+  } = generateAccessibilityIds(helper, error, generatedTextFieldId, forwardedProps['aria-describedby'], label);
   const [isFocus, setFocus] = useState(false);
 
   /**
@@ -7571,6 +7577,7 @@ const TextField = forwardRef((props, ref) => {
     afterElement,
     hasError,
     helperId,
+    labelId,
     multiline,
     maxLength,
     isRequired,