fix(VField): Use only one for label at a time (#22542)

fixes #22125

Author: ikushum

packages/vuetify/src/components/VField/VField.tsx

@@ -216,6 +216,22 @@ export const VField = genericComponent<new <T>(
       focus,
     }))
 
+    const floatingLabelProps = toRef(() => {
+      const ariaHidden = !isActive.value
+      return {
+        'aria-hidden': ariaHidden,
+        for: ariaHidden ? undefined : id.value,
+      }
+    })
+
+    const mainLabelProps = toRef(() => {
+      const ariaHidden = hasFloatingLabel.value && isActive.value
+      return {
+        'aria-hidden': ariaHidden,
+        for: ariaHidden ? undefined : id.value,
+      }
+    })
+
     function onClick (e: MouseEvent) {
       if (e.target !== document.activeElement) {
         e.preventDefault()
@@ -304,8 +320,7 @@ export const VField = genericComponent<new <T>(
                 ref={ floatingLabelRef }
                 class={[textColorClasses.value]}
                 floating
-                for={ id.value }
-                aria-hidden={ !isActive.value }
+                { ...floatingLabelProps.value }
                 style={ textColorStyles.value }
               >
                 { label() }
@@ -317,8 +332,7 @@ export const VField = genericComponent<new <T>(
                 key="label"
                 ref={ labelRef }
                 id={ props.labelId }
-                for={ id.value }
-                aria-hidden={ hasFloatingLabel.value && isActive.value }
+                { ...mainLabelProps.value }
               >
                 { label() }
               </VFieldLabel>
@@ -410,7 +424,11 @@ export const VField = genericComponent<new <T>(
 
                 { hasFloatingLabel.value && (
                   <div class="v-field__outline__notch">
-                    <VFieldLabel ref={ floatingLabelRef } floating for={ id.value } aria-hidden={ !isActive.value }>
+                    <VFieldLabel
+                      ref={ floatingLabelRef }
+                      floating
+                      { ...floatingLabelProps.value }
+                    >
                       { label() }
                     </VFieldLabel>
                   </div>
@@ -421,7 +439,7 @@ export const VField = genericComponent<new <T>(
             )}
 
             { isPlainOrUnderlined.value && hasFloatingLabel.value && (
-              <VFieldLabel ref={ floatingLabelRef } floating for={ id.value } aria-hidden={ !isActive.value }>
+              <VFieldLabel ref={ floatingLabelRef } floating { ...floatingLabelProps.value }>
                 { label() }
               </VFieldLabel>
             )}