diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index 7662be5f8..e147e587a 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/docs/markdown/changelog.zh-CN.md @@ -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) #### 无障碍访问 diff --git a/packages/dialog/Dialog.js b/packages/dialog/Dialog.js index e42c6307b..bb36d21e0 100644 --- a/packages/dialog/Dialog.js +++ b/packages/dialog/Dialog.js @@ -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} diff --git a/packages/dialog/test/__snapshots__/demo.spec.js.snap b/packages/dialog/test/__snapshots__/demo.spec.js.snap index a9b729f7c..4db6952d1 100644 --- a/packages/dialog/test/__snapshots__/demo.spec.js.snap +++ b/packages/dialog/test/__snapshots__/demo.spec.js.snap @@ -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> diff --git a/packages/dialog/test/__snapshots__/index.spec.js.snap b/packages/dialog/test/__snapshots__/index.spec.js.snap index a033091b4..ff58c9d98 100644 --- a/packages/dialog/test/__snapshots__/index.spec.js.snap +++ b/packages/dialog/test/__snapshots__/index.spec.js.snap @@ -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> `;