From 9c62bd3ebd48f982af2c47191327b577236bdf16 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 28 Aug 2021 21:58:59 +0800
Subject: [PATCH] feat(Field): using <label> tag for label (#9346)

---
 .../test/__snapshots__/demo.spec.ts.snap      | 20 ++---
 .../test/__snapshots__/index.spec.js.snap     | 76 +++++++++----------
 .../test/__snapshots__/demo.spec.ts.snap      | 16 ++--
 .../test/__snapshots__/demo.spec.ts.snap      | 16 ++--
 .../test/__snapshots__/demo.spec.ts.snap      |  8 +-
 src/field/Field.tsx                           |  2 +-
 .../test/__snapshots__/demo.spec.ts.snap      | 68 ++++++++---------
 .../test/__snapshots__/index.spec.js.snap     |  4 +-
 src/form/test/__snapshots__/demo.spec.ts.snap | 72 +++++++++---------
 .../test/__snapshots__/demo.spec.ts.snap      |  4 +-
 .../test/__snapshots__/demo.spec.ts.snap      |  4 +-
 .../test/__snapshots__/demo.spec.ts.snap      |  4 +-
 12 files changed, 147 insertions(+), 147 deletions(-)

diff --git a/src/address-edit/test/__snapshots__/demo.spec.ts.snap b/src/address-edit/test/__snapshots__/demo.spec.ts.snap
index 23beab81a..3a44405ce 100644
--- a/src/address-edit/test/__snapshots__/demo.spec.ts.snap
+++ b/src/address-edit/test/__snapshots__/demo.spec.ts.snap
@@ -6,9 +6,9 @@ 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">
-          <span>
+          <label>
             Name
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -21,9 +21,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Phone
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -39,9 +39,9 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Area
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -57,9 +57,9 @@ 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">
-          <span>
+          <label>
             Address
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -74,9 +74,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Postal
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
diff --git a/src/address-edit/test/__snapshots__/index.spec.js.snap b/src/address-edit/test/__snapshots__/index.spec.js.snap
index 599de63f4..ef5b38f22 100644
--- a/src/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/src/address-edit/test/__snapshots__/index.spec.js.snap
@@ -11,9 +11,9 @@ 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">
-        <span>
+        <label>
           Name
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -26,9 +26,9 @@ exports[`should render AddressEdit correctly 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Phone
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -44,9 +44,9 @@ exports[`should render AddressEdit correctly 1`] = `
          tabindex="0"
     >
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Area
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -62,9 +62,9 @@ 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">
-        <span>
+        <label>
           Address
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -96,9 +96,9 @@ 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">
-        <span>
+        <label>
           Name
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -111,9 +111,9 @@ exports[`should render AddressEdit with props correctly 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Phone
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -129,9 +129,9 @@ exports[`should render AddressEdit with props correctly 1`] = `
          tabindex="0"
     >
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Area
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -147,9 +147,9 @@ 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">
-        <span>
+        <label>
           Address
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -163,9 +163,9 @@ exports[`should render AddressEdit with props correctly 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Postal
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -209,9 +209,9 @@ 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">
-    <span>
+    <label>
       Address
-    </span>
+    </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
@@ -232,9 +232,9 @@ exports[`should valid address detail and render error message correctly 1`] = `
 exports[`should valid address detail and render error message correctly 2`] = `
 <div class="van-cell van-field van-address-edit-detail">
   <div class="van-cell__title van-field__label">
-    <span>
+    <label>
       Address
-    </span>
+    </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
@@ -255,9 +255,9 @@ exports[`should valid area code and render error message correctly 1`] = `
      tabindex="0"
 >
   <div class="van-cell__title van-field__label">
-    <span>
+    <label>
       Area
-    </span>
+    </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
@@ -282,9 +282,9 @@ exports[`should valid area code and render error message correctly 2`] = `
      tabindex="0"
 >
   <div class="van-cell__title van-field__label">
-    <span>
+    <label>
       Area
-    </span>
+    </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
@@ -303,9 +303,9 @@ exports[`should valid area code and render error message correctly 2`] = `
 exports[`should valid name and render error message correctly 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">
-    <span>
+    <label>
       Name
-    </span>
+    </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
@@ -324,9 +324,9 @@ exports[`should valid name and render error message correctly 1`] = `
 exports[`should valid name and render error message correctly 2`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">
-    <span>
+    <label>
       Name
-    </span>
+    </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
@@ -342,9 +342,9 @@ exports[`should valid name and render error message correctly 2`] = `
 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">
-    <span>
+    <label>
       Postal
-    </span>
+    </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
@@ -363,9 +363,9 @@ exports[`should valid postal code and render error message correctly 1`] = `
 exports[`should valid postal code and render error message correctly 2`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">
-    <span>
+    <label>
       Postal
-    </span>
+    </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
@@ -381,9 +381,9 @@ exports[`should valid postal code and render error message correctly 2`] = `
 exports[`should valid tel and render error message correctly 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">
-    <span>
+    <label>
       Phone
-    </span>
+    </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
@@ -402,9 +402,9 @@ exports[`should valid tel and render error message correctly 1`] = `
 exports[`should valid tel and render error message correctly 2`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">
-    <span>
+    <label>
       Phone
-    </span>
+    </label>
   </div>
   <div class="van-cell__value van-field__value">
     <div class="van-field__body">
diff --git a/src/cascader/test/__snapshots__/demo.spec.ts.snap b/src/cascader/test/__snapshots__/demo.spec.ts.snap
index 1e1fdca74..fc9aa2a91 100644
--- a/src/cascader/test/__snapshots__/demo.spec.ts.snap
+++ b/src/cascader/test/__snapshots__/demo.spec.ts.snap
@@ -7,9 +7,9 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <span>
+      <label>
         Area
-      </span>
+      </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
@@ -30,9 +30,9 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <span>
+      <label>
         Area
-      </span>
+      </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
@@ -53,9 +53,9 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <span>
+      <label>
         Area
-      </span>
+      </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
@@ -76,9 +76,9 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <span>
+      <label>
         Area
-      </span>
+      </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
diff --git a/src/config-provider/test/__snapshots__/demo.spec.ts.snap b/src/config-provider/test/__snapshots__/demo.spec.ts.snap
index 15a22184f..7bf82ac63 100644
--- a/src/config-provider/test/__snapshots__/demo.spec.ts.snap
+++ b/src/config-provider/test/__snapshots__/demo.spec.ts.snap
@@ -5,9 +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">
-        <span>
+        <label>
           Rate
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -73,9 +73,9 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Slider
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -121,9 +121,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">
-          <span>
+          <label>
             Rate
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -189,9 +189,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Slider
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
diff --git a/src/contact-edit/test/__snapshots__/demo.spec.ts.snap b/src/contact-edit/test/__snapshots__/demo.spec.ts.snap
index d9759b095..a6fdf3a90 100644
--- a/src/contact-edit/test/__snapshots__/demo.spec.ts.snap
+++ b/src/contact-edit/test/__snapshots__/demo.spec.ts.snap
@@ -6,9 +6,9 @@ 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">
-          <span>
+          <label>
             Name
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -21,9 +21,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Phone
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
diff --git a/src/field/Field.tsx b/src/field/Field.tsx
index bac5ef673..34e2e4e06 100644
--- a/src/field/Field.tsx
+++ b/src/field/Field.tsx
@@ -493,7 +493,7 @@ export default defineComponent({
         return [slots.label(), colon];
       }
       if (props.label) {
-        return <span>{props.label + colon}</span>;
+        return <label>{props.label + colon}</label>;
       }
     };
 
diff --git a/src/field/test/__snapshots__/demo.spec.ts.snap b/src/field/test/__snapshots__/demo.spec.ts.snap
index 2da71110f..65b05ab7e 100644
--- a/src/field/test/__snapshots__/demo.spec.ts.snap
+++ b/src/field/test/__snapshots__/demo.spec.ts.snap
@@ -5,9 +5,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">
-        <span>
+        <label>
           Label
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -24,9 +24,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">
-        <span>
+        <label>
           Text
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -39,9 +39,9 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Phone
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -54,9 +54,9 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Digit
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -70,9 +70,9 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Number
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -86,9 +86,9 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Password
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -105,9 +105,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">
-        <span>
+        <label>
           Text
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -120,9 +120,9 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div class="van-cell van-field van-field--disabled">
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Text
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -143,9 +143,9 @@ exports[`should render demo and match snapshot 1`] = `
         </i>
       </div>
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Text
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -166,9 +166,9 @@ exports[`should render demo and match snapshot 1`] = `
         </i>
       </div>
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Text
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -185,9 +185,9 @@ 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">
-        <span>
+        <label>
           Username
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -200,9 +200,9 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label van-field__label--required">
-        <span>
+        <label>
           Phone
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -222,9 +222,9 @@ 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">
-        <span>
+        <label>
           SMS
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -252,9 +252,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">
-        <span>
+        <label>
           Text
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -267,9 +267,9 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label">
-        <span>
+        <label>
           Text
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -302,9 +302,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">
-        <span>
+        <label>
           Message
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
@@ -329,9 +329,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">
-        <span>
+        <label>
           Text
-        </span>
+        </label>
       </div>
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
diff --git a/src/field/test/__snapshots__/index.spec.js.snap b/src/field/test/__snapshots__/index.spec.js.snap
index 065bb1b36..3fc01ab39 100644
--- a/src/field/test/__snapshots__/index.spec.js.snap
+++ b/src/field/test/__snapshots__/index.spec.js.snap
@@ -7,9 +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">
-  <span>
+  <label>
     foo:
-  </span>
+  </label>
 </div>
 `;
 
diff --git a/src/form/test/__snapshots__/demo.spec.ts.snap b/src/form/test/__snapshots__/demo.spec.ts.snap
index 93426c10d..b7ac64b24 100644
--- a/src/form/test/__snapshots__/demo.spec.ts.snap
+++ b/src/form/test/__snapshots__/demo.spec.ts.snap
@@ -6,9 +6,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">
-          <span>
+          <label>
             Username
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -22,9 +22,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Password
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -55,9 +55,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">
-          <span>
+          <label>
             Label
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -71,9 +71,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Label
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -87,9 +87,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Label
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -103,9 +103,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Label
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -136,9 +136,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">
-          <span>
+          <label>
             Switch
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -157,9 +157,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Checkbox
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -180,9 +180,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Checkbox Group
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -221,9 +221,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Radio
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -264,9 +264,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Stepper
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -295,9 +295,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Rate
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -363,9 +363,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Slider
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -393,9 +393,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Uploader
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -437,9 +437,9 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Picker
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -459,9 +459,9 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Datetime Picker
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -481,9 +481,9 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Area Picker
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
@@ -503,9 +503,9 @@ exports[`should render demo and match snapshot 1`] = `
            tabindex="0"
       >
         <div class="van-cell__title van-field__label">
-          <span>
+          <label>
             Calendar
-          </span>
+          </label>
         </div>
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
diff --git a/src/number-keyboard/test/__snapshots__/demo.spec.ts.snap b/src/number-keyboard/test/__snapshots__/demo.spec.ts.snap
index 98b4f4cde..6acbc6a49 100644
--- a/src/number-keyboard/test/__snapshots__/demo.spec.ts.snap
+++ b/src/number-keyboard/test/__snapshots__/demo.spec.ts.snap
@@ -79,9 +79,9 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <span>
+      <label>
         Bind Value
-      </span>
+      </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
diff --git a/src/picker/test/__snapshots__/demo.spec.ts.snap b/src/picker/test/__snapshots__/demo.spec.ts.snap
index 9947926d9..5c77a051f 100644
--- a/src/picker/test/__snapshots__/demo.spec.ts.snap
+++ b/src/picker/test/__snapshots__/demo.spec.ts.snap
@@ -679,9 +679,9 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <span>
+      <label>
         City
-      </span>
+      </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">
diff --git a/src/popover/test/__snapshots__/demo.spec.ts.snap b/src/popover/test/__snapshots__/demo.spec.ts.snap
index 3504249f3..c623ba822 100644
--- a/src/popover/test/__snapshots__/demo.spec.ts.snap
+++ b/src/popover/test/__snapshots__/demo.spec.ts.snap
@@ -31,9 +31,9 @@ exports[`should render demo and match snapshot 1`] = `
        tabindex="0"
   >
     <div class="van-cell__title van-field__label">
-      <span>
+      <label>
         Placement
-      </span>
+      </label>
     </div>
     <div class="van-cell__value van-field__value">
       <div class="van-field__body">