blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +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
- Slider
- NoticeBar
##### ImagePreview

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

@ -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={[

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

@ -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>

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

@ -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>

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

@ -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>