From 5ee4c2f4afcb1d93b59aa8bbb2efaf8138f6e949 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Sat, 25 May 2019 10:44:17 +0800
Subject: [PATCH] [improvement] Dialog: improve accessibility

---
 docs/markdown/changelog.zh-CN.md                  | 15 ++++++++++++++-
 packages/dialog/Dialog.js                         |  7 ++++++-
 .../dialog/test/__snapshots__/demo.spec.js.snap   |  2 +-
 .../dialog/test/__snapshots__/index.spec.js.snap  |  4 ++--
 4 files changed, 23 insertions(+), 5 deletions(-)

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>
 `;