dikaioai
diff --git a/‎.changeset/itchy-cycles-sell.md‎
Lines changed: 5 additions & 0 deletions b/‎.changeset/itchy-cycles-sell.md‎
Lines changed: 5 additions & 0 deletions
diff --git a/‎packages/clerk-js/src/ui/elements/FieldControl.tsx‎
Lines changed: 2 additions & 1 deletion b/‎packages/clerk-js/src/ui/elements/FieldControl.tsx‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎packages/clerk-js/src/ui/elements/FormControl.tsx‎
Lines changed: 6 additions & 1 deletion b/‎packages/clerk-js/src/ui/elements/FormControl.tsx‎
Lines changed: 6 additions & 1 deletion
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fixes issue where `FormFeedback` was rendering two elements with the same `id` attribute leading to invalid markup.
@@ -154,11 +154,12 @@ const FieldLabelRow = (props: PropsWithChildren) => {
 };
 
 const FieldFeedback = (props: Pick<FormFeedbackProps, 'elementDescriptors' | 'center'>) => {
-  const { fieldId, debouncedFeedback } = useFormField();
+  const { fieldId, debouncedFeedback, errorMessageId } = useFormField();
 
   return (
     <FormFeedback
       center={props.center}
+      errorMessageId={errorMessageId}
       {...{
         ...debouncedFeedback,
         elementDescriptors: props.elementDescriptors,
 
@@ -71,13 +71,14 @@ export type FormFeedbackDescriptorsKeys = 'error' | 'warning' | 'info' | 'succes
 type Feedback = { feedback?: string; feedbackType?: FeedbackType; shouldEnter: boolean };
 
 export type FormFeedbackProps = Partial<ReturnType<typeof useFormControlFeedback>['debounced'] & { id: FieldId }> & {
+  errorMessageId?: string;
   elementDescriptors?: Partial<Record<FormFeedbackDescriptorsKeys, ElementDescriptor>>;
   center?: boolean;
   sx?: ThemableCssProp;
 };
 
 export const FormFeedback = (props: FormFeedbackProps) => {
-  const { id, elementDescriptors, sx, feedback, feedbackType = 'info', center = false } = props;
+  const { id, elementDescriptors, sx, feedback, feedbackType = 'info', center = false, errorMessageId } = props;
   const feedbacksRef = useRef<{
     a?: Feedback;
     b?: Feedback;
@@ -142,6 +143,10 @@ export const FormFeedback = (props: FormFeedbackProps) => {
     return {
       elementDescriptor: descriptor,
       elementId: id ? descriptor?.setId?.(id) : undefined,
+      // We only want the id applied when the feedback type is an error
+      // to avoid having multiple elements in the dom with the same id attribute.
+      // We also only have aria-describedby applied to the input when it is an error.
+      id: type === 'error' ? errorMessageId : undefined,
     };
   };
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@clerk/clerk-js': patch
 +---
++
 +Fixes issue where `FormFeedback` was rendering two elements with the same `id` attribute leading to invalid markup.