From 68537de73f75db5766f7596cb260d1caaa55c40b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Sat, 25 May 2019 17:01:35 +0800
Subject: [PATCH] [improvement] DropdownMenu: improve accessibility

---
 docs/markdown/changelog.zh-CN.md              |  1 +
 packages/action-sheet/demo/index.vue          |  4 +++
 packages/dropdown-menu/index.js               |  2 ++
 .../test/__snapshots__/demo.spec.js.snap      | 12 ++++----
 .../test/__snapshots__/index.spec.js.snap     | 28 +++++++++----------
 packages/number-keyboard/demo/index.vue       | 11 +++++---
 packages/number-keyboard/zh-CN.md             |  2 +-
 7 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md
index 785897870..20c287d6b 100644
--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@@ -13,6 +13,7 @@
 - Switch
 - NoticeBar
 - GoodsAction
+- DropdownMenu
 - NumberKeyboard
 
 ##### ImagePreview
diff --git a/packages/action-sheet/demo/index.vue b/packages/action-sheet/demo/index.vue
index 65ab418f7..ab2cbd7d7 100644
--- a/packages/action-sheet/demo/index.vue
+++ b/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>
diff --git a/packages/dropdown-menu/index.js b/packages/dropdown-menu/index.js
index 1a067efa6..d57b1108b 100644
--- a/packages/dropdown-menu/index.js
+++ b/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) {
diff --git a/packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap b/packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap
index 7b39d2649..b1c503b91 100644
--- a/packages/dropdown-menu/test/__snapshots__/demo.spec.js.snap
+++ b/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 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>
diff --git a/packages/dropdown-menu/test/__snapshots__/index.spec.js.snap b/packages/dropdown-menu/test/__snapshots__/index.spec.js.snap
index 9ba623533..e0c6ebdc1 100644
--- a/packages/dropdown-menu/test/__snapshots__/index.spec.js.snap
+++ b/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 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>
diff --git a/packages/number-keyboard/demo/index.vue b/packages/number-keyboard/demo/index.vue
index 4823995eb..f28109346 100644
--- a/packages/number-keyboard/demo/index.vue
+++ b/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'));
     }
   }
 };
diff --git a/packages/number-keyboard/zh-CN.md b/packages/number-keyboard/zh-CN.md
index ade1e77f7..0ebebcdfb 100644
--- a/packages/number-keyboard/zh-CN.md
+++ b/packages/number-keyboard/zh-CN.md
@@ -40,7 +40,7 @@ export default {
       Toast(value);
     },
     onDelete() {
-      Toast('delete');
+      Toast('删除');
     }
   }
 }