fix($theme-default): Make navbar dropdown links accessible

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()
   })

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"><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">Guide</a></li>

packages/@vuepress/theme-default/components/DropdownLink.vue

@@ -3,16 +3,18 @@
     class="dropdown-wrapper"
     :class="{ open }"
   >
-    <a
+    <button
       class="dropdown-title"
+      type="button"
+      :aria-label="dropdownName"
       @click="toggle"
     >
       <span class="title">{{ item.text }}</span>
       <span
         class="arrow"
         :class="open ? 'down' : 'right'"
       ></span>
-    </a>
+    </button>
 
     <DropdownTransition>
       <ul
@@ -33,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>
@@ -65,12 +70,34 @@ export default {
   props: {
     item: {
       required: true
+    },
+    dropdownName: {
+      default: 'Dropdown',
+      type: String
+    }
+  },
+
+  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
     }
   }
 }
@@ -81,6 +108,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
@@ -149,9 +181,12 @@ export default {
 @media (min-width: $MQMobile)
   .dropdown-wrapper
     height 1.8rem
-    &:hover .nav-dropdown
+    &:hover .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

packages/@vuepress/theme-default/components/NavLink.vue

@@ -2,12 +2,14 @@
   <router-link
     class="nav-link"
     :to="link"
+    @keyup.tab.native="keypressTab"
     v-if="!isExternal(link)"
     :exact="exact"
   >{{ item.text }}</router-link>
   <a
     v-else
     :href="link"
+    @keyup.tab.prevent="keypressTab"
     class="nav-link external"
     :target="isMailto(link) || isTel(link) ? null : '_blank'"
     :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
@@ -43,7 +45,10 @@ export default {
   methods: {
     isExternal,
     isMailto,
-    isTel
+    isTel,
+    keypressTab () {
+      this.$emit('keypressTab')
+    }
   }
 }
 </script>

packages/@vuepress/theme-default/components/NavLinks.vue

@@ -12,6 +12,7 @@
       <DropdownLink
         v-if="item.type === 'links'"
         :item="item"
+        dropdownName="Select Dropdown"
       />
       <NavLink
         v-else

packages/docs/docs/theme/default-theme-config.md

@@ -48,7 +48,7 @@ module.exports = {
     nav: [
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide/' },
-      { text: 'External', link: 'https://google.com' },
+      { text: 'External', link: 'https://google.com' }
     ]
   }
 }