blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-10-08 18:00:00 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] NoticeBar: improve accessibility

Browse Source
This commit is contained in:
陈嘉涵 2019-05-25 12:02:33 +08:00
parent ae0aaab3ba
commit cea1632927
5 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/markdown/changelog.zh-CN.md
View File

@ -8,6 +8,7 @@
- Dialog - Dialog
- Slider - Slider
- NoticeBar
##### ImagePreview ##### ImagePreview

3
packages/notice-bar/index.js
View File

@ -117,6 +117,7 @@ export default sfc({
return ( return (
<div <div
role="alert"
vShow={this.showNoticeBar} vShow={this.showNoticeBar}
class={bem({ wrapable: this.wrapable })} class={bem({ wrapable: this.wrapable })}
style={barStyle} style={barStyle}
@ -125,7 +126,7 @@ export default sfc({
}} }}
> >
{LeftIcon()} {LeftIcon()}
<div ref="wrap" class={bem('wrap')}> <div ref="wrap" class={bem('wrap')} role="marquee">
<div <div
ref="content" ref="content"
class={[ class={[

24
packages/notice-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -3,45 +3,45 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<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> <!----></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 class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div class="van-notice-bar"> <div role="alert" class="van-notice-bar">
<div class="van-notice-bar__wrap"> <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 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> </div>
<div> <div>
<div class="van-notice-bar van-notice-bar--wrapable"> <div role="alert" class="van-notice-bar van-notice-bar--wrapable">
<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 class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<div class="van-notice-bar"> <div role="alert" class="van-notice-bar">
<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 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"> </div><i class="van-icon van-icon-cross van-notice-bar__right-icon">
<!----></i> <!----></i>
</div> </div>
<div class="van-notice-bar"> <div role="alert" class="van-notice-bar">
<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 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"> </div><i class="van-icon van-icon-arrow van-notice-bar__right-icon">
<!----></i> <!----></i>
</div> </div>
</div> </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> <!----></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 class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
</div> </div>
</div> </div>

2
packages/notice-bar/test/__snapshots__/index.spec.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`icon slot 1`] = ` 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;"> <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">
Content Content
</div> </div>

4
packages/swipe-cell/test/__snapshots__/demo.spec.js.snap
View File

@ -3,8 +3,8 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-notice-bar"> <div role="alert" class="van-notice-bar">
<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;">建议在手机模式下浏览本示例</div> <div class="van-notice-bar__content" style="padding-left: 0px; animation-delay: 1s; animation-duration: 0s;">建议在手机模式下浏览本示例</div>
</div> </div>
</div> </div>