From 1821889f01c7dedda92ce126348734fd734238fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Sat, 25 May 2019 16:33:35 +0800
Subject: [PATCH] [improvement] NumberKeyboard: improve accessibility

---
 docs/markdown/changelog.zh-CN.md              |  1 +
 .../test/__snapshots__/index.spec.js.snap     |  8 ++---
 .../area/test/__snapshots__/demo.spec.js.snap | 12 +++----
 .../test/__snapshots__/index.spec.js.snap     | 32 +++++++++---------
 .../test/__snapshots__/demo.spec.js.snap      | 20 +++++------
 packages/number-keyboard/Key.js               | 10 ++++--
 packages/number-keyboard/demo/index.vue       |  2 ++
 packages/number-keyboard/index.js             | 33 ++++++++++---------
 packages/number-keyboard/index.less           |  4 +++
 .../test/__snapshots__/demo.spec.js.snap      | 12 +++----
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 packages/number-keyboard/test/index.spec.js   | 18 +++-------
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 packages/picker/index.js                      |  4 +--
 .../test/__snapshots__/demo.spec.js.snap      |  4 +--
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 16 files changed, 85 insertions(+), 81 deletions(-)

diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md
index f212e35e5..785897870 100644
--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@@ -13,6 +13,7 @@
 - Switch
 - NoticeBar
 - GoodsAction
+- NumberKeyboard
 
 ##### ImagePreview
 
diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap
index fa9769485..5dc1d0b1e 100644
--- a/packages/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap
@@ -34,8 +34,8 @@ exports[`create a AddressEdit 1`] = `
   <div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
-        <div class="van-picker__confirm">确认</div>
+        <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+        <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
       </div>
       <div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#1989fa;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
       <div class="van-picker__columns" style="height:220px;">
@@ -104,8 +104,8 @@ exports[`create a AddressEdit with props 1`] = `
   <div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
-        <div class="van-picker__confirm">确认</div>
+        <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+        <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">
diff --git a/packages/area/test/__snapshots__/demo.spec.js.snap b/packages/area/test/__snapshots__/demo.spec.js.snap
index f0aec1b7f..e548d5bec 100644
--- a/packages/area/test/__snapshots__/demo.spec.js.snap
+++ b/packages/area/test/__snapshots__/demo.spec.js.snap
@@ -5,8 +5,8 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
-        <div class="van-picker__confirm">确认</div>
+        <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+        <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
@@ -82,8 +82,8 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
-        <div class="van-picker__confirm">确认</div>
+        <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+        <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
@@ -164,9 +164,9 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
+        <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div class="van-ellipsis van-picker__title">标题</div>
-        <div class="van-picker__confirm">确认</div>
+        <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
diff --git a/packages/area/test/__snapshots__/index.spec.js.snap b/packages/area/test/__snapshots__/index.spec.js.snap
index ca8fe3fac..24670c3c0 100644
--- a/packages/area/test/__snapshots__/index.spec.js.snap
+++ b/packages/area/test/__snapshots__/index.spec.js.snap
@@ -3,8 +3,8 @@
 exports[`change option 1`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
-    <div class="van-picker__confirm">确认</div>
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -35,8 +35,8 @@ exports[`change option 1`] = `
 exports[`change option 2`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
-    <div class="van-picker__confirm">确认</div>
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -67,8 +67,8 @@ exports[`change option 2`] = `
 exports[`change option 3`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
-    <div class="van-picker__confirm">确认</div>
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -99,8 +99,8 @@ exports[`change option 3`] = `
 exports[`reset method 1`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
-    <div class="van-picker__confirm">确认</div>
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -130,8 +130,8 @@ exports[`reset method 1`] = `
 exports[`reset method 2`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
-    <div class="van-picker__confirm">确认</div>
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -162,8 +162,8 @@ exports[`reset method 2`] = `
 exports[`watch areaList & code 1`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
-    <div class="van-picker__confirm">确认</div>
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -194,8 +194,8 @@ exports[`watch areaList & code 1`] = `
 exports[`watch areaList & code 2`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
-    <div class="van-picker__confirm">确认</div>
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -226,8 +226,8 @@ exports[`watch areaList & code 2`] = `
 exports[`watch areaList & code 3`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
-    <div class="van-picker__confirm">确认</div>
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
diff --git a/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap b/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
index ab86e3f2e..21feaf4f1 100644
--- a/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
+++ b/packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
@@ -5,8 +5,8 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
-        <div class="van-picker__confirm">确认</div>
+        <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+        <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
@@ -167,8 +167,8 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
-        <div class="van-picker__confirm">确认</div>
+        <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+        <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
@@ -247,8 +247,8 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
-        <div class="van-picker__confirm">确认</div>
+        <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+        <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
@@ -292,8 +292,8 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
-        <div class="van-picker__confirm">确认</div>
+        <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+        <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
@@ -384,8 +384,8 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
-        <div class="van-picker__confirm">确认</div>
+        <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+        <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
diff --git a/packages/number-keyboard/Key.js b/packages/number-keyboard/Key.js
index 01817c18e..cd2f03a50 100644
--- a/packages/number-keyboard/Key.js
+++ b/packages/number-keyboard/Key.js
@@ -1,5 +1,4 @@
 import { use } from '../utils';
-import { preventDefault } from '../utils/event';
 
 const [sfc, bem] = use('key');
 
@@ -26,12 +25,14 @@ export default sfc({
   methods: {
     onFocus() {
       this.active = true;
-      this.$emit('press', this.text);
     },
 
     onBlur(event) {
-      preventDefault(event, true);
       this.active = false;
+    },
+
+    onClick() {
+      this.$emit('press', this.text);
     }
   },
 
@@ -39,7 +40,10 @@ export default sfc({
     const { onBlur } = this;
     return (
       <i
+        role="button"
+        tabindex="0"
         class={['van-hairline', this.className]}
+        onClick={this.onClick}
         onTouchstart={this.onFocus}
         onTouchmove={onBlur}
         onTouchend={onBlur}
diff --git a/packages/number-keyboard/demo/index.vue b/packages/number-keyboard/demo/index.vue
index 7d3ef536e..4823995eb 100644
--- a/packages/number-keyboard/demo/index.vue
+++ b/packages/number-keyboard/demo/index.vue
@@ -12,6 +12,7 @@
         :show="keyboard === 'default'"
         :close-button-text="$t('close')"
         extra-key="."
+        safe-area-inset-bottom
         @blur="keyboard = ''"
         @input="onInput"
         @delete="onDelete"
@@ -31,6 +32,7 @@
         :close-button-text="$t('close')"
         theme="custom"
         extra-key="."
+        safe-area-inset-bottom
         @blur="keyboard = ''"
         @input="onInput"
         @delete="onDelete"
diff --git a/packages/number-keyboard/index.js b/packages/number-keyboard/index.js
index 66b25dfcb..ef0beeca7 100644
--- a/packages/number-keyboard/index.js
+++ b/packages/number-keyboard/index.js
@@ -100,7 +100,10 @@ export default sfc({
 
       if (action !== this.handlerStatus && this.hideOnClickOutside) {
         this.handlerStatus = action;
-        document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.onBlur);
+        document.body[(action ? 'add' : 'remove') + 'EventListener'](
+          'touchstart',
+          this.onBlur
+        );
       }
     },
 
@@ -139,6 +142,18 @@ export default sfc({
     const showTitleClose = closeButtonText && theme === 'default';
     const showTitle = title || showTitleClose || titleLeftSlot;
 
+    const Title = showTitle && (
+      <div class={[bem('title'), 'van-hairline--top']}>
+        {titleLeftSlot && <span class={bem('title-left')}>{titleLeftSlot}</span>}
+        {title && <span>{title}</span>}
+        {showTitleClose && (
+          <span role="button" tabindex="0" class={bem('close')} onClick={this.onClose}>
+            {closeButtonText}
+          </span>
+        )}
+      </div>
+    );
+
     return (
       <transition name={this.transition ? 'van-slide-up' : ''}>
         <div
@@ -149,21 +164,7 @@ export default sfc({
           onAnimationend={this.onAnimationEnd}
           onWebkitAnimationEnd={this.onAnimationEnd}
         >
-          {showTitle && (
-            <div class={[bem('title'), 'van-hairline--top']}>
-              {titleLeftSlot && (
-                <span class={bem('title-left')}>
-                  {titleLeftSlot}
-                </span>
-              )}
-              {title && <span>{title}</span>}
-              {showTitleClose && (
-                <span class={bem('close')} onClick={this.onClose}>
-                  {closeButtonText}
-                </span>
-              )}
-            </div>
-          )}
+          {Title}
           <div class={bem('body')}>
             {this.keys.map(key => (
               <Key key={key.text} text={key.text} type={key.type} onPress={onPress} />
diff --git a/packages/number-keyboard/index.less b/packages/number-keyboard/index.less
index 5569f8bc1..b5b2e6bf8 100644
--- a/packages/number-keyboard/index.less
+++ b/packages/number-keyboard/index.less
@@ -99,6 +99,10 @@
     &::after {
       border-color: @number-keyboard-button-background-color;
     }
+
+    &:active {
+      background-color: darken(@number-keyboard-button-background-color, 10%);
+    }
   }
 
   &--gray {
diff --git a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap b/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
index faf140ee4..6b618f786 100644
--- a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
+++ b/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap
@@ -5,17 +5,17 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       弹出默认键盘
     </span></button>
-    <div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
-      <div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__close">完成</span></div>
-      <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray">.</i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+    <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100;" name="van-slide-up">
+      <div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
+      <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       弹出自定义键盘
     </span></button>
-    <div class="van-number-keyboard van-number-keyboard--custom" style="z-index: 100; display: none;" name="van-slide-up">
-      <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--middle">0</i><i class="van-hairline van-key">.</i></div>
-      <div class="van-number-keyboard__sidebar"><i class="van-hairline van-key van-key--delete van-key--big van-key--gray">删除</i><i class="van-hairline van-key van-key--blue van-key--big">完成</i></div>
+    <div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
+      <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button" tabindex="0" class="van-hairline van-key">.</i></div>
+      <div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big">完成</i></div>
     </div>
   </div>
 </div>
diff --git a/packages/number-keyboard/test/__snapshots__/index.spec.js.snap b/packages/number-keyboard/test/__snapshots__/index.spec.js.snap
index 6748029d4..d67bc5f99 100644
--- a/packages/number-keyboard/test/__snapshots__/index.spec.js.snap
+++ b/packages/number-keyboard/test/__snapshots__/index.spec.js.snap
@@ -3,6 +3,6 @@
 exports[`title-left slot 1`] = `
 <div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
   <div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__title-left">Custom Title Left</span></div>
-  <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray"></i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+  <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
 </div>
 `;
diff --git a/packages/number-keyboard/test/index.spec.js b/packages/number-keyboard/test/index.spec.js
index e5299bffd..bc2865172 100644
--- a/packages/number-keyboard/test/index.spec.js
+++ b/packages/number-keyboard/test/index.spec.js
@@ -1,13 +1,6 @@
 import NumberKeyboard from '..';
 import { mount } from '../../../test/utils';
 
-function mockTouch(wrapper, event, keyIndex) {
-  const key = wrapper.element.querySelectorAll('.van-key')[keyIndex];
-  const touchStart = document.createEvent('CustomEvent');
-  touchStart.initCustomEvent(event, true, true, {});
-  key.dispatchEvent(touchStart);
-}
-
 test('click number key', () => {
   const wrapper = mount(NumberKeyboard, {
     propsData: {
@@ -16,16 +9,15 @@ test('click number key', () => {
     }
   });
 
-  mockTouch(wrapper, 'touchstart', 10);
-  mockTouch(wrapper, 'touchstart', 0);
-  mockTouch(wrapper, 'touchend', 0);
-  wrapper.destroy();
+  wrapper.findAll('.van-key').at(0).trigger('click');
   expect(wrapper.emitted('input')[0][0]).toEqual(1);
+
+  wrapper.destroy();
 });
 
 it('click delete key', () => {
   const wrapper = mount(NumberKeyboard);
-  mockTouch(wrapper, 'touchstart', 11);
+  wrapper.findAll('.van-key').at(11).trigger('click');
   expect(wrapper.emitted('delete')).toBeTruthy();
 });
 
@@ -37,7 +29,7 @@ test('click close button', () => {
     }
   });
 
-  mockTouch(wrapper, 'touchstart', 12);
+  wrapper.findAll('.van-key').at(12).trigger('click');
   expect(wrapper.emitted('close')).toBeTruthy();
 });
 
diff --git a/packages/password-input/test/__snapshots__/demo.spec.js.snap b/packages/password-input/test/__snapshots__/demo.spec.js.snap
index 489e24d59..dfec97366 100644
--- a/packages/password-input/test/__snapshots__/demo.spec.js.snap
+++ b/packages/password-input/test/__snapshots__/demo.spec.js.snap
@@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-password-input__info">密码为 6 位数字</div>
     </div>
     <div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
-      <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray"></i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+      <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>
   <div>
diff --git a/packages/picker/index.js b/packages/picker/index.js
index 0fe86c795..9d9b6a669 100644
--- a/packages/picker/index.js
+++ b/packages/picker/index.js
@@ -159,14 +159,14 @@ export default sfc({
     const Toolbar = this.showToolbar && (
       <div class={['van-hairline--top-bottom', bem('toolbar')]}>
         {this.slots() || [
-          <div class={bem('cancel')} onClick={this.onCancel}>
+          <div role="button" tabindex="0" class={bem('cancel')} onClick={this.onCancel}>
             {this.cancelButtonText || t('cancel')}
           </div>,
           this.slots('title') ||
             (this.title && (
               <div class={['van-ellipsis', bem('title')]}>{this.title}</div>
             )),
-          <div class={bem('confirm')} onClick={this.onConfirm}>
+          <div role="button" tabindex="0" class={bem('confirm')} onClick={this.onConfirm}>
             {this.confirmButtonText || t('confirm')}
           </div>
         ]}
diff --git a/packages/picker/test/__snapshots__/demo.spec.js.snap b/packages/picker/test/__snapshots__/demo.spec.js.snap
index 5fa3681dd..1dbbde6d4 100644
--- a/packages/picker/test/__snapshots__/demo.spec.js.snap
+++ b/packages/picker/test/__snapshots__/demo.spec.js.snap
@@ -41,9 +41,9 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
+        <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div class="van-ellipsis van-picker__title">标题</div>
-        <div class="van-picker__confirm">确认</div>
+        <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
diff --git a/packages/picker/test/__snapshots__/index.spec.js.snap b/packages/picker/test/__snapshots__/index.spec.js.snap
index ec496cdcf..f391d82b3 100644
--- a/packages/picker/test/__snapshots__/index.spec.js.snap
+++ b/packages/picker/test/__snapshots__/index.spec.js.snap
@@ -31,7 +31,7 @@ exports[`column watch default index 2`] = `
 exports[`render title slot 1`] = `
 <div class="van-picker">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>Custom title<div class="van-picker__confirm">确认</div>
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>Custom title<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">