blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Slider: improve accessibility

Browse Source
This commit is contained in:
陈嘉涵 2019-05-25 10:53:52 +08:00
parent 5ee4c2f4af
commit ae0aaab3ba
5 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/markdown/changelog.zh-CN.md
View File

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

6
packages/slider/index.js
View File

@ -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}

4
packages/slider/index.less
View File

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

14
packages/slider/test/__snapshots__/demo.spec.js.snap
View File

@ -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>

12
packages/slider/test/__snapshots__/index.spec.js.snap
View File

@ -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>