From aed8cd1ff213f493f6e561ec737b46f424010788 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 16 Jul 2020 22:56:20 +0800
Subject: [PATCH] fix(NumberKeyboard): flex not work on legacy safari (#6804)

---
 src/number-keyboard/Key.js                    |   7 +-
 src/number-keyboard/index.less                |   3 -
 .../test/__snapshots__/demo.spec.js.snap      | 316 +++++++++----
 .../test/__snapshots__/index.spec.js.snap     | 414 +++++++++++++-----
 .../test/__snapshots__/demo.spec.js.snap      |  52 ++-
 5 files changed, 578 insertions(+), 214 deletions(-)

diff --git a/src/number-keyboard/Key.js b/src/number-keyboard/Key.js
index 158aa0a57..858af2257 100644
--- a/src/number-keyboard/Key.js
+++ b/src/number-keyboard/Key.js
@@ -78,8 +78,9 @@ export default createComponent({
   render() {
     return (
       <div class={bem('wrapper', { wider: this.wider })}>
-        <button
-          type="button"
+        <div
+          role="button"
+          tabindex="0"
           class={bem([
             this.color,
             {
@@ -90,7 +91,7 @@ export default createComponent({
           ])}
         >
           {this.genContent()}
-        </button>
+        </div>
       </div>
     );
   },
diff --git a/src/number-keyboard/index.less b/src/number-keyboard/index.less
index da0cb56aa..a6dcb5805 100644
--- a/src/number-keyboard/index.less
+++ b/src/number-keyboard/index.less
@@ -79,13 +79,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
   height: @number-keyboard-key-height;
-  padding: 0;
   font-size: @number-keyboard-key-font-size;
   line-height: 1.5;
   background-color: @white;
-  border: none;
   border-radius: @border-radius-lg;
   cursor: pointer;
 
diff --git a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
index a420dbc39..8de8b1efe 100644
--- a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
+++ b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
@@ -41,45 +41,95 @@ exports[`renders demo correctly 1`] = `
   <div class="van-number-keyboard" name="van-slide-up">
     <div class="van-number-keyboard__body">
       <div class="van-number-keyboard__keys">
-        <div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">1</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">2</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">3</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">4</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">5</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">6</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">7</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">8</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">9</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
               <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
-            </svg></button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+            </svg></div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">0</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
               <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-            </svg></button></div>
+            </svg></div>
+        </div>
       </div>
     </div>
   </div>
   <div class="van-number-keyboard" style="display: none;" name="van-slide-up">
     <div class="van-number-keyboard__body">
       <div class="van-number-keyboard__keys">
-        <div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-        <div class="van-key__wrapper van-key__wrapper--wider"><button type="button" class="van-key">0</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">.</button></div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">1</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">2</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">3</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">4</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">5</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">6</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">7</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">8</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">9</div>
+        </div>
+        <div class="van-key__wrapper van-key__wrapper--wider">
+          <div role="button" tabindex="0" class="van-key">0</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">.</div>
+        </div>
       </div>
       <div class="van-number-keyboard__sidebar">
-        <div class="van-key__wrapper"><button type="button" class="van-key van-key--large van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key van-key--large van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
               <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-            </svg></button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key van-key--blue van-key--large">完成</button></div>
+            </svg></div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key van-key--blue van-key--large">完成</div>
+        </div>
       </div>
     </div>
   </div>
@@ -87,20 +137,44 @@ exports[`renders demo correctly 1`] = `
     <div class="van-number-keyboard__header"><button type="button" class="van-number-keyboard__close">完成</button></div>
     <div class="van-number-keyboard__body">
       <div class="van-number-keyboard__keys">
-        <div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">X</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">1</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">2</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">3</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">4</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">5</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">6</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">7</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">8</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">9</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">X</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">0</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
               <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-            </svg></button></div>
+            </svg></div>
+        </div>
       </div>
     </div>
   </div>
@@ -110,66 +184,142 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div class="van-number-keyboard__body">
       <div class="van-number-keyboard__keys">
-        <div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">.</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">1</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">2</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">3</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">4</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">5</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">6</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">7</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">8</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">9</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">.</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">0</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
               <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-            </svg></button></div>
+            </svg></div>
+        </div>
       </div>
     </div>
   </div>
   <div class="van-number-keyboard" style="display: none;" name="van-slide-up">
     <div class="van-number-keyboard__body">
       <div class="van-number-keyboard__keys">
-        <div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">00</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">.</button></div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">1</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">2</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">3</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">4</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">5</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">6</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">7</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">8</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">9</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">00</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">0</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">.</div>
+        </div>
       </div>
       <div class="van-number-keyboard__sidebar">
-        <div class="van-key__wrapper"><button type="button" class="van-key van-key--large van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key van-key--large van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
               <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-            </svg></button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key van-key--blue van-key--large">完成</button></div>
+            </svg></div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key van-key--blue van-key--large">完成</div>
+        </div>
       </div>
     </div>
   </div>
   <div class="van-number-keyboard" style="display: none;" name="van-slide-up">
     <div class="van-number-keyboard__body">
       <div class="van-number-keyboard__keys">
-        <div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">1</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">2</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">3</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">4</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">5</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">6</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">7</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">8</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">9</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
               <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
-            </svg></button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-        <div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+            </svg></div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key">0</div>
+        </div>
+        <div class="van-key__wrapper">
+          <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
               <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-            </svg></button></div>
+            </svg></div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/number-keyboard/test/__snapshots__/index.spec.js.snap b/src/number-keyboard/test/__snapshots__/index.spec.js.snap
index 912ecac3d..928a45c13 100644
--- a/src/number-keyboard/test/__snapshots__/index.spec.js.snap
+++ b/src/number-keyboard/test/__snapshots__/index.spec.js.snap
@@ -4,20 +4,44 @@ exports[`extra-key slot 1`] = `
 <div class="van-number-keyboard" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__body">
     <div class="van-number-keyboard__keys">
-      <div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">Custom Extra Key</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">1</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">2</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">3</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">4</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">5</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">6</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">7</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">8</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">9</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">Custom Extra Key</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">0</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
             <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-          </svg></button></div>
+          </svg></div>
+      </div>
     </div>
   </div>
 </div>
@@ -27,22 +51,46 @@ exports[`focus on key 1`] = `
 <div class="van-number-keyboard" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__body">
     <div class="van-number-keyboard__keys">
-      <div class="van-key__wrapper"><button type="button" class="van-key van-key--active">1</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key van-key--active">1</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">2</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">3</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">4</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">5</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">6</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">7</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">8</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">9</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
             <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
-          </svg></button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          </svg></div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">0</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
             <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-          </svg></button></div>
+          </svg></div>
+      </div>
     </div>
   </div>
 </div>
@@ -52,22 +100,46 @@ exports[`focus on key 2`] = `
 <div class="van-number-keyboard" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__body">
     <div class="van-number-keyboard__keys">
-      <div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">1</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">2</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">3</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">4</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">5</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">6</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">7</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">8</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">9</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
             <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
-          </svg></button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          </svg></div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">0</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
             <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-          </svg></button></div>
+          </svg></div>
+      </div>
     </div>
   </div>
 </div>
@@ -77,22 +149,46 @@ exports[`move and blur key 1`] = `
 <div class="van-number-keyboard" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__body">
     <div class="van-number-keyboard__keys">
-      <div class="van-key__wrapper"><button type="button" class="van-key van-key--active">1</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key van-key--active">1</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">2</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">3</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">4</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">5</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">6</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">7</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">8</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">9</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
             <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
-          </svg></button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          </svg></div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">0</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
             <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-          </svg></button></div>
+          </svg></div>
+      </div>
     </div>
   </div>
 </div>
@@ -102,22 +198,46 @@ exports[`move and blur key 2`] = `
 <div class="van-number-keyboard" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__body">
     <div class="van-number-keyboard__keys">
-      <div class="van-key__wrapper"><button type="button" class="van-key van-key--active">1</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key van-key--active">1</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">2</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">3</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">4</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">5</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">6</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">7</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">8</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">9</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
             <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
-          </svg></button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          </svg></div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">0</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
             <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-          </svg></button></div>
+          </svg></div>
+      </div>
     </div>
   </div>
 </div>
@@ -127,22 +247,46 @@ exports[`move and blur key 3`] = `
 <div class="van-number-keyboard" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__body">
     <div class="van-number-keyboard__keys">
-      <div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">1</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">2</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">3</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">4</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">5</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">6</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">7</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">8</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">9</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
             <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
-          </svg></button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          </svg></div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">0</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
             <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-          </svg></button></div>
+          </svg></div>
+      </div>
     </div>
   </div>
 </div>
@@ -155,22 +299,46 @@ exports[`render title 1`] = `
   </div>
   <div class="van-number-keyboard__body">
     <div class="van-number-keyboard__keys">
-      <div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">1</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">2</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">3</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">4</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">5</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">6</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">7</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">8</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">9</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
             <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
-          </svg></button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          </svg></div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">0</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
             <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-          </svg></button></div>
+          </svg></div>
+      </div>
     </div>
   </div>
 </div>
@@ -181,22 +349,46 @@ exports[`title-left slot 1`] = `
   <div class="van-number-keyboard__header"><span class="van-number-keyboard__title-left">Custom Title Left</span></div>
   <div class="van-number-keyboard__body">
     <div class="van-number-keyboard__keys">
-      <div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">1</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">2</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">3</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">4</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">5</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">6</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">7</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">8</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">9</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
             <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
-          </svg></button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-      <div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+          </svg></div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key">0</div>
+      </div>
+      <div class="van-key__wrapper">
+        <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
             <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-          </svg></button></div>
+          </svg></div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/password-input/test/__snapshots__/demo.spec.js.snap b/src/password-input/test/__snapshots__/demo.spec.js.snap
index 52ca0fd65..ca92591da 100644
--- a/src/password-input/test/__snapshots__/demo.spec.js.snap
+++ b/src/password-input/test/__snapshots__/demo.spec.js.snap
@@ -19,22 +19,46 @@ exports[`renders demo correctly 1`] = `
     <div class="van-number-keyboard" name="van-slide-up">
       <div class="van-number-keyboard__body">
         <div class="van-number-keyboard__keys">
-          <div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
-          <div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
-          <div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
-          <div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
-          <div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
-          <div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
-          <div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
-          <div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
-          <div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
-          <div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
+          <div class="van-key__wrapper">
+            <div role="button" tabindex="0" class="van-key">1</div>
+          </div>
+          <div class="van-key__wrapper">
+            <div role="button" tabindex="0" class="van-key">2</div>
+          </div>
+          <div class="van-key__wrapper">
+            <div role="button" tabindex="0" class="van-key">3</div>
+          </div>
+          <div class="van-key__wrapper">
+            <div role="button" tabindex="0" class="van-key">4</div>
+          </div>
+          <div class="van-key__wrapper">
+            <div role="button" tabindex="0" class="van-key">5</div>
+          </div>
+          <div class="van-key__wrapper">
+            <div role="button" tabindex="0" class="van-key">6</div>
+          </div>
+          <div class="van-key__wrapper">
+            <div role="button" tabindex="0" class="van-key">7</div>
+          </div>
+          <div class="van-key__wrapper">
+            <div role="button" tabindex="0" class="van-key">8</div>
+          </div>
+          <div class="van-key__wrapper">
+            <div role="button" tabindex="0" class="van-key">9</div>
+          </div>
+          <div class="van-key__wrapper">
+            <div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
                 <path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
-              </svg></button></div>
-          <div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
-          <div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
+              </svg></div>
+          </div>
+          <div class="van-key__wrapper">
+            <div role="button" tabindex="0" class="van-key">0</div>
+          </div>
+          <div class="van-key__wrapper">
+            <div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
                 <path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
-              </svg></button></div>
+              </svg></div>
+          </div>
         </div>
       </div>
     </div>