From cea1632927a14fe84825a783b47fe8093f3906c1 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 12:02:33 +0800
Subject: [PATCH] [improvement] NoticeBar: improve accessibility

---
 docs/markdown/changelog.zh-CN.md              |  1 +
 packages/notice-bar/index.js                  |  3 ++-
 .../test/__snapshots__/demo.spec.js.snap      | 24 +++++++++----------
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  4 ++--
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md
index 68bb8cc66..0a534dfe7 100644
--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@@ -8,6 +8,7 @@
 
 - Dialog
 - Slider
+- NoticeBar
 
 ##### ImagePreview
 
diff --git a/packages/notice-bar/index.js b/packages/notice-bar/index.js
index 97e6d1b95..4c633c8a2 100644
--- a/packages/notice-bar/index.js
+++ b/packages/notice-bar/index.js
@@ -117,6 +117,7 @@ export default sfc({
 
     return (
       <div
+        role="alert"
         vShow={this.showNoticeBar}
         class={bem({ wrapable: this.wrapable })}
         style={barStyle}
@@ -125,7 +126,7 @@ export default sfc({
         }}
       >
         {LeftIcon()}
-        <div ref="wrap" class={bem('wrap')}>
+        <div ref="wrap" class={bem('wrap')} role="marquee">
           <div
             ref="content"
             class={[
diff --git a/packages/notice-bar/test/__snapshots__/demo.spec.js.snap b/packages/notice-bar/test/__snapshots__/demo.spec.js.snap
index a77c9e112..b0b76e7fe 100644
--- a/packages/notice-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/notice-bar/test/__snapshots__/demo.spec.js.snap
@@ -3,45 +3,45 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon">
+    <div role="alert" class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon">
         <!----></i>
-      <div class="van-notice-bar__wrap">
+      <div role="marquee" class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
     </div>
   </div>
   <div>
-    <div class="van-notice-bar">
-      <div class="van-notice-bar__wrap">
+    <div role="alert" class="van-notice-bar">
+      <div role="marquee" class="van-notice-bar__wrap">
         <div class="van-notice-bar__content van-ellipsis" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
     </div>
   </div>
   <div>
-    <div class="van-notice-bar van-notice-bar--wrapable">
-      <div class="van-notice-bar__wrap">
+    <div role="alert" class="van-notice-bar van-notice-bar--wrapable">
+      <div role="marquee" class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
     </div>
   </div>
   <div>
-    <div class="van-notice-bar">
-      <div class="van-notice-bar__wrap">
+    <div role="alert" class="van-notice-bar">
+      <div role="marquee" class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div><i class="van-icon van-icon-cross van-notice-bar__right-icon">
         <!----></i>
     </div>
-    <div class="van-notice-bar">
-      <div class="van-notice-bar__wrap">
+    <div role="alert" class="van-notice-bar">
+      <div role="marquee" class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div><i class="van-icon van-icon-arrow van-notice-bar__right-icon">
         <!----></i>
     </div>
   </div>
   <div>
-    <div class="van-notice-bar" style="color: rgb(25, 137, 250); background: rgb(236, 249, 255);"><i class="van-icon van-icon-info-o van-notice-bar__left-icon">
+    <div role="alert" class="van-notice-bar" style="color: rgb(25, 137, 250); background: rgb(236, 249, 255);"><i class="van-icon van-icon-info-o van-notice-bar__left-icon">
         <!----></i>
-      <div class="van-notice-bar__wrap">
+      <div role="marquee" class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
     </div>
diff --git a/packages/notice-bar/test/__snapshots__/index.spec.js.snap b/packages/notice-bar/test/__snapshots__/index.spec.js.snap
index ad9b50e93..5b7145d72 100644
--- a/packages/notice-bar/test/__snapshots__/index.spec.js.snap
+++ b/packages/notice-bar/test/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`icon slot 1`] = `
-<div class="van-notice-bar">Custom Left Icon<div class="van-notice-bar__wrap">
+<div role="alert" class="van-notice-bar">Custom Left Icon<div role="marquee" class="van-notice-bar__wrap">
     <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">
       Content
     </div>
diff --git a/packages/swipe-cell/test/__snapshots__/demo.spec.js.snap b/packages/swipe-cell/test/__snapshots__/demo.spec.js.snap
index aca40e877..5bdc4f365 100644
--- a/packages/swipe-cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/swipe-cell/test/__snapshots__/demo.spec.js.snap
@@ -3,8 +3,8 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-notice-bar">
-      <div class="van-notice-bar__wrap">
+    <div role="alert" class="van-notice-bar">
+      <div role="marquee" class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">建议在手机模式下浏览本示例</div>
       </div>
     </div>