From b6e89016b37efddc04153c527885333e4fc66899 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Fri, 24 May 2019 15:09:36 +0800
Subject: [PATCH] [improvement] Stepper: improve accessibility

---
 docs/markdown/changelog.zh-CN.md                       | 4 ++++
 packages/stepper/index.js                              | 4 ++++
 packages/stepper/test/__snapshots__/demo.spec.js.snap  | 8 ++++----
 packages/stepper/test/__snapshots__/index.spec.js.snap | 6 +++---
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md
index 1307f9886..b04dfd121 100644
--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@@ -26,6 +26,10 @@
 
 - 支持惯性滚动
 
+##### Stepper
+
+- 优化无障碍访问
+
 ##### Tab
 
 - 优化无障碍访问
diff --git a/packages/stepper/index.js b/packages/stepper/index.js
index f364c9a55..37b213526 100644
--- a/packages/stepper/index.js
+++ b/packages/stepper/index.js
@@ -136,8 +136,12 @@ export default sfc({
         />
         <input
           type="number"
+          role="spinbutton"
           class={bem('input')}
           value={this.currentValue}
+          aria-valuemax={this.max}
+          aria-valuemin={this.min}
+          aria-valuenow={this.currentValue}
           disabled={this.disabled || this.disableInput}
           style={{ width: this.inputWidth }}
           onInput={this.onInput}
diff --git a/packages/stepper/test/__snapshots__/demo.spec.js.snap b/packages/stepper/test/__snapshots__/demo.spec.js.snap
index a152e6292..cc2dad44f 100644
--- a/packages/stepper/test/__snapshots__/demo.spec.js.snap
+++ b/packages/stepper/test/__snapshots__/demo.spec.js.snap
@@ -3,16 +3,16 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
   </div>
   <div>
-    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>
+    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>
   </div>
   <div>
-    <div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+    <div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="10" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
   </div>
   <div>
-    <div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+    <div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" role="spinbutton" aria-valuemax="40" aria-valuemin="5" aria-valuenow="9" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
   </div>
 </div>
 `;
diff --git a/packages/stepper/test/__snapshots__/index.spec.js.snap b/packages/stepper/test/__snapshots__/index.spec.js.snap
index 64f0ef9f1..48e5663d8 100644
--- a/packages/stepper/test/__snapshots__/index.spec.js.snap
+++ b/packages/stepper/test/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`disable stepper input 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus"></button></div>`;
+exports[`disable stepper input 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus"></button></div>`;
 
-exports[`disabled stepper 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
+exports[`disabled stepper 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
 
-exports[`input width 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" class="van-stepper__input" style="width: 10rem;"><button class="van-stepper__plus"></button></div>`;
+exports[`input width 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button class="van-stepper__plus"></button></div>`;