[improvement] Slider: improve accessibility

docs/markdown/changelog.zh-CN.md

@@ -7,6 +7,7 @@
 对以下组件增加了无障碍访问的支持：
 
 - Dialog
+- Slider
 
 ##### ImagePreview
 

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}

packages/slider/index.less

@@ -33,6 +33,10 @@
         height: 200%;
         content: '';
       }
+
+      &:focus {
+        outline: none;
+      }
     }
   }
 

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>

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>