feat(Field): add aria-labelledby for a11y (#9883)

* feat(Field): add aria-labelledby for a11y

* fix: improve labelledby

* docs: update

packages/vant/src/address-edit/test/__snapshots__/demo.spec.ts.snap

@@ -6,30 +6,38 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-address-edit__fields">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Name
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    class="van-field__control"
                    placeholder="Name"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Phone
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="tel"
+                   id="van-field-input"
                    class="van-field__control"
                    placeholder="Phone"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -39,16 +47,20 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Area
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    class="van-field__control"
                    readonly
                    placeholder="Area"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -57,15 +69,19 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field van-address-edit-detail">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Address
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
-            <textarea rows="1"
+            <textarea id="van-field-input"
+                      rows="1"
                       class="van-field__control"
                       placeholder="Address"
+                      aria-labelledby="van-field-label"
                       style="height: auto;"
             >
             </textarea>
@@ -74,15 +90,19 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Postal
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="tel"
+                   id="van-field-input"
                    class="van-field__control"
                    placeholder="Postal"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>

packages/vant/src/address-edit/test/__snapshots__/index.spec.js.snap

@@ -11,30 +11,38 @@ exports[`should render AddressEdit correctly 1`] = `
   <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Name
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Name"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Phone
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="tel"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Phone"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -44,16 +52,20 @@ exports[`should render AddressEdit correctly 1`] = `
          tabindex="0"
     >
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Area
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  readonly
                  placeholder="Area"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -62,15 +74,19 @@ exports[`should render AddressEdit correctly 1`] = `
     </div>
     <div class="van-cell van-field van-address-edit-detail">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Address
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
-          <textarea rows="1"
+          <textarea id="van-field-input"
+                    rows="1"
                     class="van-field__control"
                     placeholder="Address"
+                    aria-labelledby="van-field-label"
           >
           </textarea>
         </div>
@@ -96,30 +112,38 @@ exports[`should render AddressEdit with props correctly 1`] = `
   <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Name
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Name"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Phone
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="tel"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Phone"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -129,16 +153,20 @@ exports[`should render AddressEdit with props correctly 1`] = `
          tabindex="0"
     >
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Area
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  readonly
                  placeholder="Area"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -147,15 +175,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
     </div>
     <div class="van-cell van-field van-address-edit-detail">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Address
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
-          <textarea rows="1"
+          <textarea id="van-field-input"
+                    rows="1"
                     class="van-field__control"
                     placeholder="Address"
+                    aria-labelledby="van-field-label"
           >
           </textarea>
         </div>
@@ -163,15 +195,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Postal
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="tel"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Postal"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -209,15 +245,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
 exports[`should valid address detail and render error message correctly 1`] = `
 <div class="van-cell van-field van-address-edit-detail">
   <div class="van-cell__title van-field__label">
-    <label>
+    <label id="van-field-label"
+           for="van-field-input"
+    >
       Address
     </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
-      <textarea rows="1"
+      <textarea id="van-field-input"
+                rows="1"
                 class="van-field__control"
                 placeholder="Address"
+                aria-labelledby="van-field-label"
                 style="height: auto;"
       >
       </textarea>
@@ -235,16 +275,20 @@ exports[`should valid area code and render error message correctly 1`] = `
      tabindex="0"
 >
   <div class="van-cell__title van-field__label">
-    <label>
+    <label id="van-field-label"
+           for="van-field-input"
+    >
       Area
     </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
       <input type="text"
+             id="van-field-input"
              class="van-field__control"
              readonly
              placeholder="Area"
+             aria-labelledby="van-field-label"
       >
     </div>
     <div class="van-field__error-message">
@@ -259,15 +303,19 @@ exports[`should valid area code and render error message correctly 1`] = `
 exports[`should valid name and render error message correctly 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">
-    <label>
+    <label id="van-field-label"
+           for="van-field-input"
+    >
       Name
     </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
       <input type="text"
+             id="van-field-input"
              class="van-field__control"
              placeholder="Name"
+             aria-labelledby="van-field-label"
       >
     </div>
     <div class="van-field__error-message">
@@ -280,15 +328,19 @@ exports[`should valid name and render error message correctly 1`] = `
 exports[`should valid postal code and render error message correctly 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">
-    <label>
+    <label id="van-field-label"
+           for="van-field-input"
+    >
       Postal
     </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
       <input type="tel"
+             id="van-field-input"
              class="van-field__control"
              placeholder="Postal"
+             aria-labelledby="van-field-label"
       >
     </div>
     <div class="van-field__error-message">
@@ -301,15 +353,19 @@ exports[`should valid postal code and render error message correctly 1`] = `
 exports[`should valid tel and render error message correctly 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">
-    <label>
+    <label id="van-field-label"
+           for="van-field-input"
+    >
       Phone
     </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
       <input type="tel"
+             id="van-field-input"
              class="van-field__control"
              placeholder="Phone"
+             aria-labelledby="van-field-label"
       >
     </div>
     <div class="van-field__error-message">

packages/vant/src/cascader/test/__snapshots__/demo.spec.ts.snap

@@ -7,16 +7,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Area
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Select Area"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -30,16 +34,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Area
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Select Area"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -53,16 +61,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Area
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Select Area"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -76,16 +88,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Area
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Select Area"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -99,16 +115,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Area
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Select Area"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>

packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap

@@ -5,7 +5,9 @@ exports[`should render demo and match snapshot 1`] = `
   <form class="van-form">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Rate
         </label>
       </div>
@@ -75,7 +77,9 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Slider
         </label>
       </div>
@@ -123,7 +127,9 @@ exports[`should render demo and match snapshot 1`] = `
     <form class="van-form">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Rate
           </label>
         </div>
@@ -193,7 +199,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Slider
           </label>
         </div>

packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap

@@ -6,30 +6,38 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-contact-edit__fields">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Name
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    class="van-field__control"
                    placeholder="Name"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Phone
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="tel"
+                   id="van-field-input"
                    class="van-field__control"
                    placeholder="Phone"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>

packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap

@@ -7,6 +7,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Coupon code"
           >
@@ -298,6 +299,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Coupon code"
           >
@@ -409,6 +411,7 @@ exports[`should render list-footer slot correctly 1`] = `
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Coupon code"
           >
@@ -522,6 +525,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Coupon code"
           >

packages/vant/src/field/Field.tsx

@@ -39,6 +39,7 @@ import { cellSharedProps } from '../cell/Cell';
 
 // Composables
 import { CUSTOM_FIELD_INJECTION_KEY, useParent } from '@vant/use';
+import { useId } from '../composables/use-id';
 import { useExpose } from '../composables/use-expose';
 
 // Components
@@ -128,6 +129,7 @@ export default defineComponent({
   ],
 
   setup(props, { emit, slots }) {
+    const id = useId();
     const state = reactive({
       focused: false,
       validateFailed: false,
@@ -376,6 +378,8 @@ export default defineComponent({
       emit('keypress', event);
     };
 
+    const getInputId = () => props.id || `${id}-input`;
+
     const renderInput = () => {
       const controlClass = bem('control', [
         getProp('inputAlign'),
@@ -395,7 +399,7 @@ export default defineComponent({
       }
 
       const inputAttrs = {
-        id: props.id,
+        id: getInputId(),
         ref: inputRef,
         name: props.name,
         rows: props.rows !== undefined ? +props.rows : undefined,
@@ -406,6 +410,7 @@ export default defineComponent({
         autofocus: props.autofocus,
         placeholder: props.placeholder,
         autocomplete: props.autocomplete,
+        'aria-labelledby': props.label ? `${id}-label` : undefined,
         onBlur,
         onFocus,
         onInput,
@@ -491,7 +496,11 @@ export default defineComponent({
         return [slots.label(), colon];
       }
       if (props.label) {
-        return <label for={props.id}>{props.label + colon}</label>;
+        return (
+          <label id={`${id}-label`} for={getInputId()}>
+            {props.label + colon}
+          </label>
+        );
       }
     };
 

packages/vant/src/field/README.md

@@ -250,7 +250,7 @@ Use `input-align` prop to align the input value.
 | v-model | Input value | _number \| string_ | - |
 | label | Left side label | _string_ | - |
 | name | As the identifier when submitting the form | _string_ | - |
-| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | - |
+| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | `van-field-n-input` |
 | type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | _string_ | `text` |
 | size | Size，can be set to `large` | _string_ | - |
 | maxlength | Max length of value | _number \| string_ | - |

packages/vant/src/field/README.zh-CN.md

@@ -269,7 +269,7 @@ export default {
 | v-model | 当前输入的值 | _number \| string_ | - |
 | label | 输入框左侧文本 | _string_ | - |
 | name | 名称，作为提交表单时的标识符 | _string_ | - |
-| id `v3.2.2` | 输入框 id，同时会设置 label 的 for 属性 | _string_ | - |
+| id `v3.2.2` | 输入框 id，同时会设置 label 的 for 属性 | _string_ | `van-field-n-input` |
 | type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | _string_ | `text` |
 | size | 大小，可选值为 `large` | _string_ | - |
 | maxlength | 输入的最大字符数 | _number \| string_ | - |

packages/vant/src/field/test/__snapshots__/demo.spec.ts.snap

@@ -5,15 +5,19 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Label
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Text"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -24,37 +28,47 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Text"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Phone
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="tel"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Phone"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Digit
         </label>
       </div>
@@ -62,15 +76,19 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-field__body">
           <input type="tel"
                  inputmode="numeric"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Digit"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Number
         </label>
       </div>
@@ -78,23 +96,29 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-field__body">
           <input type="text"
                  inputmode="decimal"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Number"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Password
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="password"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Password"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -105,30 +129,38 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  readonly
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field van-field--disabled">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  disabled
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -143,15 +175,19 @@ exports[`should render demo and match snapshot 1`] = `
         </i>
       </div>
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Show Icon"
+                 aria-labelledby="van-field-label"
           >
           <div class="van-field__right-icon">
             <i class="van-badge__wrapper van-icon van-icon-warning-o">
@@ -166,15 +202,19 @@ exports[`should render demo and match snapshot 1`] = `
         </i>
       </div>
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Show Clear Icon"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -185,30 +225,38 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field van-field--error">
       <div class="van-cell__title van-field__label van-field__label--required">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Username
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control van-field__control--error"
                  placeholder="Username"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label van-field__label--required">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Phone
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Phone"
+                 aria-labelledby="van-field-label"
           >
         </div>
         <div class="van-field__error-message">
@@ -222,15 +270,19 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-cell--center van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           SMS
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="SMS"
+                 aria-labelledby="van-field-label"
           >
           <div class="van-field__button">
             <button type="button"
@@ -252,30 +304,38 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Format On Change"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control"
                  placeholder="Format On Blur"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>
@@ -287,7 +347,8 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-cell van-field">
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body">
-          <textarea rows="1"
+          <textarea id="van-field-input"
+                    rows="1"
                     class="van-field__control"
                     placeholder="Message"
                     style="height: auto;"
@@ -302,15 +363,19 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Message
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
-          <textarea rows="2"
+          <textarea id="van-field-input"
+                    rows="2"
                     class="van-field__control"
                     placeholder="Message"
+                    aria-labelledby="van-field-label"
                     style="height: auto;"
           >
           </textarea>
@@ -329,15 +394,19 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-cell-group van-cell-group--inset">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <label>
+        <label id="van-field-label"
+               for="van-field-input"
+        >
           Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
+                 id="van-field-input"
                  class="van-field__control van-field__control--right"
                  placeholder="Input Align Right"
+                 aria-labelledby="van-field-label"
           >
         </div>
       </div>

packages/vant/src/field/test/__snapshots__/index.spec.js.snap

@@ -7,7 +7,9 @@ exports[`should change clear icon when using clear-icon prop 1`] = `
 
 exports[`should render colon when using colon prop 1`] = `
 <div class="van-cell__title van-field__label">
-  <label>
+  <label id="van-field-label"
+         for="van-field-input"
+  >
     foo:
   </label>
 </div>
@@ -24,6 +26,7 @@ exports[`should render extra slot correctly 1`] = `
   <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body">
       <input type="text"
+             id="van-field-input"
              class="van-field__control"
       >
     </div>
@@ -48,7 +51,8 @@ exports[`should render textarea when type is textarea 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body">
-      <textarea class="van-field__control"
+      <textarea id="van-field-input"
+                class="van-field__control"
                 style="height: auto;"
       >
       </textarea>
@@ -62,6 +66,7 @@ exports[`should render word limit correctly 1`] = `
   <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body">
       <input type="text"
+             id="van-field-input"
              class="van-field__control"
       >
     </div>
@@ -80,6 +85,7 @@ exports[`should render word limit correctly when modelValue is null 1`] = `
   <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body">
       <input type="text"
+             id="van-field-input"
              class="van-field__control"
       >
     </div>
@@ -98,6 +104,7 @@ exports[`should render word limit correctly when modelValue is undefined 1`] = `
   <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body">
       <input type="text"
+             id="van-field-input"
              class="van-field__control"
       >
     </div>

packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap

@@ -6,32 +6,40 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-cell-group van-cell-group--inset">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Username
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="username"
                    class="van-field__control"
                    placeholder="Username"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Password
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="password"
+                   id="van-field-input"
                    name="password"
                    class="van-field__control"
                    placeholder="Password"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -55,64 +63,80 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-cell-group van-cell-group--inset">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Label
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="pattern"
                    class="van-field__control"
                    placeholder="Use pattern"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Label
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="validator"
                    class="van-field__control"
                    placeholder="Use validator"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Label
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="validatorMessage"
                    class="van-field__control"
                    placeholder="Use validator to return message"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Label
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="asyncValidator"
                    class="van-field__control"
                    placeholder="Use async validator"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -136,7 +160,9 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-cell-group van-cell-group--inset">
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Switch
           </label>
         </div>
@@ -157,7 +183,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Checkbox
           </label>
         </div>
@@ -180,7 +208,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Checkbox Group
           </label>
         </div>
@@ -221,7 +251,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Radio
           </label>
         </div>
@@ -264,7 +296,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Stepper
           </label>
         </div>
@@ -298,7 +332,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Rate
           </label>
         </div>
@@ -368,7 +404,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Slider
           </label>
         </div>
@@ -398,7 +436,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Uploader
           </label>
         </div>
@@ -442,17 +482,21 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Picker
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="picker"
                    class="van-field__control"
                    readonly
                    placeholder="Select city"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -464,17 +508,21 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Datetime Picker
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="datetimePicker"
                    class="van-field__control"
                    readonly
                    placeholder="Select time"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -486,17 +534,21 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Area Picker
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="area"
                    class="van-field__control"
                    readonly
                    placeholder="Select area"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>
@@ -508,17 +560,21 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <label>
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
             Calendar
           </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <input type="text"
+                   id="van-field-input"
                    name="calendar"
                    class="van-field__control"
                    readonly
                    placeholder="Select date"
+                   aria-labelledby="van-field-label"
             >
           </div>
         </div>

packages/vant/src/form/test/__snapshots__/events.spec.tsx.snap

@@ -6,6 +6,7 @@ exports[`should emit failed event when validating failed 1`] = `
     <div class="van-cell__value van-cell__value--alone van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                name="A"
                class="van-field__control"
         >
@@ -19,6 +20,7 @@ exports[`should emit failed event when validating failed 1`] = `
     <div class="van-cell__value van-cell__value--alone van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                name="B"
                class="van-field__control"
         >

packages/vant/src/form/test/__snapshots__/props.spec.tsx.snap

@@ -4,14 +4,18 @@ exports[`should render colon when using colon prop 1`] = `
 <form class="van-form">
   <div class="van-cell van-field">
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Label:
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -23,6 +27,7 @@ exports[`should render colon when using colon prop 1`] = `
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
         >
       </div>
@@ -37,6 +42,7 @@ exports[`should render error-message-align prop correctly 1`] = `
     <div class="van-cell__value van-cell__value--alone van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
         >
       </div>
@@ -54,6 +60,7 @@ exports[`should render input-align prop correctly 1`] = `
     <div class="van-cell__value van-cell__value--alone van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control van-field__control--right"
         >
       </div>
@@ -76,28 +83,36 @@ exports[`should render label-align prop correctly 1`] = `
 <form class="van-form">
   <div class="van-cell van-field van-field--label-right">
     <div class="van-cell__title van-field__label van-field__label--right">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Label
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
   </div>
   <div class="van-cell van-field van-field--label-center">
     <div class="van-cell__title van-field__label van-field__label--center">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Label
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -111,14 +126,18 @@ exports[`should render label-width prop correctly 1`] = `
     <div class="van-cell__title van-field__label"
          style="width: 5rem;"
     >
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Label
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -127,14 +146,18 @@ exports[`should render label-width prop correctly 1`] = `
     <div class="van-cell__title van-field__label"
          style="width: 10vw;"
     >
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Label
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>
@@ -148,6 +171,7 @@ exports[`should validate first field when using validate-first prop 1`] = `
     <div class="van-cell__value van-cell__value--alone van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                name="A"
                class="van-field__control"
         >
@@ -161,6 +185,7 @@ exports[`should validate first field when using validate-first prop 1`] = `
     <div class="van-cell__value van-cell__value--alone van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                name="B"
                class="van-field__control"
         >

packages/vant/src/number-keyboard/test/__snapshots__/demo.spec.ts.snap

@@ -79,16 +79,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Bind Value
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Click To Input"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>

packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap

@@ -679,16 +679,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         City
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                class="van-field__control"
                readonly
                placeholder="Choose City"
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>

packages/vant/src/popover/test/__snapshots__/demo.spec.ts.snap

@@ -31,16 +31,20 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <label>
+      <label id="van-field-label"
+             for="van-field-input"
+      >
         Placement
       </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
         <input type="text"
+               id="van-field-input"
                name="picker"
                class="van-field__control"
                readonly
+               aria-labelledby="van-field-label"
         >
       </div>
     </div>

packages/vant/src/search/test/__snapshots__/demo.spec.ts.snap

@@ -12,6 +12,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
+                   id="van-field-input"
                    class="van-field__control"
                    placeholder="Placeholder"
             >
@@ -33,6 +34,7 @@ exports[`should render demo and match snapshot 1`] = `
           <div class="van-cell__value van-cell__value--alone van-field__value">
             <div class="van-field__body">
               <input type="search"
+                     id="van-field-input"
                      class="van-field__control"
                      placeholder="Placeholder"
               >
@@ -60,6 +62,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
+                   id="van-field-input"
                    class="van-field__control van-field__control--center"
                    placeholder="Placeholder"
             >
@@ -80,6 +83,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
+                   id="van-field-input"
                    class="van-field__control"
                    disabled
                    placeholder="Placeholder"
@@ -103,6 +107,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
+                   id="van-field-input"
                    class="van-field__control"
                    placeholder="Placeholder"
             >
@@ -126,6 +131,7 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-cell__value--alone van-field__value">
           <div class="van-field__body">
             <input type="search"
+                   id="van-field-input"
                    class="van-field__control"
                    placeholder="Placeholder"
             >

packages/vant/src/search/test/__snapshots__/index.spec.ts.snap

@@ -34,6 +34,7 @@ exports[`should render left slot correctly 1`] = `
       <div class="van-cell__value van-cell__value--alone van-field__value">
         <div class="van-field__body">
           <input type="search"
+                 id="van-field-input"
                  class="van-field__control"
           >
         </div>