[improvement] Dialog: improve accessibility

This commit is contained in:
陈嘉涵 2019-05-25 10:44:17 +08:00
parent eb4b866906
commit 5ee4c2f4af
4 changed files with 23 additions and 5 deletions

View File

@ -1,6 +1,19 @@
# 更新日志
### [v2.0.0-beta.1](https://github.com/youzan/vant/tree/v2.0.0-beta.0)
### [v2.0.0-beta.1](https://github.com/youzan/vant/tree/v2.0.0-beta.1)
#### 无障碍访问
对以下组件增加了无障碍访问的支持:
- Dialog
##### ImagePreview
- 新增`close-on-popstate`属性
### [v2.0.0-beta.1](https://github.com/youzan/vant/tree/v2.0.0-beta.1)
#### 无障碍访问

View File

@ -127,7 +127,12 @@ export default sfc({
return (
<transition name="van-dialog-bounce">
<div vShow={this.value} class={[bem(), this.className]}>
<div
vShow={this.value}
role="dialog"
aria-labelledby={title || message}
class={[bem(), this.className]}
>
{Title}
{Content}
{ButtonGroup}

View File

@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
组件调用
</span></button>
<div class="van-dialog" style="display: none;" name="van-dialog-bounce">
<div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
<div class="van-dialog__header">标题</div>
<div class="van-dialog__content"><img src="https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg"></div>
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">取消</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">确认弹窗</span></button></div>

View File

@ -1,13 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`button color 1`] = `
<div class="van-dialog" name="van-dialog-bounce">
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;"><span class="van-button__text">取消</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;"><span class="van-button__text">确认</span></button></div>
</div>
`;
exports[`button text 1`] = `
<div class="van-dialog" name="van-dialog-bounce">
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">Custom cancel</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">Custom confirm</span></button></div>
</div>
`;