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] DropdownMenu: improve accessibility

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,7 @@
- Switch
- NoticeBar
- GoodsAction
- DropdownMenu
- NumberKeyboard
##### ImagePreview

4
packages/action-sheet/demo/index.vue
View File

@ -10,6 +10,7 @@
<van-action-sheet
v-model="show1"
:actions="simpleActions"
safe-area-inset-bottom
@select="onSelect"
/>
</demo-block>
@ -24,6 +25,7 @@
<van-action-sheet
v-model="show2"
:actions="statusActions"
safe-area-inset-bottom
@select="onSelect"
/>
</demo-block>
@ -39,6 +41,7 @@
v-model="show3"
:actions="simpleActions"
:cancel-text="$t('cancel')"
safe-area-inset-bottom
@cancel="onCancel"
@select="onSelect"
/>
@ -54,6 +57,7 @@
<van-action-sheet
v-model="show4"
:title="$t('title')"
safe-area-inset-bottom
>
<p>{{ $t('content') }}</p>
</van-action-sheet>

2
packages/dropdown-menu/index.js
View File

@ -65,6 +65,8 @@ export default sfc({
render(h) {
const Titles = this.children.map((item, index) => (
<div
role="button"
tabindex={item.disabled ? -1 : 0}
class={bem('item', { disabled: item.disabled })}
onClick={() => {
if (!item.disabled) {

12
packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap
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>

28
packages/dropdown-menu/test/__snapshots__/index.spec.js.snap
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>

11
packages/number-keyboard/demo/index.vue
View File

@ -49,14 +49,16 @@ export default {
custom: '自定义样式',
button1: '弹出默认键盘',
button2: '弹出自定义键盘',
close: '完成'
close: '完成',
input: '输入'
},
'en-US': {
default: 'Default style',
custom: 'Custom style',
button1: 'Show Default Keyboard',
button2: 'Show Custom Keyboard',
close: 'Close'
close: 'Close',
input: 'Input'
}
},
@ -68,10 +70,11 @@ export default {
methods: {
onInput(value) {
this.$toast('Input: ' + value);
this.$toast(`${this.$t('input')}: ${value}`);
},
onDelete() {
this.$toast('Delete');
this.$toast(this.$t('delete'));
}
}
};

2
packages/number-keyboard/zh-CN.md
View File

@ -40,7 +40,7 @@ export default {
Toast(value);
},
onDelete() {
Toast('delete');
Toast('删除');
}
}
}