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] Stepper: improve accessibility

Browse Source
This commit is contained in:
陈嘉涵 2019-05-24 15:09:36 +08:00
parent 78fa587575
commit b6e89016b3
4 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,6 +26,10 @@
- 支持惯性滚动 - 支持惯性滚动
##### Stepper
- 优化无障碍访问
##### Tab ##### Tab
- 优化无障碍访问 - 优化无障碍访问

4
packages/stepper/index.js
View File

@ -136,8 +136,12 @@ export default sfc({
/> />
<input <input
type="number" type="number"
role="spinbutton"
class={bem('input')} class={bem('input')}
value={this.currentValue} value={this.currentValue}
aria-valuemax={this.max}
aria-valuemin={this.min}
aria-valuenow={this.currentValue}
disabled={this.disabled || this.disableInput} disabled={this.disabled || this.disableInput}
style={{ width: this.inputWidth }} style={{ width: this.inputWidth }}
onInput={this.onInput} onInput={this.onInput}

8
packages/stepper/test/__snapshots__/demo.spec.js.snap
View File

@ -3,16 +3,16 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<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> <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> <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> <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>
</div> </div>
`; `;

6
packages/stepper/test/__snapshots__/index.spec.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // 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>`;