alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(Picker): improve accessibility (#4521)

Browse Source
This commit is contained in:
neverland
2019-09-21 07:26:58 +08:00
committed by GitHub
parent 3c210f8252
commit a1ac34bead
11 changed files with 690 additions and 760 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/picker/test/__snapshots__/demo.spec.js.snap
+34 -36
View File
@@ -8,11 +8,11 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -27,11 +27,11 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -42,20 +42,18 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div class="van-ellipsis van-picker__title">标题</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>
<div class="van-ellipsis van-picker__title">标题</div><button class="van-picker__confirm">确认</button>
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -79,9 +77,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li role="button" tabindex="-1" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">杭州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">宁波</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -96,17 +94,17 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column column1">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
</ul>
</div>
<div class="van-picker-column column2">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -121,17 +119,17 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column column1">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
</ul>
</div>
<div class="van-picker-column column2">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
src/picker/test/__snapshots__/index.spec.js.snap
+17 -22
View File
@@ -3,13 +3,13 @@
exports[`column watch default index 1`] = `
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 100px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected" style="height: 50px;">1</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
<li role="button" tabindex="-1" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected" style="height: 50px;">1</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
</ul>
</div>
`;
@@ -17,13 +17,13 @@ exports[`column watch default index 1`] = `
exports[`column watch default index 2`] = `
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1991</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
<li role="button" tabindex="-1" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1991</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
</ul>
</div>
`;
@@ -34,7 +34,7 @@ exports[`not allow html 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">&lt;div&gt;option&lt;/div&gt;</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">&lt;div&gt;option&lt;/div&gt;</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -46,9 +46,7 @@ exports[`not allow html 1`] = `
exports[`render title slot 1`] = `
<div class="van-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>Custom title<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>Custom title<button class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -66,9 +64,6 @@ exports[`toolbar-position prop 1`] = `
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
</div>
`;