From ae0aaab3baca38348e1c2b443a577c624ff4ba4f 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 10:53:52 +0800
Subject: [PATCH] [improvement] Slider: improve accessibility

---
 docs/markdown/changelog.zh-CN.md                   |  1 +
 packages/slider/index.js                           |  6 ++++++
 packages/slider/index.less                         |  4 ++++
 .../slider/test/__snapshots__/demo.spec.js.snap    | 14 +++++++-------
 .../slider/test/__snapshots__/index.spec.js.snap   | 12 ++++++------
 5 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md
index e147e587a..68bb8cc66 100644
--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@@ -7,6 +7,7 @@
 对以下组件增加了无障碍访问的支持：
 
 - Dialog
+- Slider
 
 ##### ImagePreview
 
diff --git a/packages/slider/index.js b/packages/slider/index.js
index 99c5d5f2b..d24aa34c7 100644
--- a/packages/slider/index.js
+++ b/packages/slider/index.js
@@ -109,6 +109,12 @@ export default sfc({
       >
         <div class={bem('bar')} style={barStyle}>
           <div
+            role="slider"
+            tabindex={this.disabled ? -1 : 0}
+            aria-valuemin={this.min}
+            aria-valuenow={this.value}
+            aria-valuemax={this.max}
+            aria-orientation={this.vertical ? 'vertical' : 'horizontal'}
             class={bem('button-wrapper')}
             onTouchstart={this.onTouchStart}
             onTouchmove={this.onTouchMove}
diff --git a/packages/slider/index.less b/packages/slider/index.less
index c0b695e69..b646e2f27 100644
--- a/packages/slider/index.less
+++ b/packages/slider/index.less
@@ -33,6 +33,10 @@
         height: 200%;
         content: '';
       }
+
+      &:focus {
+        outline: none;
+      }
     }
   }
 
diff --git a/packages/slider/test/__snapshots__/demo.spec.js.snap b/packages/slider/test/__snapshots__/demo.spec.js.snap
index 63441973e..787e3bc1c 100644
--- a/packages/slider/test/__snapshots__/demo.spec.js.snap
+++ b/packages/slider/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-slider">
       <div class="van-slider__bar" style="width: 50%; height: 2px;">
-        <div class="van-slider__button-wrapper">
+        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
       </div>
@@ -14,7 +14,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-slider">
       <div class="van-slider__bar" style="width: 50%; height: 2px;">
-        <div class="van-slider__button-wrapper">
+        <div role="slider" tabindex="0" aria-valuemin="10" aria-valuenow="50" aria-valuemax="90" aria-orientation="horizontal" class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
       </div>
@@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-slider van-slider--disabled">
       <div class="van-slider__bar" style="width: 50%; height: 2px;">
-        <div class="van-slider__button-wrapper">
+        <div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
       </div>
@@ -32,7 +32,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-slider">
       <div class="van-slider__bar" style="width: 50%; height: 2px;">
-        <div class="van-slider__button-wrapper">
+        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
       </div>
@@ -41,7 +41,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-slider">
       <div class="van-slider__bar" style="width: 50%; height: 4px; background: rgb(255, 68, 68);">
-        <div class="van-slider__button-wrapper">
+        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
       </div>
@@ -50,7 +50,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-slider">
       <div class="van-slider__bar" style="width: 50%; height: 2px; background: rgb(255, 68, 68);">
-        <div class="van-slider__button-wrapper">
+        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
           <div class="custom-button">
             50
           </div>
@@ -62,7 +62,7 @@ exports[`renders demo correctly 1`] = `
     <div style="height: 120px; padding-left: 30px;">
       <div class="van-slider van-slider--vertical">
         <div class="van-slider__bar" style="height: 50%; width: 2px;">
-          <div class="van-slider__button-wrapper">
+          <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
             <div class="van-slider__button"></div>
           </div>
         </div>
diff --git a/packages/slider/test/__snapshots__/index.spec.js.snap b/packages/slider/test/__snapshots__/index.spec.js.snap
index 9b1b41e6d..9b57b909b 100644
--- a/packages/slider/test/__snapshots__/index.spec.js.snap
+++ b/packages/slider/test/__snapshots__/index.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`click bar 1`] = `
 <div class="van-slider van-slider--disabled">
   <div class="van-slider__bar" style="width: 50%; height: 2px;">
-    <div class="van-slider__button-wrapper">
+    <div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
       <div class="van-slider__button"></div>
     </div>
   </div>
@@ -13,7 +13,7 @@ exports[`click bar 1`] = `
 exports[`click bar 2`] = `
 <div class="van-slider">
   <div class="van-slider__bar" style="width: 100%; height: 2px;">
-    <div class="van-slider__button-wrapper">
+    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
       <div class="van-slider__button"></div>
     </div>
   </div>
@@ -23,7 +23,7 @@ exports[`click bar 2`] = `
 exports[`click vertical 1`] = `
 <div class="van-slider van-slider--vertical">
   <div class="van-slider__bar" style="height: 100%; width: 2px;">
-    <div class="van-slider__button-wrapper">
+    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
       <div class="van-slider__button"></div>
     </div>
   </div>
@@ -33,7 +33,7 @@ exports[`click vertical 1`] = `
 exports[`drag button 1`] = `
 <div class="van-slider van-slider--disabled">
   <div class="van-slider__bar" style="width: 50%; height: 2px;">
-    <div class="van-slider__button-wrapper">
+    <div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
       <div class="van-slider__button"></div>
     </div>
   </div>
@@ -43,7 +43,7 @@ exports[`drag button 1`] = `
 exports[`drag button 2`] = `
 <div class="van-slider">
   <div class="van-slider__bar" style="width: 100%; height: 2px;">
-    <div class="van-slider__button-wrapper">
+    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
       <div class="van-slider__button"></div>
     </div>
   </div>
@@ -53,7 +53,7 @@ exports[`drag button 2`] = `
 exports[`drag button vertical 1`] = `
 <div class="van-slider van-slider--vertical">
   <div class="van-slider__bar" style="height: 100%; width: 2px;">
-    <div class="van-slider__button-wrapper">
+    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
       <div class="van-slider__button"></div>
     </div>
   </div>