[improvement] DropdownMenu: improve accessibility

docs/markdown/changelog.zh-CN.md

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

packages/action-sheet/demo/index.vue

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

packages/dropdown-menu/index.js

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

packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap

@@ -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 role="button" tabindex="0" 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 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 role="button" tabindex="0" 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 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 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-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>

packages/dropdown-menu/test/__snapshots__/index.spec.js.snap

@@ -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 role="button" tabindex="0" 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 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 role="button" tabindex="0" 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 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 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-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;">
     <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 role="button" tabindex="0" 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">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 role="button" tabindex="0" 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="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 role="button" tabindex="0" 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 class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;">
     <!---->
   </div>

packages/number-keyboard/demo/index.vue

@@ -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'));
     }
   }
 };

packages/number-keyboard/zh-CN.md

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