From 3c210f8252e4655e0c4247e8edd8ff8923417d05 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 20 Sep 2019 20:29:38 +0800
Subject: [PATCH] feat(Cell): improve accessibility (#4519)

---
 .../test/__snapshots__/demo.spec.js.snap      |  4 +-
 src/cell/index.tsx                            | 13 ++++--
 src/cell/test/__snapshots__/demo.spec.js.snap | 12 +++---
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  6 +--
 .../test/__snapshots__/demo.spec.js.snap      |  4 +-
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 .../test/__snapshots__/index.spec.js.snap     |  4 +-
 .../test/__snapshots__/index.spec.js.snap     | 40 +++++++++----------
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      | 20 +++++-----
 .../test/__snapshots__/demo.spec.js.snap      |  4 +-
 15 files changed, 63 insertions(+), 56 deletions(-)

diff --git a/src/address-list/test/__snapshots__/demo.spec.js.snap b/src/address-list/test/__snapshots__/demo.spec.js.snap
index aa4601866..bd2ed0002 100644
--- a/src/address-list/test/__snapshots__/demo.spec.js.snap
+++ b/src/address-list/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-address-list">
       <div role="radiogroup" class="van-radio-group">
-        <div class="van-cell van-cell--clickable van-address-item">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-address-item">
           <div class="van-cell__value van-cell__value--alone van-address-item__value">
             <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
               <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success">
@@ -14,7 +14,7 @@ exports[`renders demo correctly 1`] = `
           </div><i class="van-icon van-icon-edit van-address-item__edit">
             <!----></i>
         </div>
-        <div class="van-cell van-cell--clickable van-address-item">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-address-item">
           <div class="van-cell__value van-cell__value--alone van-address-item__value">
             <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
               <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
diff --git a/src/cell/index.tsx b/src/cell/index.tsx
index c1daebef4..01d660391 100644
--- a/src/cell/index.tsx
+++ b/src/cell/index.tsx
@@ -75,11 +75,12 @@ function Cell(
     functionalRoute(ctx);
   }
 
+  const clickable = isLink || props.clickable;
   const classes: Mods = {
+    clickable,
     center: props.center,
     required: props.required,
-    borderless: !props.border,
-    clickable: isLink || props.clickable
+    borderless: !props.border
   };
 
   if (size) {
@@ -87,7 +88,13 @@ function Cell(
   }
 
   return (
-    <div class={bem(classes)} onClick={onClick} {...inherit(ctx)}>
+    <div
+      class={bem(classes)}
+      role={clickable ? 'button' : null}
+      tabindex={clickable ? 0 : null}
+      onClick={onClick}
+      {...inherit(ctx)}
+    >
       {LeftIcon}
       {Title}
       {Value}
diff --git a/src/cell/test/__snapshots__/demo.spec.js.snap b/src/cell/test/__snapshots__/demo.spec.js.snap
index 8e29a301e..043ab809e 100644
--- a/src/cell/test/__snapshots__/demo.spec.js.snap
+++ b/src/cell/test/__snapshots__/demo.spec.js.snap
@@ -41,27 +41,27 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>单元格</span></div>
       <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>单元格</span></div>
       <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow-down van-cell__right-icon">
         <!----></i>
     </div>
   </div>
   <div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>URL 跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>路由跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
@@ -87,7 +87,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span class="custom-title">单元格</span> <span class="van-tag van-tag--danger">标签</span></div>
       <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
diff --git a/src/cell/test/__snapshots__/index.spec.js.snap b/src/cell/test/__snapshots__/index.spec.js.snap
index 28d08e12d..2ede87136 100644
--- a/src/cell/test/__snapshots__/index.spec.js.snap
+++ b/src/cell/test/__snapshots__/index.spec.js.snap
@@ -8,7 +8,7 @@ exports[`CellGroup title slot 1`] = `
 `;
 
 exports[`arrow direction 1`] = `
-<div class="van-cell van-cell--clickable"><i class="van-icon van-icon-arrow-down van-cell__right-icon">
+<div role="button" tabindex="0" class="van-cell van-cell--clickable"><i class="van-icon van-icon-arrow-down van-cell__right-icon">
     <!----></i></div>
 `;
 
diff --git a/src/checkbox/test/__snapshots__/demo.spec.js.snap b/src/checkbox/test/__snapshots__/demo.spec.js.snap
index 8bc123539..7a3c65e89 100644
--- a/src/checkbox/test/__snapshots__/demo.spec.js.snap
+++ b/src/checkbox/test/__snapshots__/demo.spec.js.snap
@@ -84,21 +84,21 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-checkbox-group">
       <div class="van-cell-group van-hairline--top-bottom">
-        <div class="van-cell van-cell--clickable">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable">
           <div class="van-cell__title"><span>复选框a</span></div>
           <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
             <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
                 <!----></i></div>
           </div>
         </div>
-        <div class="van-cell van-cell--clickable">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable">
           <div class="van-cell__title"><span>复选框b</span></div>
           <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
             <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
                 <!----></i></div>
           </div>
         </div>
-        <div class="van-cell van-cell--clickable">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable">
           <div class="van-cell__title"><span>复选框c</span></div>
           <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
             <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
diff --git a/src/contact-card/test/__snapshots__/demo.spec.js.snap b/src/contact-card/test/__snapshots__/demo.spec.js.snap
index 2ac3e086f..3c906c085 100644
--- a/src/contact-card/test/__snapshots__/demo.spec.js.snap
+++ b/src/contact-card/test/__snapshots__/demo.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-cell van-cell--center van-cell--borderless van-cell--clickable van-contact-card van-contact-card--add"><i class="van-icon van-icon-add-square van-cell__left-icon">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--add"><i class="van-icon van-icon-add-square van-cell__left-icon">
         <!----></i>
       <div class="van-cell__value van-cell__value--alone van-contact-card__value">添加联系人</div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
@@ -11,7 +11,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
       <div class="van-contact-list">
         <div role="radiogroup" class="van-radio-group van-contact-list__group">
-          <div class="van-cell van-cell--clickable van-contact-list__item">
+          <div role="button" tabindex="0" class="van-cell van-cell--clickable van-contact-list__item">
             <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
               <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
                 <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
diff --git a/src/contact-card/test/__snapshots__/index.spec.js.snap b/src/contact-card/test/__snapshots__/index.spec.js.snap
index 83307576a..2f7b2323e 100644
--- a/src/contact-card/test/__snapshots__/index.spec.js.snap
+++ b/src/contact-card/test/__snapshots__/index.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`ContactList render 1`] = `
 <div class="van-contact-list">
   <div role="radiogroup" class="van-radio-group van-contact-list__group">
-    <div class="van-cell van-cell--clickable van-contact-list__item">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-contact-list__item">
       <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
         <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
           <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
diff --git a/src/coupon-list/test/__snapshots__/demo.spec.js.snap b/src/coupon-list/test/__snapshots__/demo.spec.js.snap
index d8cebba0a..73c038f70 100644
--- a/src/coupon-list/test/__snapshots__/demo.spec.js.snap
+++ b/src/coupon-list/test/__snapshots__/demo.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-cell van-cell--clickable van-coupon-cell">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-coupon-cell">
       <div class="van-cell__title"><span>优惠券</span></div>
       <div class="van-cell__value"><span>2张可用</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
diff --git a/src/coupon-list/test/__snapshots__/index.spec.js.snap b/src/coupon-list/test/__snapshots__/index.spec.js.snap
index 62fd3580c..e18e74a12 100644
--- a/src/coupon-list/test/__snapshots__/index.spec.js.snap
+++ b/src/coupon-list/test/__snapshots__/index.spec.js.snap
@@ -34,7 +34,7 @@ exports[`empty-image prop 1`] = `
 `;
 
 exports[`render coupon cell 1`] = `
-<div class="van-cell van-cell--clickable van-coupon-cell">
+<div role="button" tabindex="0" class="van-cell van-cell--clickable van-coupon-cell">
   <div class="van-cell__title"><span>优惠券</span></div>
   <div class="van-cell__value"><span>使用优惠</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
     <!----></i>
@@ -42,7 +42,7 @@ exports[`render coupon cell 1`] = `
 `;
 
 exports[`render coupon cell with coupon 1`] = `
-<div class="van-cell van-cell--clickable van-coupon-cell">
+<div role="button" tabindex="0" class="van-cell van-cell--clickable van-coupon-cell">
   <div class="van-cell__title"><span>优惠券</span></div>
   <div class="van-cell__value van-coupon-cell--selected"><span>-¥1.00</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
     <!----></i>
diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
index 3ff561ea4..6c5656846 100644
--- a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
@@ -7,10 +7,10 @@ exports[`click option 1`] = `
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-overlay" style="z-index: 2013; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2014;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>A</span></div>
       </div>
-      <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
         <div class="van-cell__title"><span>B</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
@@ -29,12 +29,12 @@ exports[`close-on-click-outside 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable van-dropdown-item__option">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
@@ -87,12 +87,12 @@ exports[`direction up 2`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 1000px;">
     <div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable van-dropdown-item__option">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
@@ -109,12 +109,12 @@ exports[`disable close-on-click-outside 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable van-dropdown-item__option">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
@@ -140,13 +140,13 @@ exports[`render option icon 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"><i class="van-icon van-icon-success van-cell__left-icon">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"><i class="van-icon van-icon-success van-cell__left-icon">
           <!----></i>
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable van-dropdown-item__option"><i class="van-icon van-icon-success van-cell__left-icon">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option"><i class="van-icon van-icon-success van-cell__left-icon">
           <!----></i>
         <div class="van-cell__title"><span>B</span></div>
       </div>
@@ -164,12 +164,12 @@ exports[`show dropdown item 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable van-dropdown-item__option">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
@@ -186,24 +186,24 @@ exports[`show dropdown item 2`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable van-dropdown-item__option">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable van-dropdown-item__option">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
@@ -217,24 +217,24 @@ exports[`show dropdown item 3`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable van-dropdown-item__option">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
-      <div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active">
         <div class="van-cell__title"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon">
             <!----></i></div>
       </div>
-      <div class="van-cell van-cell--clickable van-dropdown-item__option">
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-dropdown-item__option">
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
diff --git a/src/field/test/__snapshots__/index.spec.js.snap b/src/field/test/__snapshots__/index.spec.js.snap
index dea971216..d7af6becf 100644
--- a/src/field/test/__snapshots__/index.spec.js.snap
+++ b/src/field/test/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`arrow-direction prop 1`] = `
-<div class="van-cell van-cell--clickable van-field">
+<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
   <div class="van-cell__value van-cell__value--alone">
     <div class="van-field__body"><input type="text" class="van-field__control"></div>
   </div><i class="van-icon van-icon-arrow-up van-cell__right-icon">
diff --git a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
index 0588e6866..a059412ae 100644
--- a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
+++ b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
@@ -20,7 +20,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-cell van-cell--clickable van-field">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__value van-cell__value--alone">
         <div class="van-field__body"><input type="text" placeholder="点此输入" readonly="readonly" class="van-field__control"></div>
       </div>
diff --git a/src/picker/test/__snapshots__/demo.spec.js.snap b/src/picker/test/__snapshots__/demo.spec.js.snap
index 7a7072fd2..936d5e5fc 100644
--- a/src/picker/test/__snapshots__/demo.spec.js.snap
+++ b/src/picker/test/__snapshots__/demo.spec.js.snap
@@ -65,7 +65,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-cell van-cell--clickable van-field">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>城市</span></div>
       <div class="van-cell__value">
         <div class="van-field__body"><input type="text" placeholder="选择城市" readonly="readonly" class="van-field__control"></div>
diff --git a/src/popup/test/__snapshots__/demo.spec.js.snap b/src/popup/test/__snapshots__/demo.spec.js.snap
index ce015a628..29daf9410 100644
--- a/src/popup/test/__snapshots__/demo.spec.js.snap
+++ b/src/popup/test/__snapshots__/demo.spec.js.snap
@@ -3,26 +3,26 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>展示弹出层</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
     <!---->
   </div>
   <div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>顶部弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>底部弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>左侧弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>右侧弹出</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
@@ -32,15 +32,15 @@ exports[`renders demo correctly 1`] = `
     <!---->
   </div>
   <div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>关闭图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>自定义图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>图标位置</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
@@ -49,14 +49,14 @@ exports[`renders demo correctly 1`] = `
     <!---->
   </div>
   <div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>圆角弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
     <!---->
   </div>
   <div>
-    <div class="van-cell van-cell--clickable">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
       <div class="van-cell__title"><span>指定挂载节点</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
diff --git a/src/radio/test/__snapshots__/demo.spec.js.snap b/src/radio/test/__snapshots__/demo.spec.js.snap
index 46cf6b222..80190490e 100644
--- a/src/radio/test/__snapshots__/demo.spec.js.snap
+++ b/src/radio/test/__snapshots__/demo.spec.js.snap
@@ -59,14 +59,14 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div role="radiogroup" class="van-radio-group">
       <div class="van-cell-group van-hairline--top-bottom">
-        <div class="van-cell van-cell--clickable">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable">
           <div class="van-cell__title"><span>单选框1</span></div>
           <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
             <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
                 <!----></i></div>
           </div>
         </div>
-        <div class="van-cell van-cell--clickable">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable">
           <div class="van-cell__title"><span>单选框2</span></div>
           <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
             <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">