fix: do not override native aria-describedby #388

Author: ddecrulle

src/Input.tsx

@@ -177,7 +177,14 @@ export const Input = memo(
                                 classes.nativeInputOrTextArea
                             )}
                             disabled={disabled || undefined}
-                            aria-describedby={state !== "default" ? messageId : undefined}
+                            aria-describedby={
+                                [
+                                    state !== "default" ? messageId : undefined,
+                                    nativeInputOrTextAreaProps["aria-describedby"]
+                                ]
+                                    .filter(value => value !== undefined)
+                                    .join(" ") || undefined
+                            }
                             type={textArea ? undefined : nativeInputProps?.type ?? "text"}
                             id={inputId}
                         />

src/Select.tsx

@@ -104,7 +104,11 @@ export const Select = memo(
                     {...nativeSelectProps}
                     className={cx(fr.cx("fr-select"), nativeSelectProps.className)}
                     id={selectId}
-                    aria-describedby={stateDescriptionId}
+                    aria-describedby={
+                        nativeSelectProps["aria-describedby"] !== undefined
+                            ? `${stateDescriptionId} ${nativeSelectProps["aria-describedby"]}`
+                            : stateDescriptionId
+                    }
                     disabled={disabled}
                 >
                     {children}

src/SelectNext.tsx

@@ -95,8 +95,8 @@ function NonMemoizedNonForwardedSelect<T extends SelectProps.Option[]>(
         className,
         label,
         hint,
-        nativeSelectProps,
-        disabled = nativeSelectProps?.disabled ?? false,
+        nativeSelectProps = {},
+        disabled = nativeSelectProps.disabled ?? false,
         options,
         state = "default",
         stateRelatedMessage,
@@ -113,7 +113,7 @@ function NonMemoizedNonForwardedSelect<T extends SelectProps.Option[]>(
     });
 
     const { selectId, stateDescriptionId } = (function useClosure() {
-        const selectIdExplicitlyProvided = nativeSelectProps?.id;
+        const selectIdExplicitlyProvided = nativeSelectProps.id;
         const elementId = useId();
         const selectId = selectIdExplicitlyProvided ?? `select-${elementId}`;
         const stateDescriptionId =
@@ -171,9 +171,13 @@ function NonMemoizedNonForwardedSelect<T extends SelectProps.Option[]>(
                               })()
                     };
                 })()}
-                className={cx(fr.cx("fr-select"), nativeSelectProps?.className)}
+                className={cx(fr.cx("fr-select"), nativeSelectProps.className)}
                 id={selectId}
-                aria-describedby={stateDescriptionId}
+                aria-describedby={
+                    nativeSelectProps["aria-describedby"] !== undefined
+                        ? `${stateDescriptionId} ${nativeSelectProps["aria-describedby"]}`
+                        : stateDescriptionId
+                }
                 disabled={disabled}
             >
                 {[

src/Upload.tsx

@@ -79,7 +79,11 @@ export const Upload = memo(
                     </label>
                 )}
                 <input
-                    aria-describedby={messageId}
+                    aria-describedby={
+                        nativeInputProps["aria-describedby"] !== undefined
+                            ? `${messageId} ${nativeInputProps["aria-describedby"]}`
+                            : messageId
+                    }
                     aria-disabled={disabled}
                     className={cx(fr.cx("fr-upload"))}
                     disabled={disabled}

src/blocks/PasswordInput.tsx

@@ -60,7 +60,7 @@ export const PasswordInput = memo(
             classes = {},
             style,
             messages = [],
-            nativeInputProps,
+            nativeInputProps = {},
             messagesHint = t("your password must contain"),
             ...rest
         } = props;
@@ -75,7 +75,7 @@ export const PasswordInput = memo(
         const inputId = (function useClosure() {
             const id = useId();
 
-            return nativeInputProps?.id ?? `password-${id}`;
+            return nativeInputProps.id ?? `password-${id}`;
         })();
         const togglePasswordShowId = `${inputId}-toggle-show`;
         const messagesGroupId = `${inputId}-messages-group`;
@@ -152,7 +152,12 @@ export const PasswordInput = memo(
                         id={inputId}
                         type={isPasswordReveled ? "text" : "password"}
                         disabled={disabled}
-                        {...(messages.length !== 0 && { "aria-describedby": messagesGroupId })}
+                        {...(messages.length !== 0 && {
+                            "aria-describedby":
+                                nativeInputProps["aria-describedby"] !== undefined
+                                    ? `${messagesGroupId} ${nativeInputProps["aria-describedby"]}`
+                                    : messagesGroupId
+                        })}
                     />
                 </div>
                 {messages.length !== 0 && (