From 311f11f241403f2d068b7f5232480f729b7e7d24 Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Thu, 5 Sep 2019 23:04:53 +0300
Subject: [PATCH 01/17] #1818 | Make Accessibility Elements in navbar

---
 .../theme-default/components/DropdownLink.vue        |  6 ++++++
 .../@vuepress/theme-default/components/NavLinks.vue  | 12 +++++++++++-
 .../@vuepress/theme-default/components/Navbar.vue    |  4 +++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index 0d360830ee..f84b6d38d9 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -4,7 +4,9 @@
     :class="{ open }"
   >
     <a
+      href="void:javascript"
       class="dropdown-title"
+      :aria-label="dropdownName"
       @click="toggle"
     >
       <span class="title">{{ item.text }}</span>
@@ -65,6 +67,10 @@ export default {
   props: {
     item: {
       required: true
+    },
+    dropdownName: {
+      default: '',
+      type: String
     }
   },
 
diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue
index 3174b82c1c..cf9641a686 100644
--- a/packages/@vuepress/theme-default/components/NavLinks.vue
+++ b/packages/@vuepress/theme-default/components/NavLinks.vue
@@ -6,12 +6,14 @@
     <!-- user links -->
     <div
       class="nav-item"
-      v-for="item in userLinks"
+      v-for="(item, index) in userLinks"
+      :tabindex="tabIndexStart + index"
       :key="item.link"
     >
       <DropdownLink
         v-if="item.type === 'links'"
         :item="item"
+        dropdownName="Select Dropdown"
       />
       <NavLink
         v-else
@@ -25,6 +27,7 @@
       :href="repoLink"
       class="repo-link"
       target="_blank"
+      :tabindex="tabIndexStart + userLinks.length"
       rel="noopener noreferrer"
     >
       {{ repoLabel }}
@@ -41,6 +44,13 @@ import NavLink from '@theme/components/NavLink.vue'
 export default {
   components: { NavLink, DropdownLink },
 
+  props: {
+    tabIndexStart: {
+      default: 3,
+      type: Number
+    }
+  },
+
   computed: {
     userNav () {
       return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
diff --git a/packages/@vuepress/theme-default/components/Navbar.vue b/packages/@vuepress/theme-default/components/Navbar.vue
index d4f562cf90..c86378f4dc 100644
--- a/packages/@vuepress/theme-default/components/Navbar.vue
+++ b/packages/@vuepress/theme-default/components/Navbar.vue
@@ -5,6 +5,7 @@
     <router-link
       :to="$localePath"
       class="home-link"
+      tabindex="1"
     >
       <img
         class="logo"
@@ -28,9 +29,10 @@
     >
       <AlgoliaSearchBox
         v-if="isAlgoliaSearch"
+        tabindex="2"
         :options="algolia"
       />
-      <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/>
+      <SearchBox tabindex="1" v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/>
       <NavLinks class="can-hide"/>
     </div>
   </header>

From 44462b621cd8d569679a4c5954476d2ab3c81012 Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Fri, 6 Sep 2019 00:03:23 +0300
Subject: [PATCH 02/17] fix: Change to dropdownlink test

---
 .../theme-default/__tests__/components/DropdownLink.spec.js    | 2 +-
 .../components/__snapshots__/DropdownLink.spec.js.snap         | 2 +-
 packages/@vuepress/theme-default/components/DropdownLink.vue   | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
index e955194fc5..da78e50603 100644
--- a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
+++ b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
@@ -22,7 +22,7 @@ describe('DropdownLink', () => {
       stubs: {
         'router-link': RouterLinkStub
       },
-      propsData: { item }
+      propsData: { item, dropdownName: 'Languages' }
     })
     expect(wrapper.html()).toMatchSnapshot()
   })
diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
index 0b060a942e..152a9eb855 100644
--- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
+++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownLink renders dropdown link. 1`] = `
-<div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a>
+<div class="dropdown-wrapper"><a aria-label="Languages" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a>
   <ul class="nav-dropdown" style="display: none;" name="dropdown">
     <li class="dropdown-item">
       <!----> <a class="nav-link">Guide</a></li>
diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index f84b6d38d9..1b0c641b24 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -4,7 +4,6 @@
     :class="{ open }"
   >
     <a
-      href="void:javascript"
       class="dropdown-title"
       :aria-label="dropdownName"
       @click="toggle"
@@ -69,7 +68,7 @@ export default {
       required: true
     },
     dropdownName: {
-      default: '',
+      default: 'Dropdown',
       type: String
     }
   },

From 3593b4b8497d9685744ec684740cc2f409b3e8a0 Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Fri, 6 Sep 2019 00:03:23 +0300
Subject: [PATCH 03/17]  fix: change to testing for dropdownlink component

---
 .../theme-default/__tests__/components/DropdownLink.spec.js    | 2 +-
 .../components/__snapshots__/DropdownLink.spec.js.snap         | 2 +-
 packages/@vuepress/theme-default/components/DropdownLink.vue   | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
index e955194fc5..da78e50603 100644
--- a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
+++ b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
@@ -22,7 +22,7 @@ describe('DropdownLink', () => {
       stubs: {
         'router-link': RouterLinkStub
       },
-      propsData: { item }
+      propsData: { item, dropdownName: 'Languages' }
     })
     expect(wrapper.html()).toMatchSnapshot()
   })
diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
index 0b060a942e..152a9eb855 100644
--- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
+++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownLink renders dropdown link. 1`] = `
-<div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a>
+<div class="dropdown-wrapper"><a aria-label="Languages" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a>
   <ul class="nav-dropdown" style="display: none;" name="dropdown">
     <li class="dropdown-item">
       <!----> <a class="nav-link">Guide</a></li>
diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index f84b6d38d9..1b0c641b24 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -4,7 +4,6 @@
     :class="{ open }"
   >
     <a
-      href="void:javascript"
       class="dropdown-title"
       :aria-label="dropdownName"
       @click="toggle"
@@ -69,7 +68,7 @@ export default {
       required: true
     },
     dropdownName: {
-      default: '',
+      default: 'Dropdown',
       type: String
     }
   },

From 510be5b3b4639fff93aceb06a7df8bf92a96305a Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Sat, 7 Sep 2019 21:26:59 +0300
Subject: [PATCH 04/17] feat: addauto opened & focus dropdown menu when
 keypress tab

---
 .../theme-default/components/DropdownLink.vue         | 11 +++++++++--
 .../@vuepress/theme-default/components/NavLinks.vue   |  3 ++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index 1b0c641b24..3401444eb2 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -7,6 +7,7 @@
       class="dropdown-title"
       :aria-label="dropdownName"
       @click="toggle"
+      :tabindex="tabIndex"
     >
       <span class="title">{{ item.text }}</span>
       <span
@@ -36,12 +37,13 @@
               :key="childSubItem.link"
               v-for="childSubItem in subItem.items"
             >
-              <NavLink :item="childSubItem"/>
+              <NavLink :tabindex="tabIndex" :item="childSubItem"/>
             </li>
           </ul>
 
           <NavLink
             v-else
+            :tabindex="tabIndex"
             :item="subItem"
           />
         </li>
@@ -70,6 +72,10 @@ export default {
     dropdownName: {
       default: 'Dropdown',
       type: String
+    },
+    tabIndex: {
+      default: 0,
+      type: Number
     }
   },
 
@@ -154,7 +160,8 @@ export default {
 @media (min-width: $MQMobile)
   .dropdown-wrapper
     height 1.8rem
-    &:hover .nav-dropdown
+    &:hover .nav-dropdown,
+    &:focus-within .nav-dropdown
       // override the inline style.
       display block !important
     .dropdown-title .arrow
diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue
index cf9641a686..0abd69b626 100644
--- a/packages/@vuepress/theme-default/components/NavLinks.vue
+++ b/packages/@vuepress/theme-default/components/NavLinks.vue
@@ -7,16 +7,17 @@
     <div
       class="nav-item"
       v-for="(item, index) in userLinks"
-      :tabindex="tabIndexStart + index"
       :key="item.link"
     >
       <DropdownLink
         v-if="item.type === 'links'"
         :item="item"
+        :tab-index="tabIndexStart + index"
         dropdownName="Select Dropdown"
       />
       <NavLink
         v-else
+        :tabindex="tabIndexStart + index"
         :item="item"
       />
     </div>

From 380911dd8da34ac76ed4bebab95a0da121f4f207 Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Sat, 7 Sep 2019 21:37:37 +0300
Subject: [PATCH 05/17] fix: update test for dropdownLink

---
 .../theme-default/__tests__/components/DropdownLink.spec.js | 2 +-
 .../components/__snapshots__/DropdownLink.spec.js.snap      | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
index da78e50603..c71cd0d802 100644
--- a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
+++ b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
@@ -22,7 +22,7 @@ describe('DropdownLink', () => {
       stubs: {
         'router-link': RouterLinkStub
       },
-      propsData: { item, dropdownName: 'Languages' }
+      propsData: { item, dropdownName: 'Languages', tabIndex: 8 }
     })
     expect(wrapper.html()).toMatchSnapshot()
   })
diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
index 152a9eb855..217950a687 100644
--- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
+++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownLink renders dropdown link. 1`] = `
-<div class="dropdown-wrapper"><a aria-label="Languages" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a>
+<div class="dropdown-wrapper"><a aria-label="Languages" tabindex="8" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a>
   <ul class="nav-dropdown" style="display: none;" name="dropdown">
     <li class="dropdown-item">
-      <!----> <a class="nav-link">Guide</a></li>
+      <!----> <a class="nav-link" tabindex="8">Guide</a></li>
     <li class="dropdown-item">
-      <!----> <a class="nav-link">Config Reference</a></li>
+      <!----> <a class="nav-link" tabindex="8">Config Reference</a></li>
   </ul>
 </div>
 `;

From fd30a601e53e9d531290588f872ef305e5f82fd4 Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Wed, 11 Sep 2019 01:17:01 +0300
Subject: [PATCH 06/17] edit tabindex to navlink & dropdownlink for not
 focusable

---
 .../theme-default/components/DropdownLink.vue  | 18 +++++++++---------
 .../theme-default/components/NavLink.vue       |  6 ++++++
 .../theme-default/components/NavLinks.vue      | 12 +-----------
 .../theme-default/components/Navbar.vue        |  4 +---
 4 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index 3401444eb2..c5696c1180 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -3,18 +3,18 @@
     class="dropdown-wrapper"
     :class="{ open }"
   >
-    <a
+    <button
       class="dropdown-title"
       :aria-label="dropdownName"
+      :tabindex="!!item.notFocusable ? -1  : ''"
       @click="toggle"
-      :tabindex="tabIndex"
     >
       <span class="title">{{ item.text }}</span>
       <span
         class="arrow"
         :class="open ? 'down' : 'right'"
       ></span>
-    </a>
+    </button>
 
     <DropdownTransition>
       <ul
@@ -37,13 +37,12 @@
               :key="childSubItem.link"
               v-for="childSubItem in subItem.items"
             >
-              <NavLink :tabindex="tabIndex" :item="childSubItem"/>
+              <NavLink :item="childSubItem"/>
             </li>
           </ul>
 
           <NavLink
             v-else
-            :tabindex="tabIndex"
             :item="subItem"
           />
         </li>
@@ -72,10 +71,6 @@ export default {
     dropdownName: {
       default: 'Dropdown',
       type: String
-    },
-    tabIndex: {
-      default: 0,
-      type: Number
     }
   },
 
@@ -92,6 +87,11 @@ export default {
   cursor pointer
   .dropdown-title
     display block
+    font-size 0.9rem
+    background transparent
+    border none
+    font-weight 500
+    color $textColor
     &:hover
       border-color transparent
     .arrow
diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue
index 452a1c6dc8..25e078ec7d 100644
--- a/packages/@vuepress/theme-default/components/NavLink.vue
+++ b/packages/@vuepress/theme-default/components/NavLink.vue
@@ -4,11 +4,13 @@
     :to="link"
     v-if="!isExternal(link)"
     :exact="exact"
+    :tabindex="isNotFocusableLink ? -1  : ''"
   >{{ item.text }}</router-link>
   <a
     v-else
     :href="link"
     class="nav-link external"
+    :tabindex="isNotFocusableLink ? -1  : ''"
     :target="isMailto(link) || isTel(link) ? null : '_blank'"
     :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
   >
@@ -32,6 +34,10 @@ export default {
       return ensureExt(this.item.link)
     },
 
+    isNotFocusableLink () {
+      return !!this.item.notFocusable
+    },
+
     exact () {
       if (this.$site.locales) {
         return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link)
diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue
index 0abd69b626..e7d0f0ed63 100644
--- a/packages/@vuepress/theme-default/components/NavLinks.vue
+++ b/packages/@vuepress/theme-default/components/NavLinks.vue
@@ -6,18 +6,16 @@
     <!-- user links -->
     <div
       class="nav-item"
-      v-for="(item, index) in userLinks"
+      v-for="item in userLinks"
       :key="item.link"
     >
       <DropdownLink
         v-if="item.type === 'links'"
         :item="item"
-        :tab-index="tabIndexStart + index"
         dropdownName="Select Dropdown"
       />
       <NavLink
         v-else
-        :tabindex="tabIndexStart + index"
         :item="item"
       />
     </div>
@@ -28,7 +26,6 @@
       :href="repoLink"
       class="repo-link"
       target="_blank"
-      :tabindex="tabIndexStart + userLinks.length"
       rel="noopener noreferrer"
     >
       {{ repoLabel }}
@@ -45,13 +42,6 @@ import NavLink from '@theme/components/NavLink.vue'
 export default {
   components: { NavLink, DropdownLink },
 
-  props: {
-    tabIndexStart: {
-      default: 3,
-      type: Number
-    }
-  },
-
   computed: {
     userNav () {
       return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
diff --git a/packages/@vuepress/theme-default/components/Navbar.vue b/packages/@vuepress/theme-default/components/Navbar.vue
index c86378f4dc..d4f562cf90 100644
--- a/packages/@vuepress/theme-default/components/Navbar.vue
+++ b/packages/@vuepress/theme-default/components/Navbar.vue
@@ -5,7 +5,6 @@
     <router-link
       :to="$localePath"
       class="home-link"
-      tabindex="1"
     >
       <img
         class="logo"
@@ -29,10 +28,9 @@
     >
       <AlgoliaSearchBox
         v-if="isAlgoliaSearch"
-        tabindex="2"
         :options="algolia"
       />
-      <SearchBox tabindex="1" v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/>
+      <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/>
       <NavLinks class="can-hide"/>
     </div>
   </header>

From 8bd733f426e68aa80c5e23549da12b96707f2bb3 Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Wed, 11 Sep 2019 01:29:04 +0300
Subject: [PATCH 07/17] Update docs for notFocusable props

---
 packages/docs/docs/theme/default-theme-config.md    | 3 ++-
 packages/docs/docs/zh/theme/default-theme-config.md | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md
index 7da053b361..dfed680e1a 100644
--- a/packages/docs/docs/theme/default-theme-config.md
+++ b/packages/docs/docs/theme/default-theme-config.md
@@ -48,7 +48,8 @@ module.exports = {
     nav: [
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide/' },
-      { text: 'External', link: 'https://google.com' },
+      { text: 'Theme', link: '/theme/', notFocusable: true },  // for remove focus a link
+      { text: 'External', link: 'https://google.com' }
     ]
   }
 }
diff --git a/packages/docs/docs/zh/theme/default-theme-config.md b/packages/docs/docs/zh/theme/default-theme-config.md
index 843079e01d..5e8d797419 100644
--- a/packages/docs/docs/zh/theme/default-theme-config.md
+++ b/packages/docs/docs/zh/theme/default-theme-config.md
@@ -44,6 +44,7 @@ module.exports = {
     nav: [
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide/' },
+      { text: 'Theme', link: '/theme/', notFocusable: true },
       { text: 'External', link: 'https://google.com' },
     ]
   }

From 1b38f36dc6613bd7fe5e1eac7d628ffd99754002 Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Wed, 11 Sep 2019 01:45:18 +0300
Subject: [PATCH 08/17] Update dropdownlink test

---
 .../theme-default/__tests__/components/DropdownLink.spec.js | 5 +++--
 .../components/__snapshots__/DropdownLink.spec.js.snap      | 6 +++---
 .../@vuepress/theme-default/components/DropdownLink.vue     | 3 ++-
 packages/@vuepress/theme-default/components/NavLink.vue     | 4 ++--
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
index c71cd0d802..0095f282e0 100644
--- a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
+++ b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
@@ -13,7 +13,8 @@ describe('DropdownLink', () => {
         },
         {
           text: 'Config Reference',
-          link: '/config/'
+          link: '/config/',
+          notFocusable: true
         }
       ]
     }
@@ -22,7 +23,7 @@ describe('DropdownLink', () => {
       stubs: {
         'router-link': RouterLinkStub
       },
-      propsData: { item, dropdownName: 'Languages', tabIndex: 8 }
+      propsData: { item, dropdownName: 'Languages' }
     })
     expect(wrapper.html()).toMatchSnapshot()
   })
diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
index 217950a687..0effb1c4f2 100644
--- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
+++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownLink renders dropdown link. 1`] = `
-<div class="dropdown-wrapper"><a aria-label="Languages" tabindex="8" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a>
+<div class="dropdown-wrapper"><button type="button" aria-label="Languages" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></button>
   <ul class="nav-dropdown" style="display: none;" name="dropdown">
     <li class="dropdown-item">
-      <!----> <a class="nav-link" tabindex="8">Guide</a></li>
+      <!----> <a class="nav-link">Guide</a></li>
     <li class="dropdown-item">
-      <!----> <a class="nav-link" tabindex="8">Config Reference</a></li>
+      <!----> <a tabindex="-1" class="nav-link">Config Reference</a></li>
   </ul>
 </div>
 `;
diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index c5696c1180..10da807fb5 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -5,8 +5,9 @@
   >
     <button
       class="dropdown-title"
+      type="button"
       :aria-label="dropdownName"
-      :tabindex="!!item.notFocusable ? -1  : ''"
+      :tabindex="!!item.notFocusable ? -1  : null"
       @click="toggle"
     >
       <span class="title">{{ item.text }}</span>
diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue
index 25e078ec7d..804905fd0b 100644
--- a/packages/@vuepress/theme-default/components/NavLink.vue
+++ b/packages/@vuepress/theme-default/components/NavLink.vue
@@ -4,13 +4,13 @@
     :to="link"
     v-if="!isExternal(link)"
     :exact="exact"
-    :tabindex="isNotFocusableLink ? -1  : ''"
+    :tabindex="isNotFocusableLink ? -1  : null"
   >{{ item.text }}</router-link>
   <a
     v-else
     :href="link"
     class="nav-link external"
-    :tabindex="isNotFocusableLink ? -1  : ''"
+    :tabindex="isNotFocusableLink ? -1  : null"
     :target="isMailto(link) || isTel(link) ? null : '_blank'"
     :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
   >

From a5a66f1fb9a0f3f09b4940cc2a44fc42b876b52c Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Thu, 12 Sep 2019 18:29:16 +0300
Subject: [PATCH 09/17] Add keypress method in navlink and remove tabindex

---
 .../__tests__/components/DropdownLink.spec.js |  3 +-
 .../__snapshots__/DropdownLink.spec.js.snap   |  2 +-
 .../theme-default/components/DropdownLink.vue | 30 ++++++++++++++++---
 .../theme-default/components/NavLink.vue      | 13 ++++----
 .../docs/docs/theme/default-theme-config.md   |  1 -
 .../docs/zh/theme/default-theme-config.md     |  1 -
 6 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
index 0095f282e0..da78e50603 100644
--- a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
+++ b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
@@ -13,8 +13,7 @@ describe('DropdownLink', () => {
         },
         {
           text: 'Config Reference',
-          link: '/config/',
-          notFocusable: true
+          link: '/config/'
         }
       ]
     }
diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
index 0effb1c4f2..a4c678776f 100644
--- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
+++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
@@ -6,7 +6,7 @@ exports[`DropdownLink renders dropdown link. 1`] = `
     <li class="dropdown-item">
       <!----> <a class="nav-link">Guide</a></li>
     <li class="dropdown-item">
-      <!----> <a tabindex="-1" class="nav-link">Config Reference</a></li>
+      <!----> <a class="nav-link">Config Reference</a></li>
   </ul>
 </div>
 `;
diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index 10da807fb5..53dc6e03c1 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -7,7 +7,6 @@
       class="dropdown-title"
       type="button"
       :aria-label="dropdownName"
-      :tabindex="!!item.notFocusable ? -1  : null"
       @click="toggle"
     >
       <span class="title">{{ item.text }}</span>
@@ -36,14 +35,17 @@
             <li
               class="dropdown-subitem"
               :key="childSubItem.link"
-              v-for="childSubItem in subItem.items"
+              v-for="(childSubItem, subIndex) in subItem.items"
             >
-              <NavLink :item="childSubItem"/>
+              <NavLink
+                @keypressTab="focusoutDropdown((index + 2) * (subIndex + 1))"
+                :item="childSubItem"/>
             </li>
           </ul>
 
           <NavLink
             v-else
+            @keypressTab="focusoutDropdown(index + 1)"
             :item="subItem"
           />
         </li>
@@ -75,9 +77,27 @@ export default {
     }
   },
 
+  computed: {
+    AllItemsCount () {
+      return this.item.items.reduce((totalCount, item) => {
+        return item.items ? totalCount + item.items.length : totalCount + 1
+      }, 0)
+    }
+  },
+
   methods: {
     toggle () {
       this.open = !this.open
+    },
+
+    focusoutDropdown (index) {
+      if (this.AllItemsCount === index) this.open = false
+    }
+  },
+
+  watch: {
+    $route () {
+      this.open = false
     }
   }
 }
@@ -162,9 +182,11 @@ export default {
   .dropdown-wrapper
     height 1.8rem
     &:hover .nav-dropdown,
-    &:focus-within .nav-dropdown
+    &.open .nav-dropdown
       // override the inline style.
       display block !important
+    &.open:blur
+      display none
     .dropdown-title .arrow
       // make the arrow always down at desktop
       border-left 4px solid transparent
diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue
index 804905fd0b..29879ca655 100644
--- a/packages/@vuepress/theme-default/components/NavLink.vue
+++ b/packages/@vuepress/theme-default/components/NavLink.vue
@@ -2,15 +2,15 @@
   <router-link
     class="nav-link"
     :to="link"
+    @keyup.tab.native="keypressTab"
     v-if="!isExternal(link)"
     :exact="exact"
-    :tabindex="isNotFocusableLink ? -1  : null"
   >{{ item.text }}</router-link>
   <a
     v-else
     :href="link"
+    @keyup.tab.prevent="keypressTab"
     class="nav-link external"
-    :tabindex="isNotFocusableLink ? -1  : null"
     :target="isMailto(link) || isTel(link) ? null : '_blank'"
     :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
   >
@@ -34,10 +34,6 @@ export default {
       return ensureExt(this.item.link)
     },
 
-    isNotFocusableLink () {
-      return !!this.item.notFocusable
-    },
-
     exact () {
       if (this.$site.locales) {
         return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link)
@@ -49,7 +45,10 @@ export default {
   methods: {
     isExternal,
     isMailto,
-    isTel
+    isTel,
+    keypressTab () {
+      this.$emit('keypressTab')
+    }
   }
 }
 </script>
diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md
index dfed680e1a..0d912c15b8 100644
--- a/packages/docs/docs/theme/default-theme-config.md
+++ b/packages/docs/docs/theme/default-theme-config.md
@@ -48,7 +48,6 @@ module.exports = {
     nav: [
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide/' },
-      { text: 'Theme', link: '/theme/', notFocusable: true },  // for remove focus a link
       { text: 'External', link: 'https://google.com' }
     ]
   }
diff --git a/packages/docs/docs/zh/theme/default-theme-config.md b/packages/docs/docs/zh/theme/default-theme-config.md
index 5e8d797419..843079e01d 100644
--- a/packages/docs/docs/zh/theme/default-theme-config.md
+++ b/packages/docs/docs/zh/theme/default-theme-config.md
@@ -44,7 +44,6 @@ module.exports = {
     nav: [
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide/' },
-      { text: 'Theme', link: '/theme/', notFocusable: true },
       { text: 'External', link: 'https://google.com' },
     ]
   }

From 0a2778910a5c6897f16ad9d3909885ab38fa223b Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Sun, 15 Sep 2019 10:48:35 +0300
Subject: [PATCH 10/17] Rename navlink & dropdown action / computed and bugfix
 for find last item index

---
 .../theme-default/components/DropdownLink.vue   | 17 ++++++++++++-----
 .../theme-default/components/NavLink.vue        |  8 ++++----
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index 53dc6e03c1..4dd3e9dbb6 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -38,14 +38,14 @@
               v-for="(childSubItem, subIndex) in subItem.items"
             >
               <NavLink
-                @keypressTab="focusoutDropdown((index + 2) * (subIndex + 1))"
+                @focusout-navlink="focusoutNavLink(getSubItemIndex(index, subIndex))"
                 :item="childSubItem"/>
             </li>
           </ul>
 
           <NavLink
             v-else
-            @keypressTab="focusoutDropdown(index + 1)"
+            @focusout-navlink="focusoutNavLink(index + 1)"
             :item="subItem"
           />
         </li>
@@ -78,7 +78,7 @@ export default {
   },
 
   computed: {
-    AllItemsCount () {
+    allItemsCount () {
       return this.item.items.reduce((totalCount, item) => {
         return item.items ? totalCount + item.items.length : totalCount + 1
       }, 0)
@@ -90,8 +90,15 @@ export default {
       this.open = !this.open
     },
 
-    focusoutDropdown (index) {
-      if (this.AllItemsCount === index) this.open = false
+    getSubItemIndex (index, subIndex) {
+      const items = [...this.item.items].splice(0, index) // find up to selected item
+      return items.reduce((totalCount, item) => {
+        return item.items ? totalCount + item.items.length : totalCount
+      }, 0) + subIndex + 1
+    },
+
+    focusoutNavLink (index) {
+      if (this.allItemsCount === index) this.open = false
     }
   },
 
diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue
index 29879ca655..2ac6ccc591 100644
--- a/packages/@vuepress/theme-default/components/NavLink.vue
+++ b/packages/@vuepress/theme-default/components/NavLink.vue
@@ -2,14 +2,14 @@
   <router-link
     class="nav-link"
     :to="link"
-    @keyup.tab.native="keypressTab"
+    @focusout.native="focusoutAction"
     v-if="!isExternal(link)"
     :exact="exact"
   >{{ item.text }}</router-link>
   <a
     v-else
     :href="link"
-    @keyup.tab.prevent="keypressTab"
+    @focusout="focusoutAction"
     class="nav-link external"
     :target="isMailto(link) || isTel(link) ? null : '_blank'"
     :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
@@ -46,8 +46,8 @@ export default {
     isExternal,
     isMailto,
     isTel,
-    keypressTab () {
-      this.$emit('keypressTab')
+    focusoutAction () {
+      this.$emit('focusout-navlink')
     }
   }
 }

From 96b1287ca0dc6d0fec3b1a4cb9a54de381e24fd0 Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Sun, 15 Sep 2019 11:39:03 +0300
Subject: [PATCH 11/17] Make ariaLabel config for dropdown

---
 .../__tests__/components/DropdownLink.spec.js          |  5 +++--
 .../components/__snapshots__/DropdownLink.spec.js.snap |  2 +-
 .../theme-default/components/DropdownLink.vue          | 10 +++++-----
 .../@vuepress/theme-default/components/NavLinks.vue    |  2 +-
 packages/docs/docs/.vuepress/config.js                 |  2 ++
 packages/docs/docs/.vuepress/nav/en.js                 |  1 +
 packages/docs/docs/.vuepress/nav/zh.js                 |  1 +
 packages/docs/docs/guide/i18n.md                       |  4 +++-
 8 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
index da78e50603..0fe661b830 100644
--- a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
+++ b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js
@@ -5,7 +5,8 @@ import { createLocalVue } from '@vuepress/test-utils/client'
 describe('DropdownLink', () => {
   test('renders dropdown link.', () => {
     const item = {
-      text: 'VuePress',
+      text: 'Learn More',
+      ariaLabel: 'Learn More Select',
       items: [
         {
           text: 'Guide',
@@ -22,7 +23,7 @@ describe('DropdownLink', () => {
       stubs: {
         'router-link': RouterLinkStub
       },
-      propsData: { item, dropdownName: 'Languages' }
+      propsData: { item }
     })
     expect(wrapper.html()).toMatchSnapshot()
   })
diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
index a4c678776f..967442ec11 100644
--- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
+++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownLink renders dropdown link. 1`] = `
-<div class="dropdown-wrapper"><button type="button" aria-label="Languages" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></button>
+<div class="dropdown-wrapper"><button type="button" aria-label="Learn More Select" class="dropdown-title"><span class="title">Learn More</span> <span class="arrow right"></span></button>
   <ul class="nav-dropdown" style="display: none;" name="dropdown">
     <li class="dropdown-item">
       <!----> <a class="nav-link">Guide</a></li>
diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index 4dd3e9dbb6..c4bf38c4ea 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -6,7 +6,7 @@
     <button
       class="dropdown-title"
       type="button"
-      :aria-label="dropdownName"
+      :aria-label="dropdownArialLabel"
       @click="toggle"
     >
       <span class="title">{{ item.text }}</span>
@@ -70,10 +70,6 @@ export default {
   props: {
     item: {
       required: true
-    },
-    dropdownName: {
-      default: 'Dropdown',
-      type: String
     }
   },
 
@@ -82,6 +78,10 @@ export default {
       return this.item.items.reduce((totalCount, item) => {
         return item.items ? totalCount + item.items.length : totalCount + 1
       }, 0)
+    },
+
+    dropdownArialLabel () {
+      return this.item.ariaLabel || this.item.text
     }
   },
 
diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue
index e7d0f0ed63..5f63ed8b3f 100644
--- a/packages/@vuepress/theme-default/components/NavLinks.vue
+++ b/packages/@vuepress/theme-default/components/NavLinks.vue
@@ -12,7 +12,6 @@
       <DropdownLink
         v-if="item.type === 'links'"
         :item="item"
-        dropdownName="Select Dropdown"
       />
       <NavLink
         v-else
@@ -55,6 +54,7 @@ export default {
         const themeLocales = this.$site.themeConfig.locales || {}
         const languageDropdown = {
           text: this.$themeLocaleConfig.selectText || 'Languages',
+          arialLabel: this.$themeLocaleConfig.selectText || 'Languages',
           items: Object.keys(locales).map(path => {
             const locale = locales[path]
             const text = themeLocales[path] && themeLocales[path].label || locale.lang
diff --git a/packages/docs/docs/.vuepress/config.js b/packages/docs/docs/.vuepress/config.js
index 63158b8e30..6b9cdf0c71 100755
--- a/packages/docs/docs/.vuepress/config.js
+++ b/packages/docs/docs/.vuepress/config.js
@@ -39,6 +39,7 @@ module.exports = ctx => ({
       '/': {
         label: 'English',
         selectText: 'Languages',
+        ariaLabel: "Languages",
         editLinkText: 'Edit this page on GitHub',
         lastUpdated: 'Last Updated',
         nav: require('./nav/en'),
@@ -52,6 +53,7 @@ module.exports = ctx => ({
       '/zh/': {
         label: '简体中文',
         selectText: '选择语言',
+        ariaLabel: "选择语言",
         editLinkText: '在 GitHub 上编辑此页',
         lastUpdated: '上次更新',
         nav: require('./nav/zh'),
diff --git a/packages/docs/docs/.vuepress/nav/en.js b/packages/docs/docs/.vuepress/nav/en.js
index 9952fb4cd7..0564ff9db0 100644
--- a/packages/docs/docs/.vuepress/nav/en.js
+++ b/packages/docs/docs/.vuepress/nav/en.js
@@ -17,6 +17,7 @@ module.exports = [
   },
   {
     text: "Learn More",
+    ariaLabel: "Learn More",
     items: [
       {
         text: "API",
diff --git a/packages/docs/docs/.vuepress/nav/zh.js b/packages/docs/docs/.vuepress/nav/zh.js
index 6ec03ad7c6..1dbf9f0587 100644
--- a/packages/docs/docs/.vuepress/nav/zh.js
+++ b/packages/docs/docs/.vuepress/nav/zh.js
@@ -17,6 +17,7 @@ module.exports = [
   },
   {
     text: "了解更多",
+    ariaLabel: "了解更多",
     items: [
       {
         text: "API",
diff --git a/packages/docs/docs/guide/i18n.md b/packages/docs/docs/guide/i18n.md
index 12dc65465b..674c8e4a14 100644
--- a/packages/docs/docs/guide/i18n.md
+++ b/packages/docs/docs/guide/i18n.md
@@ -54,6 +54,8 @@ module.exports = {
         selectText: 'Languages',
         // label for this locale in the language dropdown
         label: 'English',
+        // Arial Label for locale in the dropdown
+        arialLabel: 'Languages'
         // text for the edit-on-github link
         editLinkText: 'Edit this page on GitHub',
         // config for Service Worker
@@ -66,7 +68,7 @@ module.exports = {
         // algolia docsearch options for current locale
         algolia: {},
         nav: [
-          { text: 'Nested', link: '/nested/' }
+          { text: 'Nested', link: '/nested/' , arialLabel: 'Nested' }
         ],
         sidebar: {
           '/': [/* ... */],

From c67010e5fa030e486a25d7d427cd08a62cd9bb93 Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Sun, 15 Sep 2019 12:02:06 +0300
Subject: [PATCH 12/17] fix typo

---
 .../@vuepress/theme-default/components/DropdownLink.vue     | 4 ++--
 packages/@vuepress/theme-default/components/NavLinks.vue    | 2 +-
 packages/docs/docs/guide/i18n.md                            | 6 +++---
 packages/docs/docs/zh/guide/i18n.md                         | 3 ++-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index c4bf38c4ea..e6f4a288ae 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -6,7 +6,7 @@
     <button
       class="dropdown-title"
       type="button"
-      :aria-label="dropdownArialLabel"
+      :aria-label="dropdownariaLabel"
       @click="toggle"
     >
       <span class="title">{{ item.text }}</span>
@@ -80,7 +80,7 @@ export default {
       }, 0)
     },
 
-    dropdownArialLabel () {
+    dropdownariaLabel () {
       return this.item.ariaLabel || this.item.text
     }
   },
diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue
index 5f63ed8b3f..c96eb71b6a 100644
--- a/packages/@vuepress/theme-default/components/NavLinks.vue
+++ b/packages/@vuepress/theme-default/components/NavLinks.vue
@@ -54,7 +54,7 @@ export default {
         const themeLocales = this.$site.themeConfig.locales || {}
         const languageDropdown = {
           text: this.$themeLocaleConfig.selectText || 'Languages',
-          arialLabel: this.$themeLocaleConfig.selectText || 'Languages',
+          ariaLabel: this.$themeLocaleConfig.ariaLabel || 'Languages',
           items: Object.keys(locales).map(path => {
             const locale = locales[path]
             const text = themeLocales[path] && themeLocales[path].label || locale.lang
diff --git a/packages/docs/docs/guide/i18n.md b/packages/docs/docs/guide/i18n.md
index 674c8e4a14..b3eccb7774 100644
--- a/packages/docs/docs/guide/i18n.md
+++ b/packages/docs/docs/guide/i18n.md
@@ -54,8 +54,8 @@ module.exports = {
         selectText: 'Languages',
         // label for this locale in the language dropdown
         label: 'English',
-        // Arial Label for locale in the dropdown
-        arialLabel: 'Languages'
+        // Aria Label for locale in the dropdown
+        ariaLabel: 'Languages'
         // text for the edit-on-github link
         editLinkText: 'Edit this page on GitHub',
         // config for Service Worker
@@ -68,7 +68,7 @@ module.exports = {
         // algolia docsearch options for current locale
         algolia: {},
         nav: [
-          { text: 'Nested', link: '/nested/' , arialLabel: 'Nested' }
+          { text: 'Nested', link: '/nested/' , ariaLabel: 'Nested' }
         ],
         sidebar: {
           '/': [/* ... */],
diff --git a/packages/docs/docs/zh/guide/i18n.md b/packages/docs/docs/zh/guide/i18n.md
index 9c1e44407d..5be0f9817d 100644
--- a/packages/docs/docs/zh/guide/i18n.md
+++ b/packages/docs/docs/zh/guide/i18n.md
@@ -52,6 +52,7 @@ module.exports = {
       '/': {
         selectText: 'Languages',
         label: 'English',
+        ariaLabel: 'Languages'
         editLinkText: 'Edit this page on GitHub',
         serviceWorker: {
           updatePopup: {
@@ -61,7 +62,7 @@ module.exports = {
         },
         algolia: {},
         nav: [
-          { text: 'Nested', link: '/nested/' }
+          { text: 'Nested', link: '/nested/', ariaLabel: 'Nested' }
         ],
         sidebar: {
           '/': [/* ... */],

From e84b6c6cbe7e3cd55e7192954a5b3c3279e1b783 Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Sun, 15 Sep 2019 12:04:43 +0300
Subject: [PATCH 13/17] fix typo dropdown computed

---
 packages/@vuepress/theme-default/components/DropdownLink.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index e6f4a288ae..dffd817fe7 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -6,7 +6,7 @@
     <button
       class="dropdown-title"
       type="button"
-      :aria-label="dropdownariaLabel"
+      :aria-label="dropdownAriaLabel"
       @click="toggle"
     >
       <span class="title">{{ item.text }}</span>
@@ -80,7 +80,7 @@ export default {
       }, 0)
     },
 
-    dropdownariaLabel () {
+    dropdownAriaLabel () {
       return this.item.ariaLabel || this.item.text
     }
   },

From 6da2e5f1fdbdfebcd28902f321fd1b2cf1194c27 Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Sun, 15 Sep 2019 16:20:25 +0300
Subject: [PATCH 14/17]  edit language dropdown aria-label default value

---
 packages/@vuepress/theme-default/components/NavLinks.vue | 2 +-
 packages/docs/docs/.vuepress/config.js                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue
index c96eb71b6a..9c2ef18902 100644
--- a/packages/@vuepress/theme-default/components/NavLinks.vue
+++ b/packages/@vuepress/theme-default/components/NavLinks.vue
@@ -54,7 +54,7 @@ export default {
         const themeLocales = this.$site.themeConfig.locales || {}
         const languageDropdown = {
           text: this.$themeLocaleConfig.selectText || 'Languages',
-          ariaLabel: this.$themeLocaleConfig.ariaLabel || 'Languages',
+          ariaLabel: this.$themeLocaleConfig.ariaLabel || 'Select language',
           items: Object.keys(locales).map(path => {
             const locale = locales[path]
             const text = themeLocales[path] && themeLocales[path].label || locale.lang
diff --git a/packages/docs/docs/.vuepress/config.js b/packages/docs/docs/.vuepress/config.js
index 6b9cdf0c71..e908fb17da 100755
--- a/packages/docs/docs/.vuepress/config.js
+++ b/packages/docs/docs/.vuepress/config.js
@@ -39,7 +39,7 @@ module.exports = ctx => ({
       '/': {
         label: 'English',
         selectText: 'Languages',
-        ariaLabel: "Languages",
+        ariaLabel: 'Select language',
         editLinkText: 'Edit this page on GitHub',
         lastUpdated: 'Last Updated',
         nav: require('./nav/en'),

From 842157d269a7531b2a9073223d12b79903d658e8 Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Sun, 15 Sep 2019 16:54:40 +0300
Subject: [PATCH 15/17] update docs for ariaLabel property

---
 .../docs/docs/theme/default-theme-config.md   | 19 +++++++++++++++++++
 .../docs/zh/theme/default-theme-config.md     | 18 ++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md
index 0d912c15b8..2689912590 100644
--- a/packages/docs/docs/theme/default-theme-config.md
+++ b/packages/docs/docs/theme/default-theme-config.md
@@ -72,6 +72,25 @@ module.exports = {
 }
 ```
 
+You can change `aria-label` of dropdown button to with a custom aria-label. Default value is text property. if the dropdown menu consists of language items., default value is 'Select language'
+
+```js
+module.exports = {
+  themeConfig: {
+    nav: [
+      {
+        text: 'Languages',
+        ariaLabel: 'Language Menu'
+        items: [
+          { text: 'Chinese', link: '/language/chinese/' },
+          { text: 'Japanese', link: '/language/japanese/' }
+        ]
+      }
+    ]
+  }
+}
+```
+
 You can also have sub groups inside a dropdown by having nested items:
 
 ```js
diff --git a/packages/docs/docs/zh/theme/default-theme-config.md b/packages/docs/docs/zh/theme/default-theme-config.md
index 843079e01d..eafa1bfb65 100644
--- a/packages/docs/docs/zh/theme/default-theme-config.md
+++ b/packages/docs/docs/zh/theme/default-theme-config.md
@@ -68,6 +68,24 @@ module.exports = {
 }
 ```
 
+
+```js
+module.exports = {
+  themeConfig: {
+    nav: [
+      {
+        text: 'Languages',
+        ariaLabel: 'Language Menu'
+        items: [
+          { text: 'Chinese', link: '/language/chinese/' },
+          { text: 'Japanese', link: '/language/japanese/' }
+        ]
+      }
+    ]
+  }
+}
+```
+
 此外，你还可以通过嵌套的 `items` 来在 `下拉列表` 中设置分组：
 
 ```js

From 371af79aef26cfa9216d303b4c4daff3596caec8 Mon Sep 17 00:00:00 2001
From: Franck <abgrallkefran@gmail.com>
Date: Sun, 15 Sep 2019 16:18:32 +0200
Subject: [PATCH 16/17] feat: Try to improve code readability

---
 .../theme-default/components/DropdownLink.vue | 27 +++++++------------
 .../theme-default/components/NavLink.vue      |  2 +-
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index dffd817fe7..dceb173d8b 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -35,17 +35,21 @@
             <li
               class="dropdown-subitem"
               :key="childSubItem.link"
-              v-for="(childSubItem, subIndex) in subItem.items"
+              v-for="childSubItem in subItem.items"
             >
               <NavLink
-                @focusout-navlink="focusoutNavLink(getSubItemIndex(index, subIndex))"
+                @focusout="
+                  isLastItemOfArray(childSubItem, subItem.items) &&
+                  isLastItemOfArray(subItem, item.items) &&
+                  toggle()
+                "
                 :item="childSubItem"/>
             </li>
           </ul>
 
           <NavLink
             v-else
-            @focusout-navlink="focusoutNavLink(index + 1)"
+            @focusout="isLastItemOfArray(subItem, item.items) && toggle()"
             :item="subItem"
           />
         </li>
@@ -57,6 +61,7 @@
 <script>
 import NavLink from '@theme/components/NavLink.vue'
 import DropdownTransition from '@theme/components/DropdownTransition.vue'
+import last from 'lodash/last'
 
 export default {
   components: { NavLink, DropdownTransition },
@@ -74,11 +79,6 @@ export default {
   },
 
   computed: {
-    allItemsCount () {
-      return this.item.items.reduce((totalCount, item) => {
-        return item.items ? totalCount + item.items.length : totalCount + 1
-      }, 0)
-    },
 
     dropdownAriaLabel () {
       return this.item.ariaLabel || this.item.text
@@ -90,15 +90,8 @@ export default {
       this.open = !this.open
     },
 
-    getSubItemIndex (index, subIndex) {
-      const items = [...this.item.items].splice(0, index) // find up to selected item
-      return items.reduce((totalCount, item) => {
-        return item.items ? totalCount + item.items.length : totalCount
-      }, 0) + subIndex + 1
-    },
-
-    focusoutNavLink (index) {
-      if (this.allItemsCount === index) this.open = false
+    isLastItemOfArray (item, array) {
+      return last(array) === item
     }
   },
 
diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue
index 2ac6ccc591..c73080abb8 100644
--- a/packages/@vuepress/theme-default/components/NavLink.vue
+++ b/packages/@vuepress/theme-default/components/NavLink.vue
@@ -47,7 +47,7 @@ export default {
     isMailto,
     isTel,
     focusoutAction () {
-      this.$emit('focusout-navlink')
+      this.$emit('focusout')
     }
   }
 }

From 0ef66cc6efd6f148b2c88fa28c0b17f83afa8523 Mon Sep 17 00:00:00 2001
From: edisdev <hedis285@gmail.com>
Date: Sun, 15 Sep 2019 17:37:54 +0300
Subject: [PATCH 17/17] add aria-label property in docs page (theme)

---
 .../docs/docs/theme/default-theme-config.md   | 20 +------------------
 .../docs/zh/theme/default-theme-config.md     | 19 +-----------------
 2 files changed, 2 insertions(+), 37 deletions(-)

diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md
index 2689912590..6fbfb3cd50 100644
--- a/packages/docs/docs/theme/default-theme-config.md
+++ b/packages/docs/docs/theme/default-theme-config.md
@@ -62,25 +62,7 @@ module.exports = {
     nav: [
       {
         text: 'Languages',
-        items: [
-          { text: 'Chinese', link: '/language/chinese/' },
-          { text: 'Japanese', link: '/language/japanese/' }
-        ]
-      }
-    ]
-  }
-}
-```
-
-You can change `aria-label` of dropdown button to with a custom aria-label. Default value is text property. if the dropdown menu consists of language items., default value is 'Select language'
-
-```js
-module.exports = {
-  themeConfig: {
-    nav: [
-      {
-        text: 'Languages',
-        ariaLabel: 'Language Menu'
+        ariaLabel: 'Language Menu',
         items: [
           { text: 'Chinese', link: '/language/chinese/' },
           { text: 'Japanese', link: '/language/japanese/' }
diff --git a/packages/docs/docs/zh/theme/default-theme-config.md b/packages/docs/docs/zh/theme/default-theme-config.md
index eafa1bfb65..e32433bceb 100644
--- a/packages/docs/docs/zh/theme/default-theme-config.md
+++ b/packages/docs/docs/zh/theme/default-theme-config.md
@@ -58,24 +58,7 @@ module.exports = {
     nav: [
       {
         text: 'Languages',
-        items: [
-          { text: 'Chinese', link: '/language/chinese/' },
-          { text: 'Japanese', link: '/language/japanese/' }
-        ]
-      }
-    ]
-  }
-}
-```
-
-
-```js
-module.exports = {
-  themeConfig: {
-    nav: [
-      {
-        text: 'Languages',
-        ariaLabel: 'Language Menu'
+        ariaLabel: 'Language Menu',
         items: [
           { text: 'Chinese', link: '/language/chinese/' },
           { text: 'Japanese', link: '/language/japanese/' }