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

Author: edisdev

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',

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="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>

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="dropdownAriaLabel"
       @click="toggle"
     >
       <span class="title">{{ item.text }}</span>
       <span
         class="arrow"
         :class="open ? 'down' : 'right'"
       ></span>
-    </a>
+    </button>
 
     <DropdownTransition>
       <ul
@@ -35,12 +37,19 @@
               :key="childSubItem.link"
               v-for="childSubItem in subItem.items"
             >
-              <NavLink :item="childSubItem"/>
+              <NavLink
+                @focusout="
+                  isLastItemOfArray(childSubItem, subItem.items) &&
+                  isLastItemOfArray(subItem, item.items) &&
+                  toggle()
+                "
+                :item="childSubItem"/>
             </li>
           </ul>
 
           <NavLink
             v-else
+            @focusout="isLastItemOfArray(subItem, item.items) && toggle()"
             :item="subItem"
           />
         </li>
@@ -52,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 },
@@ -68,9 +78,26 @@ export default {
     }
   },
 
+  computed: {
+
+    dropdownAriaLabel () {
+      return this.item.ariaLabel || this.item.text
+    }
+  },
+
   methods: {
     toggle () {
       this.open = !this.open
+    },
+
+    isLastItemOfArray (item, array) {
+      return last(array) === item
+    }
+  },
+
+  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"
+    @focusout.native="focusoutAction"
     v-if="!isExternal(link)"
     :exact="exact"
   >{{ item.text }}</router-link>
   <a
     v-else
     :href="link"
+    @focusout="focusoutAction"
     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,
+    focusoutAction () {
+      this.$emit('focusout')
+    }
   }
 }
 </script>

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

@@ -54,6 +54,7 @@ export default {
         const themeLocales = this.$site.themeConfig.locales || {}
         const languageDropdown = {
           text: this.$themeLocaleConfig.selectText || '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

packages/docs/docs/.vuepress/config.js

@@ -39,6 +39,7 @@ module.exports = ctx => ({
       '/': {
         label: 'English',
         selectText: 'Languages',
+        ariaLabel: 'Select language',
         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'),

packages/docs/docs/.vuepress/nav/en.js

@@ -17,6 +17,7 @@ module.exports = [
   },
   {
     text: "Learn More",
+    ariaLabel: "Learn More",
     items: [
       {
         text: "API",

packages/docs/docs/.vuepress/nav/zh.js

@@ -17,6 +17,7 @@ module.exports = [
   },
   {
     text: "了解更多",
+    ariaLabel: "了解更多",
     items: [
       {
         text: "API",

packages/docs/docs/guide/i18n.md

@@ -54,6 +54,8 @@ module.exports = {
         selectText: 'Languages',
         // label for this locale in the language dropdown
         label: 'English',
+        // 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
@@ -66,7 +68,7 @@ module.exports = {
         // algolia docsearch options for current locale
         algolia: {},
         nav: [
-          { text: 'Nested', link: '/nested/' }
+          { text: 'Nested', link: '/nested/' , ariaLabel: 'Nested' }
         ],
         sidebar: {
           '/': [/* ... */],

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' }
     ]
   }
 }
@@ -62,6 +62,7 @@ module.exports = {
     nav: [
       {
         text: 'Languages',
+        ariaLabel: 'Language Menu',
         items: [
           { text: 'Chinese', link: '/language/chinese/' },
           { text: 'Japanese', link: '/language/japanese/' }