mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Dialog: improve accessibility
This commit is contained in:
parent
eb4b866906
commit
5ee4c2f4af
@ -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)
|
||||
|
||||
#### 无障碍访问
|
||||
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
`;
|
||||
|
Loading…
x
Reference in New Issue
Block a user