[improvement] DropdownMenu: improve accessibility

This commit is contained in:
陈嘉涵
2019-05-25 17:01:35 +08:00
parent 1821889f01
commit 68537de73f
7 changed files with 35 additions and 25 deletions

View File

@@ -4,8 +4,8 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">默认排序</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">默认排序</span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
<!---->
</div>
@@ -16,8 +16,8 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">筛选</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">筛选</span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
<!---->
</div>
@@ -28,8 +28,8 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">全部商品</span></div>
<div class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">默认排序</span></div>
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">全部商品</span></div>
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">默认排序</span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
<!---->
</div>

View File

@@ -2,8 +2,8 @@
exports[`click option 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10;">
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2005;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable">
@@ -24,7 +24,7 @@ exports[`click option 1`] = `
exports[`destroy one item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<!---->
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
<!---->
@@ -34,8 +34,8 @@ exports[`destroy one item 1`] = `
exports[`didn\`t find matched option 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
<!---->
</div>
@@ -47,7 +47,7 @@ exports[`didn\`t find matched option 1`] = `
exports[`disable dropdown item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">A</span></div>
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">A</span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
<!---->
</div>
@@ -56,8 +56,8 @@ exports[`disable dropdown item 1`] = `
exports[`show dropdown item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="color: rgb(25, 137, 250);">A</span></div>
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="color: rgb(25, 137, 250);">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10;">
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable">
@@ -79,8 +79,8 @@ exports[`show dropdown item 1`] = `
exports[`show dropdown item 2`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10;">
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable">
@@ -102,8 +102,8 @@ exports[`show dropdown item 2`] = `
exports[`show dropdown item 3`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="color: rgb(25, 137, 250);">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="color: rgb(25, 137, 250);">A</span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10;">
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable">
@@ -134,8 +134,8 @@ exports[`show dropdown item 3`] = `
exports[`title prop 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
<!---->
</div>